Lisage oma nurgelisele veebisaidile lehti Markdowni failide abil

Markdown on populaarne vorming veebisisu kirjutamiseks. Selle kompromiss HTML-i ja tavalise inglise keele vahel võimaldab kirjanikel kasutada tuttavamat süntaksit. See võib oluliselt hõlbustada mitme autoriga ajaveebide ja sarnaste saitide igapäevast tööd.

Markdown võib olla eriti kasulik, kui soovite luua ajaveebi või teil on mitu sisuga veebilehte. Markdowni failide kasutamine võimaldab teil keskenduda rohkem sisule, mitte seda sisu ümbritsevale koodile.

Saate integreerida Markdowni Angulariga, kasutades paketti ngx-markdown node ja konfigureerides selle komponendis töötama.

Nurgarakenduse seadistamine

Kui teil veel pole Nurga rakendus, saate selle Angular-rakenduse näidise alla laadida saidilt GitHub.

1. GitHubi projektilehel klõpsake nuppu Kood nuppu. Valige Laadige alla ZIP.
2. Pakkige kaust lahti oma kohalikku arvutisse.
instagram viewer
3. Avage projekt IDE abil, näiteks Visual Code, Notepad++ või Sublime Text. Kui kasutate IDE-d, saate vajalike käskude täitmiseks kasutada sisseehitatud terminali.
4. Liikuge terminali abil projekti juurkausta. Juurkausta nimi on muo-sample-angular-app-mainja see sisaldab e2e ja src kaustad. Näiteks kui teie projekt on kaustas "Allalaadimised", käivitage kausta navigeerimiseks järgmine käsk.

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

5. Paigaldage projekti sõlmemoodulid. Kui te ei saa sõlmekäske käivitada, peate võib-olla installima Node.js arvutisse.

   npm installida

6. Nüüd saate käivitada rakenduse Angular. Käivitage projekti juurkaustas järgmine käsk.

   teenida

7. Pärast jooksmist teenida käsk, oodake, kuni projekt kompileerimise lõpetab. Kui see on lõppenud, väljastab käsurida kohaliku aadressi, millel teie Angular rakendus töötab. Tavaliselt on see sisse lülitatud http://localhost: 4200/.
8. Avage veebibrauser ja sisestage aadress, mis teie saiti hostib, näiteks http://localhost: 4200/. Kui leht on laaditud, peaksite nägema nurgarakenduse näidise avalehte.

Kuidas installida Ngx-Markdown oma nurgarakendusse

Markdowni failide kasutamiseks oma Angular-rakenduses peate installima paketi ngx-markdown.

1. Käivitage oma projekti juurkaustas terminalis järgmine käsk. Veenduge, et ngx-markdowni paketi versioon ühilduks teie Angular versiooniga.

   npm installida ngx-markdown@^10.1.1-- salvestada
   

2. Avage fail app.module.ts. See fail asub all projekt/src/app kausta.
3. Seadistage uus Markdowni moodul. Importige järgmised paketid:

   importida { Turvakontekst } alates '@nurk/tuum';
   importida { MarkdownModule } alates 'ngx-markdown'; 
   importida { HttpClientModule, HttpClient } alates '@angular/common/http'; 

4. Lisage impordi massiivile Markdowni moodul.

   import: [
    ...
    HttpClientModule, 
   MarkdownModule.ForRoot({ laadur: HttpClient, desinfitseerige: SecurityContext. MITTE MITTE }) 
   ], 

Kuidas luua allahindlusfaile

Iga Markdowni fail tähistab teie veebisaidi sisulehte. Peate looma Markdowni failide salvestamiseks kausta ja täitma oma Markdowni failid sisuga.

1. Navigeerige lehele varasid kaust, mis asub kausta all projekt/src kausta.
2. Looge uus kaust nimega postitusi.
3. Looge mitu Markdowni faili. Markdowni failid kasutavad laiendit .md.
4. Täitke .md-failid sisuga vormindatud Markdowni süntaksis. Siin on mõned näidissisu, mida saate kasutada:

   #### 03. juuni 2022
   # Maitsev šokolaadi retsept
   ___
   See on kuidas valmistada imelist šokolaadi-juustukooki:
   * Purusta küpsised, sega koos võid.
   * Las see seatud külmikusse 10 minutiks.
   * Sega veidi koort koos siirup.
   * Pane see küpsiste peale ja siis tagasi külmkappi.

