Přidejte stránky na svůj Angular web pomocí souborů Markdown

Markdown je oblíbený formát pro psaní webového obsahu. Jeho kompromis mezi HTML a jednoduchou angličtinou umožňuje autorům používat známější syntaxi. Může výrazně pomoci usnadnit každodenní provozování blogů s více autory a podobných stránek.

Markdown může být zvláště užitečný, pokud si chcete vytvořit blog nebo mít více webových stránek s obsahem. Používání souborů Markdown vám umožňuje zaměřit se více na obsah než na kód kolem tohoto obsahu.

Markdown můžete integrovat s Angular pomocí balíčku uzlu ngx-markdown a jeho nakonfigurováním tak, aby fungoval v rámci komponenty.

Nastavení úhlové aplikace

Pokud ještě nemáte Úhlová aplikace, můžete si stáhnout tuto ukázkovou aplikaci Angular z GitHub.

1. Na stránce projektu na GitHubu klikněte na Kód knoflík. Vybrat Stáhnout ZIP.
2. Rozbalte složku do místního počítače.
instagram viewer
3. Otevřete projekt pomocí IDE, jako je Visual Code, Notepad++ nebo Sublime Text. Pokud používáte IDE, můžete použít vestavěný terminál k provádění všech potřebných příkazů.
4. Přejděte do kořenové složky projektu pomocí terminálu. Název kořenové složky je muo-sample-angular-app-maina obsahuje e2e a src složky. Pokud je váš projekt například ve složce „Stažené soubory“, spusťte následující příkaz a přejděte do složky.

   CD C:\Users\Sharl\Downloads\muo-sample-angular-app-main

5. Nainstalujte moduly uzlů do projektu. Pokud nemůžete spouštět příkazy uzlu, možná budete muset nainstalovat Node.js do vašeho počítače.

   npm Nainstalujte

6. Nyní můžete spustit aplikaci Angular. Spusťte následující příkaz v kořenové složce projektu.

   ng sloužit

7. Po spuštění ng sloužit počkejte na dokončení kompilace projektu. Po dokončení příkazový řádek vydá místní adresu, na které poběží vaše aplikace Angular. Obvykle je toto zapnuto http://localhost: 4200/.
8. Otevřete webový prohlížeč a zadejte adresu, která je hostitelem vašeho webu, např. http://localhost: 4200/. Jakmile se stránka načte, měli byste vidět domovskou stránku ukázkové úhlové aplikace.

Jak nainstalovat Ngx-Markdown do vaší aplikace Angular

Abyste mohli používat soubory Markdown ve vaší aplikaci Angular, budete si muset nainstalovat balíček ngx-markdown.

1. V kořenové složce projektu spusťte v terminálu následující příkaz. Ujistěte se, že verze balíčku ngx-markdown je kompatibilní s vaší verzí Angular.

   npm Nainstalujte ngx-markdown@^10.1.1--Uložit
   

2. Otevřete soubor app.module.ts. Tento soubor je pod projekt/zdroj/aplikace složka.
3. Nakonfigurujte nový modul Markdown. Importujte následující balíčky:

   import { SecurityContext } z '@angular/core';
   import { MarkdownModule } z 'ngx-markdown'; 
   import { HttpClientModule, HttpClient } z '@angular/common/http'; 

4. Přidejte modul Markdown do pole importů.

   dovoz: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ nakladač: HttpClient, dezinfikujte: SecurityContext. ŽÁDNÝ }) 
   ], 

Jak vytvořit soubory Markdown

Každý soubor Markdown bude představovat stránku s obsahem vašeho webu. Budete muset vytvořit složku pro ukládání souborů Markdown a naplnění souborů Markdown obsahem.

1. Přejděte na aktiva složku, která je pod projekt/src složka.
2. Vytvořte novou složku s názvem příspěvky.
3. Vytvořte více souborů Markdown. Soubory Markdown používají příponu .md.
4. Naplňte soubory .md nějakým obsahem formátován v syntaxi Markdown. Zde je ukázkový obsah, který můžete použít:

   #### 3. června 2022
   # Recept na vynikající čokoládu
   ___
   Tento je jak uděláte skvělý čokoládový cheesecake:
   * Sušenky rozdrťte, promíchejte s máslo.
   *Nech to soubor v lednici na 10 minut.
   * Smíchejte trochu smetany s sirup.
   * Položte na sušenky a poté vložte zpět do lednice.

