Adăugați pagini pe site-ul dvs. Angular folosind fișiere Markdown

Markdown este un format popular pentru scrierea conținutului web. Compromisul dintre HTML și limba engleză simplă permite scriitorilor să folosească o sintaxă mai familiară. Poate ajuta foarte mult la ușurarea rulării de zi cu zi a blogurilor cu mai mulți autori și a site-urilor similare.

Markdown poate fi deosebit de util dacă doriți să creați un blog sau să aveți mai multe pagini web cu conținut. Utilizarea fișierelor Markdown vă permite să vă concentrați mai mult pe conținut, decât pe codul din jurul conținutului respectiv.

Puteți integra Markdown cu Angular folosind pachetul de nod ngx-markdown și configurându-l să funcționeze într-o componentă.

Configurarea unei aplicații unghiulare

Dacă nu aveți deja un Aplicație unghiulară, puteți descărca acest exemplu de aplicație Angular de la GitHub.

1. Pe pagina proiectului de pe GitHub, faceți clic pe Cod buton. Selectați Descărcați ZIP.
2. Dezarhivați folderul pe computerul local.
3. Deschideți proiectul folosind un IDE, cum ar fi Visual Code, Notepad++ sau Sublime Text. Dacă utilizați un IDE, puteți utiliza un terminal încorporat pentru a executa orice comenzi necesare.
4. Navigați la folderul rădăcină al proiectului folosind un terminal. Numele folderului rădăcină este muo-sample-angular-app-main, și conține e2e și src foldere. De exemplu, dacă proiectul dvs. se află în folderul „Descărcări”, rulați următoarea comandă pentru a naviga la folder.

   CD C:\Utilizatori\Sharl\Descărcări\muo-sample-angular-app-main

5. Instalați module de noduri în proiect. Dacă nu puteți rula comenzi de nod, poate fi necesar să instalați Node.js pe computerul dvs.

   npm instalare

6. Acum puteți lansa aplicația Angular. Rulați următoarea comandă în folderul rădăcină al proiectului.

   ng servi

7. După rularea ng servi comandă, așteptați ca proiectul să termine compilarea. Odată ce s-a terminat, linia de comandă va afișa adresa locală pe care va rula aplicația Angular. De obicei, aceasta este activată http://localhost: 4200/.
8. Deschideți un browser web și introduceți adresa care găzduiește site-ul dvs., de exemplu, http://localhost: 4200/. Odată ce pagina s-a încărcat, ar trebui să puteți vedea pagina de pornire pentru exemplul de aplicație unghiulară.

Cum să instalați Ngx-Markdown în aplicația dvs. Angular

Pentru a putea folosi fișierele Markdown în aplicația Angular, va trebui să instalați pachetul ngx-markdown.

1. În folderul rădăcină al proiectului, rulați următoarea comandă în terminal. Asigurați-vă că versiunea pachetului ngx-markdown este compatibilă cu versiunea dvs. Angular.

   npm instalare ngx-markdown@^10.1.1--Salvați
   

2. Deschideți fișierul aplicație.modul.ts. Acest fișier se află sub proiect/src/aplicație pliant.
3. Configurați noul modul Markdown. Importă următoarele pachete:

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

4. Adăugați modulul Markdown la matricea de importuri.

   importuri: [
    ...
    HttpClientModule, 
   MarkdownModule.pentruRoot({ încărcător: HttpClient, dezinfectează: SecurityContext. NICI UNUL }) 
   ], 

Cum să vă creați fișierele Markdown

Fiecare fișier Markdown va reprezenta o pagină de conținut pentru site-ul dvs. Va trebui să creați un folder în care să stocați fișierele Markdown și să completați fișierele Markdown cu conținut.

1. Navigați la active folder, care se află sub proiect/src pliant.
2. Creați un folder nou numit postări.
3. Creați mai multe fișiere Markdown. Fișierele Markdown folosesc o extensie .md.
4. Populați fișierele .md cu ceva conținut formatat în sintaxa Markdown. Iată câteva exemple de conținut pe care le puteți folosi:

   #### 03 iunie 2022
   # Rețetă delicioasă de ciocolată
   ___
   Acest este cum faci un cheesecake minunat cu ciocolată:
   * Zdrobiți biscuiții, amestecați cu unt.
   * Lasă-l a stabilit la frigider pentru 10 minute.
   * Amestecați niște smântână cu sirop.
   * Se pune peste biscuiti apoi se pune din nou la frigider.

