Legg til sider til ditt vinkelnettsted ved å bruke Markdown-filer

Markdown er et populært format for å skrive nettinnhold. Kompromisset mellom HTML og vanlig engelsk lar forfattere bruke en mer kjent syntaks. Det kan i stor grad bidra til å lette den daglige driften av blogger med flere forfattere og lignende nettsteder.

Markdown kan være spesielt nyttig hvis du ønsker å lage en blogg eller ha flere nettsider med innhold. Ved å bruke Markdown-filer kan du fokusere mer på innholdet, i stedet for koden rundt det innholdet.

Du kan integrere Markdown med Angular ved å bruke ngx-markdown nodepakken, og ved å konfigurere den til å fungere innenfor en komponent.

Sette opp en vinkelapplikasjon

Hvis du ikke allerede har en Kantet applikasjon, kan du laste ned denne prøven Angular-applikasjonen fra GitHub.

1. På prosjektsiden på GitHub klikker du på Kode knapp. Å velge Last ned ZIP.
instagram viewer
2. Pakk ut mappen på din lokale datamaskin.
3. Åpne prosjektet ved hjelp av en IDE, for eksempel Visual Code, Notepad++ eller Sublime Text. Hvis du bruker en IDE, kan du bruke en innebygd terminal for å utføre nødvendige kommandoer.
4. Naviger til rotmappen til prosjektet ved hjelp av en terminal. Rotmappens navn er muo-sample-angular-app-main, og den inneholder e2e og src mapper. For eksempel, hvis prosjektet ditt er i mappen "Nedlastinger", kjør følgende kommando for å navigere til mappen.

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

5. Installer nodemoduler i prosjektet. Hvis du ikke kan kjøre nodekommandoer, må du kanskje installere Node.js på datamaskinen din.

   npm installere

6. Du kan nå starte Angular-applikasjonen. Kjør følgende kommando i rotmappen til prosjektet.

   ng tjene

7. Etter å ha kjørt ng tjene kommando, vent til prosjektet er ferdig kompilert. Når den er ferdig, vil kommandolinjen sende ut den lokale adressen som Angular-appen din vil kjøre på. Vanligvis er dette på http://localhost: 4200/.
8. Åpne en nettleser og skriv inn adressen som er vert for nettstedet ditt, for eksempel http://localhost: 4200/. Når siden er lastet inn, bør du kunne se hjemmesiden for prøven på vinkelapplikasjonen.

Slik installerer du Ngx-Markdown i Angular-applikasjonen din

For å kunne bruke Markdown-filer i Angular-applikasjonen din, må du installere ngx-markdown-pakken.

1. I rotmappen til prosjektet ditt, kjør følgende kommando i terminalen. Sørg for at ngx-markdown-pakkeversjonen er kompatibel med Angular-versjonen din.

   npm installere ngx-markdown@^10.1.1--lagre
   

2. Åpne filen app.modul.ts. Denne filen er under prosjekt/src/app mappe.
3. Konfigurer den nye Markdown-modulen. Importer følgende pakker:

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

4. Legg til Markdown-modulen i importmatrisen.

   importerer: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ laster: HttpClient, sanitize: SecurityContext. INGEN }) 
   ], 

Hvordan lage Markdown-filer

Hver Markdown-fil vil representere en side med innhold for nettstedet ditt. Du må opprette en mappe for å lagre Markdown-filene dine i og fylle Markdown-filene med innhold.

1. Naviger til eiendeler mappen, som er under prosjekt/src mappe.
2. Opprett en ny mappe kalt innlegg.
3. Lag flere Markdown-filer. Markdown-filer bruker en .md-utvidelse.
4. Fyll .md-filene med noe innhold formatert i Markdown-syntaks. Her er noe eksempelinnhold du kan bruke:

   #### 3. juni 2022
   # Deilig sjokoladeoppskrift
   ___
   Dette er hvordan du lager en fantastisk sjokoladeostkake:
   * Knus kjeksene, bland med smør.
   * La det sett i kjøleskapet i 10 minutter.
   * Bland litt krem med sirup.
   * Legg den oppå kjeksen og sett den tilbake i kjøleskapet.

