Føj sider til dit kantede websted ved hjælp af Markdown-filer

Markdown er et populært format til at skrive webindhold. Dets kompromis mellem HTML og almindeligt engelsk gør det muligt for forfattere at bruge en mere velkendt syntaks. Det kan i høj grad hjælpe med at lette den daglige drift af blogs med flere forfattere og lignende websteder.

Markdown kan være særligt nyttigt, hvis du gerne vil oprette en blog eller have flere websider med indhold. Ved at bruge Markdown-filer kan du fokusere mere på indholdet i stedet for koden omkring det pågældende indhold.

Du kan integrere Markdown med Angular ved at bruge ngx-markdown node-pakken og ved at konfigurere den til at virke inden for en komponent.

Opsætning af en vinkelapplikation

Hvis du ikke allerede har en Kantet applikation, kan du downloade denne prøve Angular-applikation fra GitHub.

1. På projektsiden på GitHub skal du klikke på Kode knap. Vælg Download ZIP.
instagram viewer
2. Pak mappen ud på din lokale computer.
3. Åbn projektet ved hjælp af en IDE, såsom Visual Code, Notepad++ eller Sublime Text. Hvis du bruger en IDE, kan du bruge en indbygget terminal til at udføre de nødvendige kommandoer.
4. Naviger til rodmappen for projektet ved hjælp af en terminal. Rodmappens navn er muo-sample-angular-app-main, og den indeholder e2e og src mapper. For eksempel, hvis dit projekt er i mappen "Downloads", skal du køre følgende kommando for at navigere til mappen.

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

5. Installer nodemoduler i projektet. Hvis du ikke kan køre nodekommandoer, skal du muligvis installere Node.js på din computer.

   npm installere

6. Du kan nu starte Angular-applikationen. Kør følgende kommando i projektets rodmapp.

   ng tjene

7. Efter at have kørt ng tjene kommando, vent på, at projektet er færdig med kompileringen. Når den er færdig, vil kommandolinjen udsende den lokale adresse, som din Angular-app vil køre på. Normalt er dette tændt http://localhost: 4200/.
8. Åbn en webbrowser og indtast den adresse, der hoster dit websted, f.eks. http://localhost: 4200/. Når siden er indlæst, bør du være i stand til at se startsiden for prøven af ​​vinkelapplikationen.

Sådan installeres Ngx-Markdown i din Angular-applikation

For at kunne bruge Markdown-filer i din Angular-applikation, skal du installere ngx-markdown-pakken.

1. Kør følgende kommando i terminalen i rodmappen på dit projekt. Sørg for, at ngx-markdown-pakkeversionen er kompatibel med din Angular-version.

   npm installere ngx-markdown@^10.1.1--Gemme
   

2. Åbn filen app.modul.ts. Denne fil er under projekt/src/app folder.
3. Konfigurer det nye Markdown-modul. Importer følgende pakker:

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

4. Tilføj Markdown-modulet til importarrayet.

   import: [
    ...
    HttpClientModule, 
   Markdown-modul.forRoot({ læsser: HttpClient, sanitize: SecurityContext. INGEN }) 
   ], 

Sådan opretter du dine Markdown-filer

Hver Markdown-fil repræsenterer en side med indhold til dit websted. Du skal oprette en mappe til at gemme dine Markdown-filer i og udfylde dine Markdown-filer med indhold.

1. Naviger til aktiver mappe, som er under projekt/src folder.
2. Opret en ny mappe kaldet indlæg.
3. Opret flere Markdown-filer. Markdown-filer bruger en .md-udvidelse.
4. Udfyld .md-filerne med noget indhold formateret i Markdown-syntaks. Her er nogle eksempler på indhold, du kan bruge:

   #### 3. juni 2022
   # Lækker chokoladeopskrift
   ___
   Dette er hvordan laver du en fantastisk chokoladecheesecake:
   * Knus kiksene, bland med smør.
   * Lad det sæt i køleskabet i 10 minutter.
   * Bland noget fløde med sirup.
   * Læg det ovenpå kiksene og sæt det tilbage i køleskabet.