Cum să redați fișierul Markdown într-o componentă

Va trebui să enumerați fiecare dintre aceste fișiere pe pagina de pornire a aplicației, astfel încât să puteți naviga la ele.

1. Deschis home.component.html fişier. Acest fișier se află sub project/src/app/home pliant.
2. Adăugați linkuri către noile pagini Markdown. Ar trebui să construiți legăturile în funcție de numele fișierelor Markdown. De exemplu, dacă aveți un fișier Markdown numit „Recipe.md”, atunci adresa URL a paginii va fi „/posts/post/Recipe”.

   <div class="link-uri">
   <un routerLink="/posts/post/ChocolateCheesecakeRecipe" stil="margine-jos: 24px">Reteta Cheesecake cu ciocolata >></A>
   <br>
   <un routerLink="/posts/post/StrawberryCheesecakeRecipe" stil="margine-jos: 24px">Reteta Cheesecake cu capsuni
   >></A>
   <br>
   <un routerLink="/posts/post/CaramelCheesecakeRecipe" stil="margine-jos: 24px">Reteta Cheesecake Caramel >></A>
   </div>

3. Adăugați ceva stil la link-uri:

   .linkuri {
    umplutură: 72px;
    text-align: centru;
   }

4. Creați o altă componentă pe care o puteți utiliza ca pagină separată. Această pagină ar trebui să poată reda orice fișier Markdown dat. În terminal, rulați următoarele ng genera comandă pentru a crea o nouă componentă:

   ng g c home/postări

5. Ar trebui să fie acum patru fișiere noi generate în noul folder „postări”. Aceasta include „posts.component.html”, „posts.component.css”, „posts.component.ts” și „posts.component.spec.ts”.
6. Deschide posts.component.html fișier și adăugați codul HTML pentru a reda fișierele Markdown.

   <stil div="umplutură: 100px" markdown [src]="post"></div>

7. Deschide posturi.component.ts fişier. Adăugați importul de rutare.

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

8. Înlocuiți funcțiile constructor și ngOnInit() cu codul TypeScript pentru a reda fișierele Markdown. Aceasta va prelua numele articolului din linkul URL și va fi direcționată către fișierul Markdown corespunzător stocat în folderul assets.

   post: sfoară; 
   href: șir; 
   constructor(rută privată: ActivatedRoute) { } 
   ngOnInit(): vid {
   lăsa Nume articol = acest.route.snapshot.paramMap.get('articol'); 
   acest.href = fereastră.locație.href; 
    asta.post = './assets/posts/' + Nume articol + '.md'; 
   }

9. Deschide app-routing.module.ts fişier. Acest fișier se află sub proiect/src/aplicație pliant.
10. Importați noua componentă post și adăugați-o la matricea de rute.

    import { PostsComponent } din './home/posts/posts.component';
    const rute: Rute = [
    // ...
     { cale: 'posturi/post/:articol', component: PostsComponent }, 
    ];

11. Acum puteți lansa din nou aplicația Angular.

    ng servi 

12. Vizita http://localhost: 4200 sau orice adresă găzduiește site-ul dvs.
13. Faceți clic pe unul dintre linkurile paginii. Acum ar trebui să vedeți redarea conținutului Markdown pe o pagină separată.
14. Puteți descărca un exemplu de lucru din GitHub pagina proiectului. Puteți urma instrucțiunile din fișierul README pentru a descărca și rula proiectul.

Utilizarea Markdown în aplicația dvs. Angular

Utilizarea fișierelor Markdown pe site-ul dvs. vă permite să vă concentrați mai mult asupra conținutului dvs. Acest lucru poate fi foarte util pentru site-urile web de bloguri. Dacă aveți o aplicație Angular, puteți utiliza fișierele Markdown pentru paginile dvs. web folosind pachetul ngx-markdown node.

Puteți afla mai multe despre alte stive de tehnologie care pot fi utile pentru crearea unui site web de blogging. Unul dintre acestea este Hugo, un generator de site static care redă și fișierele Markdown ca pagini web.