Pridajte stránky na svoj Angular web pomocou súborov Markdown

Markdown je populárny formát na písanie webového obsahu. Jeho kompromis medzi HTML a jednoduchou angličtinou umožňuje autorom používať známejšiu syntax. Môže výrazne pomôcť uľahčiť každodenný chod blogov s viacerými autormi a podobných stránok.

Markdown môže byť obzvlášť užitočný, ak si chcete vytvoriť blog alebo mať viacero webových stránok s obsahom. Používanie súborov Markdown vám umožňuje zamerať sa viac na obsah, než na kód okolo tohto obsahu.

Markdown s Angular môžete integrovať pomocou balíka uzlov ngx-markdown a jeho nakonfigurovaním tak, aby fungoval v rámci komponentu.

Nastavenie uhlovej aplikácie

Ak ešte nemáte Uhlová aplikácia, môžete si stiahnuť túto vzorovú aplikáciu Angular z GitHub.

1. Na stránke projektu na GitHub kliknite na kód tlačidlo. Vyberte Stiahnite si ZIP.
2. Rozbaľte priečinok na lokálnom počítači.
instagram viewer
3. Otvorte projekt pomocou IDE, napríklad Visual Code, Notepad++ alebo Sublime Text. Ak používate IDE, na vykonanie potrebných príkazov môžete použiť vstavaný terminál.
4. Prejdite do koreňového priečinka projektu pomocou terminálu. Názov koreňového priečinka je muo-sample-angular-app-maina obsahuje e2e a src priečinky. Napríklad, ak je váš projekt v priečinku „Stiahnuté súbory“, spustite nasledujúci príkaz a prejdite do priečinka.

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

5. Nainštalujte moduly uzlov do projektu. Ak nemôžete spustiť príkazy uzla, možno budete musieť nainštalovať Node.js do vášho počítača.

   npm Inštalácia

6. Teraz môžete spustiť aplikáciu Angular. Spustite nasledujúci príkaz v koreňovom priečinku projektu.

   ng slúžiť

7. Po spustení ng slúžiť počkajte, kým sa dokončí kompilácia projektu. Po dokončení príkazový riadok vypíše lokálnu adresu, na ktorej bude bežať vaša aplikácia Angular. Zvyčajne je to zapnuté http://localhost: 4200/.
8. Otvorte webový prehliadač a zadajte adresu, ktorá je hostiteľom vašej stránky, napr. http://localhost: 4200/. Po načítaní stránky by ste mali vidieť domovskú stránku vzorovej uhlovej aplikácie.

Ako nainštalovať Ngx-Markdown do vašej aplikácie Angular

Aby ste mohli používať súbory Markdown vo svojej aplikácii Angular, budete si musieť nainštalovať balík ngx-markdown.

1. V koreňovom priečinku vášho projektu spustite v termináli nasledujúci príkaz. Uistite sa, že verzia balíka ngx-markdown je kompatibilná s vašou verziou Angular.

   npm Inštalácia ngx-markdown@^10.1.1--uložiť
   

2. Otvorte súbor app.module.ts. Tento súbor je pod projekt/zdroj/aplikácia priečinok.
3. Nakonfigurujte nový modul Markdown. Importujte nasledujúce balíky:

   importovať { SecurityContext } od '@angular/core';
   importovať { MarkdownModule } od 'ngx-markdown'; 
   importovať { HttpClientModule, HttpClient } od '@angular/common/http'; 

4. Pridajte modul Markdown do poľa importov.

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

Ako vytvoriť súbory Markdown

Každý súbor Markdown bude predstavovať stránku s obsahom vášho webu. Budete musieť vytvoriť priečinok na ukladanie súborov Markdown a naplnenie súborov Markdown obsahom.

1. Prejdite na aktíva priečinok, ktorý je pod projekt/src priečinok.
2. Vytvorte nový priečinok s názvom príspevky.
3. Vytvorte viacero súborov Markdown. Súbory Markdown používajú príponu .md.
4. Naplňte súbory .md nejakým obsahom formátovaný v syntaxi Markdown. Tu je ukážka obsahu, ktorý môžete použiť:

   #### 3. júna 2022
   # Recept na lahodnú čokoládu
   ___
   Toto je ako si vyrobiť úžasný čokoládový cheesecake:
   * Rozdrvte sušienky, premiešajte s maslo.
   * Nechaj to nastaviť v chladničke po dobu 10 minút.
   * Zmiešajte trochu smotany s sirup.
   * Položte ho na sušienky a potom ho vložte späť do chladničky.