Hvordan gjengi Markdown-filen i en komponent

Du må liste hver av disse filene på startsiden til applikasjonen, slik at du kan navigere til dem.

1. Åpen home.component.html fil. Denne filen er under prosjekt/src/app/home mappe.
2. Legg til linker til de nye Markdown-sidene dine. Du bør konstruere koblingene dine i henhold til navnet på Markdown-filene dine. Hvis du for eksempel hadde en Markdown-fil kalt "Recipe.md", vil sidens URL være "/posts/post/Recipe".

   <div klasse="lenker">
   <en ruterLink="/posts/post/ChocolateCheesecakeRecipe" stil="marg-bunn: 24px">Sjokolade ostekake oppskrift >></en>
   <br>
   <en ruterLink="/posts/post/StrawberryCheesecakeRecipe" stil="marg-bunn: 24px">Oppskrift på jordbærostkake
   >></en>
   <br>
   <en ruterLink="/posts/post/CaramelCheesecakeRecipe" stil="marg-bunn: 24px">Oppskrift på karamell ostekake >></en>
   </div>

3. Legg til litt styling på lenkene:

   .koblinger {
    polstring: 72px;
    tekst-align: center;
   }

4. Lag en annen komponent som du kan bruke som en egen side. Denne siden skal kunne gjengi en gitt Markdown-fil. Kjør følgende i terminalen ng generere kommando for å lage en ny komponent:

   ng g c hjem/innlegg

5. Det skal nå være fire nye filer generert inne i den nye "posts"-mappen. Dette inkluderer "posts.component.html", "posts.component.css", "posts.component.ts" og "posts.component.spec.ts".
6. Åpne posts.component.html fil, og legg til HTML-koden for å gjengi Markdown-filene.

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

7. Åpne posts.component.ts fil. Legg til Ruting-importen.

   import { Activated Route } fra '@angular/ruter';

8. Erstatt konstruktør- og ngOnInit()-funksjonene med TypeScript-koden for å gjengi Markdown-filene. Dette vil ta navnet på artikkelen i url-lenken og rute til den tilsvarende Markdown-filen som er lagret i eiendelermappen.

   innlegg: streng; 
   href: streng; 
   konstruktør(privat rute: ActivatedRoute) { } 
   ngOnInit(): tomrom {
   la artikkelnavn = dette.route.snapshot.paramMap.get('artikkel'); 
   dette.href = vindu.location.href; 
    dette.innlegg = './assets/posts/' + artikkelnavn + '.md'; 
   }

9. Åpne app-routing.module.ts fil. Denne filen er under prosjekt/src/app mappe.
10. Importer den nye postkomponenten og legg den til rutematrisen.

    import { PostsComponent } fra './home/posts/posts.component';
    konst ruter: Ruter = [
    // ...
     { bane: 'innlegg/innlegg/:artikkel', komponent: PostsComponent }, 
    ];

11. Du kan nå starte Angular-applikasjonen igjen.

    ng tjene 

12. Besøk http://localhost: 4200 eller hvilken adresse som er vert for nettstedet ditt.
13. Klikk på en av sidelenkene. Du bør nå se Markdown-innholdet gjengi på en egen side.
14. Du kan laste ned et fungerende eksempel fra GitHub prosjektsiden. Du kan følge instruksjonene i README-filen for å laste ned og kjøre prosjektet.

Bruke Markdown i Angular-applikasjonen din

Ved å bruke Markdown-filer på nettstedet ditt kan du fokusere mer på innholdet ditt. Dette kan være veldig nyttig for blogging nettsteder. Hvis du har en Angular-applikasjon, kan du bruke Markdown-filer for nettsidene dine ved å bruke ngx-markdown node-pakken.

Du kan lære mer om andre tekniske stabler som kan være nyttige for å sette opp et bloggnettsted. En av disse er Hugo, en statisk nettstedsgenerator som også gjengir Markdown-filer som nettsider.