Markdowni faili renderdamine komponendis

Peate kõik need failid rakenduse avalehel loetlema, et saaksite neile navigeerida.

1. Avatud kodu.komponent.html faili. See fail asub all projekt/src/app/home kausta.
2. Lisage linke oma uutele Markdowni lehtedele. Peaksite oma lingid looma Markdowni failide nimede järgi. Näiteks kui teil oli Markdowni fail nimega "Retsept.md", siis on lehe URL "/posts/post/Recipe".

   <div klass="lingid">
   <ruuterLink="/posts/post/ChocolateCheesecakeRecipe" stiil="veeris-alumine: 24 pikslit">Šokolaadi-juustukoogi retsept >></a>
   <br>
   <ruuterLink="/posts/post/StrawberryCheesecakeRecipe" stiil="veeris-alumine: 24 pikslit">Maasika-juustukoogi retsept
   >></a>
   <br>
   <ruuterLink="/posts/post/CaramelCheesecakeRecipe" stiil="veeris-alumine: 24 pikslit">Karamelli juustukoogi retsept >></a>
   </div>

3. Lisage linkidele veidi stiili:

   .lingid {
    polster: 72px;
    teksti joondamine: keskel;
   }

4. Looge teine ​​komponent, mida saate kasutada eraldi leheküljena. See leht peaks suutma renderdada mis tahes antud Markdowni faili. Käivitage terminalis järgmine ng genereerida käsk uue komponendi loomiseks:

   ng g c kodu/postitused

5. Nüüd peaks uues kaustas "postitused" olema loodud neli uut faili. See hõlmab "posts.component.html", "posts.component.css", "posts.component.ts" ja "posts.component.spec.ts".
6. Ava posts.component.html faili ja lisage Markdowni failide renderdamiseks HTML-kood.

   <div style="polsterdus: 100 pikslit" markdown [src]="postitus"></div>

7. Ava posts.component.ts faili. Lisage Marsruutimise import.

   importida { Aktiveeritud marsruut } alates '@angular/ruuter';

8. Markdowni failide renderdamiseks asendage konstruktor ja ngOnInit() funktsioonid TypeScripti koodiga. See võtab URL-i lingil oleva artikli nime ja suunab vastava Markdowni faili, mis on salvestatud varade kausta.

   postitus: string; 
   href: string; 
   konstruktor(eramarsruut: ActivatedRoute) { } 
   ngOnInit(): tühine {
   lase artikliNimi = see.route.snapshot.paramMap.get('artikkel'); 
   see.href = aken.location.href; 
    this.post = './assets/posts/' + artiklinimi + '.md'; 
   }

9. Ava app-routing.module.ts faili. See fail asub all projekt/src/app kausta.
10. Importige uus postituskomponent ja lisage see marsruutide massiivi.

    importida { PostsComponent } alates './home/posts/posts.component';
    konst marsruudid: Marsruudid = [
    // ...
     { tee: 'postitused/postitus/:artikkel', komponent: PostsComponent }, 
    ];

11. Nüüd saate rakenduse Angular uuesti käivitada.

    teenida 

12. Külastage http://localhost: 4200 või mis tahes aadress, mis teie saiti majutab.
13. Klõpsake ühel lehe lingil. Nüüd peaksite nägema Markdowni sisu renderdamist eraldi lehel.
14. Töönäite saate alla laadida saidilt GitHub projekti leht. Projekti allalaadimiseks ja käivitamiseks võite järgida faili README juhiseid.

Markdowni kasutamine oma nurgarakenduses

Markdowni failide kasutamine veebisaidil võimaldab teil keskenduda rohkem oma sisule. See võib olla ajaveebisaitide jaoks väga kasulik. Kui teil on rakendus Angular, saate oma veebilehtede jaoks kasutada Markdowni faile, kasutades paketti ngx-markdown node.

Saate lisateavet muude tehnoloogiate virnade kohta, mis võivad olla kasulikud ajaveebisaidi seadistamisel. Üks neist on Hugo, staatiline saidigeneraator, mis renderdab Markdowni faile ka veebilehtedena.