Sådan gengiver du Markdown-filen i en komponent

Du skal angive hver af disse filer på applikationens startside, så du kan navigere til dem.

1. Åben home.component.html fil. Denne fil er under project/src/app/home folder.
2. Tilføj links til dine nye Markdown-sider. Du bør konstruere dine links i henhold til navnet på dine Markdown-filer. For eksempel, hvis du havde en Markdown-fil kaldet "Recipe.md", så vil sidens URL være "/posts/post/Recipe".

   <div klasse="links">
   <en routerLink="/posts/post/ChocolateCheesecakeRecipe" stil="margin-bund: 24px">Chokolade cheesecake opskrift >></en>
   <br>
   <en routerLink="/posts/post/StrawberryCheesecakeRecipe" stil="margin-bund: 24px">Jordbær cheesecake opskrift
   >></en>
   <br>
   <en routerLink="/posts/post/CaramelCheesecakeRecipe" stil="margin-bund: 24px">Karamel cheesecake opskrift >></en>
   </div>

3. Tilføj lidt styling til linkene:

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

4. Opret en anden komponent, som du kan bruge som en separat side. Denne side burde være i stand til at gengive enhver given Markdown-fil. Kør følgende i terminalen ng generere kommando for at oprette en ny komponent:

   ng g c hjem/indlæg

5. Der skulle nu være genereret fire nye filer i den nye "indlæg"-mappe. Dette inkluderer "posts.component.html", "posts.component.css", "posts.component.ts" og "posts.component.spec.ts".
6. Åbn posts.component.html fil, og tilføj HTML-koden for at gengive Markdown-filerne.

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

7. Åbn posts.component.ts fil. Tilføj Routing-importen.

   importere { Aktiveret rute } fra '@angular/router';

8. Erstat constructor- og ngOnInit()-funktionerne med TypeScript-koden for at gengive Markdown-filerne. Dette vil tage navnet på artiklen i url-linket og lede til den tilsvarende Markdown-fil, der er gemt i aktivmappen.

   post: streng; 
   href: streng; 
   konstruktør(privat rute: ActivatedRoute) { } 
   ngOnInit(): ugyldig {
   lade artikelnavn = dette.route.snapshot.paramMap.get('artikel'); 
   dette.href = vindue.location.href; 
    dette.indlæg = './assets/posts/' + artikelnavn + '.md'; 
   }

9. Åbn app-routing.modul.ts fil. Denne fil er under projekt/src/app folder.
10. Importer den nye post-komponent og føj den til ruter-arrayet.

    importere { PostsComponent } fra './home/posts/posts.component';
    konst ruter: Ruter = [
    // ...
     { sti: 'indlæg/indlæg/:artikel', komponent: PostsComponent }, 
    ];

11. Du kan nu starte Angular-applikationen igen.

    ng tjene 

12. Besøg http://localhost: 4200 eller hvilken adresse, der hoster dit websted.
13. Klik på et af sidens links. Du bør nu se Markdown-indholdet gengives på en separat side.
14. Du kan downloade et fungerende eksempel fra GitHub projektside. Du kan følge instruktionerne i README-filen for at downloade og køre projektet.

Brug af Markdown i din vinkelapplikation

Brug af Markdown-filer på dit websted giver dig mulighed for at fokusere mere på dit indhold. Dette kan være meget nyttigt til blogging-websteder. Hvis du har en Angular-applikation, kan du bruge Markdown-filer til dine websider ved at bruge ngx-markdown node-pakken.

Du kan lære mere om andre teknologiske stakke, der kan være nyttige til at oprette et bloggingwebsted. En af dem er Hugo, en statisk webstedsgenerator, der også gengiver Markdown-filer som websider.