Jak vykreslit soubor Markdown v komponentě

Každý z těchto souborů budete muset uvést na domovské stránce aplikace, abyste k nim mohli přejít.

1. OTEVŘENO home.component.html soubor. Tento soubor je pod project/src/app/home složka.
2. Přidejte odkazy na své nové stránky Markdown. Své odkazy byste měli vytvářet podle názvu souborů Markdown. Pokud jste například měli soubor Markdown s názvem „Recipe.md“, pak adresa URL stránky bude „/posts/post/Recipe“.

   <div třída="Odkazy">
   <routerLink="/posts/post/ChocolateCheesecakeRecipe" styl="okraj-dolní: 24px">Recept na čokoládový tvarohový koláč >></A>
   <br>
   <routerLink="/posts/post/StrawberryCheesecakeRecipe" styl="okraj-dolní: 24px">Recept na jahodový tvarohový koláč
   >></A>
   <br>
   <routerLink="/posts/post/CaramelCheesecakeRecipe" styl="okraj-dolní: 24px">Recept na karamelový tvarohový koláč >></A>
   </div>

3. Přidejte do odkazů nějaký styl:

   .Odkazy {
    výplň: 72px;
    text-align: center;
   }

4. Vytvořte další komponentu, kterou můžete použít jako samostatnou stránku. Tato stránka by měla být schopna vykreslit jakýkoli daný soubor Markdown. V terminálu spusťte následující ng generovat příkaz k vytvoření nové komponenty:

   ng g c domov/příspěvky

5. V nové složce „příspěvky“ by nyní měly být vygenerovány čtyři nové soubory. Patří sem „posts.component.html“, „posts.component.css“, „posts.component.ts“ a „posts.component.spec.ts“.
6. Otevři posts.component.html a přidejte kód HTML pro vykreslení souborů Markdown.

   <div styl="výplň: 100px" markdown [src]="pošta"></div>

7. Otevři posts.component.ts soubor. Přidejte import směrování.

   import { ActivatedRoute } z '@angular/router';

8. Nahraďte konstruktor a funkce ngOnInit() kódem TypeScript pro vykreslení souborů Markdown. Tím se převezme název článku v odkazu URL a směruje se do odpovídajícího souboru Markdown uloženého ve složce aktiv.

   příspěvek: řetězec; 
   href: řetězec; 
   konstruktér(soukromá trasa: ActivatedRoute) { } 
   ngOnInit(): prázdnota {
   nechat název článku = tento.route.snapshot.paramMap.get('článek'); 
   tento.href = okno.location.href; 
    tento.příspěvek = './aktiva/příspěvky/' + název článku + '.md'; 
   }

9. Otevři app-routing.module.ts soubor. Tento soubor je pod projekt/zdroj/aplikace složka.
10. Importujte novou komponentu příspěvku a přidejte ji do pole tras.

    import { PostsComponent } z './home/posts/posts.component';
    konst trasy: Trasy = [
    // ...
     { cesta: 'příspěvky/příspěvek/:článek', komponenta: PostsComponent }, 
    ];

11. Nyní můžete znovu spustit aplikaci Angular.

    ng sloužit 

12. Návštěva http://localhost: 4200 nebo kterákoli adresa hostující vaše stránky.
13. Klikněte na jeden z odkazů na stránce. Nyní byste měli vidět vykreslení obsahu Markdown na samostatné stránce.
14. Funkční příklad si můžete stáhnout z GitHub stránka projektu. Při stažení a spuštění projektu můžete postupovat podle pokynů v souboru README.

Použití Markdown ve vaší Angular aplikaci

Používání souborů Markdown na vašem webu vám umožní soustředit se více na váš obsah. To může být velmi užitečné pro blogovací weby. Pokud máte aplikaci Angular, můžete pro své webové stránky používat soubory Markdown pomocí balíčku uzlu ngx-markdown.

Můžete se dozvědět více o dalších technologických hromadách, které mohou být užitečné pro nastavení blogovacího webu. Jedním z nich je Hugo, generátor statických stránek, který také vykresluje soubory Markdown jako webové stránky.