Ako vykresliť súbor Markdown v komponente

Každý z týchto súborov budete musieť uviesť na domovskej stránke aplikácie, aby ste k nim mohli prejsť.

1. OTVORENÉ home.component.html súbor. Tento súbor je pod project/src/app/home priečinok.
2. Pridajte odkazy na svoje nové stránky Markdown. Odkazy by ste mali zostaviť podľa názvu vašich súborov Markdown. Napríklad, ak ste mali súbor Markdown s názvom „Recipe.md“, potom adresa URL stránky bude „/posts/post/Recipe“.

   <trieda div="odkazy">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" štýl="margin-bottom: 24px">Recept na čokoládový tvarohový koláč >></a>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" štýl="margin-bottom: 24px">Recept na jahodový tvarohový koláč
   >></a>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" štýl="margin-bottom: 24px">Recept na karamelový tvarohový koláč >></a>
   </div>

3. Pridajte nejaký štýl do odkazov:

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

4. Vytvorte ďalší komponent, ktorý môžete použiť ako samostatnú stránku. Táto stránka by mala byť schopná vykresliť akýkoľvek daný súbor Markdown. V termináli spustite nasledovné ng generovať príkaz na vytvorenie nového komponentu:

   ng g c domov/príspevky

5. V novom priečinku „príspevky“ by sa teraz mali vygenerovať štyri nové súbory. Patria sem "posts.component.html", "posts.component.css", "posts.component.ts" a "posts.component.spec.ts".
6. Otvor posts.component.html a pridajte kód HTML na vykreslenie súborov Markdown.

   <div style="výplň: 100px" markdown [src]="príspevok"></div>

7. Otvor posts.component.ts súbor. Pridajte import smerovania.

   importovať { ActivatedRoute } od '@angular/router';

8. Ak chcete vykresliť súbory Markdown, nahraďte funkcie konštruktora a ngOnInit() kódom TypeScript. Týmto sa prevezme názov článku v odkaze URL a prejde sa na príslušný súbor Markdown uložený v priečinku aktív.

   príspevok: reťazec; 
   href: reťazec; 
   konštruktér(súkromná trasa: ActivatedRoute) { } 
   ngOnInit(): neplatné {
   nech názov článku = toto.route.snapshot.paramMap.get('článok'); 
   toto.href = okno.location.href; 
    tento.príspevok = './majetok/príspevky/' + názov článku + '.md'; 
   }

9. Otvor app-routing.module.ts súbor. Tento súbor je pod projekt/zdroj/aplikácia priečinok.
10. Importujte nový komponent príspevku a pridajte ho do poľa trás.

    importovať { PostsComponent } od './home/posts/posts.component';
    konšt trasy: Trasy = [
    // ...
     { cesta: 'príspevky/príspevok/:článok', komponent: PostsComponent }, 
    ];

11. Teraz môžete znova spustiť aplikáciu Angular.

    ng slúžiť 

12. Navštívte http://localhost: 4200 alebo ktorákoľvek adresa, na ktorej je hosťovaná vaša stránka.
13. Kliknite na jeden z odkazov na stránke. Teraz by ste mali vidieť vykreslenie obsahu Markdown na samostatnej stránke.
14. Pracovný príklad si môžete stiahnuť z GitHub stránka projektu. Na stiahnutie a spustenie projektu môžete postupovať podľa pokynov v súbore README.

Používanie Markdown vo vašej Angular Application

Používanie súborov Markdown na vašej webovej lokalite vám umožní zamerať sa viac na váš obsah. To môže byť veľmi užitočné pre blogovacie webové stránky. Ak máte aplikáciu Angular, môžete použiť súbory Markdown pre svoje webové stránky pomocou balíka uzlov ngx-markdown.

Môžete sa dozvedieť viac o ďalších technológiách, ktoré môžu byť užitočné pri vytváraní webovej stránky na blogovanie. Jedným z nich je Hugo, generátor statických stránok, ktorý tiež vykresľuje súbory Markdown ako webové stránky.