Voeg pagina's toe aan uw Angular-website met behulp van Markdown-bestanden

Markdown is een populair formaat voor het schrijven van webinhoud. Het compromis tussen HTML en gewoon Engels stelt schrijvers in staat een meer bekende syntaxis te gebruiken. Het kan het dagelijkse beheer van blogs met meerdere auteurs en vergelijkbare sites aanzienlijk vergemakkelijken.

Markdown kan met name handig zijn als u een blog wilt maken of meerdere webpagina's met inhoud wilt hebben. Door Markdown-bestanden te gebruiken, kunt u zich meer op de inhoud concentreren in plaats van op de code rond die inhoud.

U kunt Markdown integreren met Angular met behulp van het ngx-markdown node-pakket en door het te configureren om binnen een component te werken.

Een hoekapplicatie instellen

Als u nog geen Hoekige toepassing, kunt u dit voorbeeld van een Angular-toepassing downloaden van GitHub.

1. Klik op de projectpagina op GitHub op de Code knop. Selecteer ZIP downloaden.
2. Pak de map uit op uw lokale computer.
3. Open het project met een IDE, zoals Visual Code, Notepad++ of Sublime Text. Als u een IDE gebruikt, kunt u een ingebouwde terminal gebruiken om de nodige opdrachten uit te voeren.
4. Navigeer met een terminal naar de hoofdmap van het project. De naam van de hoofdmap is muo-sample-angular-app-main, en het bevat de e2e en src mappen. Als uw project zich bijvoorbeeld in de map "Downloads" bevindt, voert u de volgende opdracht uit om naar de map te navigeren.

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

5. Installeer knooppuntmodules in het project. Als u geen node-commando's kunt uitvoeren, moet u mogelijk installeren Node.js op uw computer.

   npm installeren

6. U kunt nu de Angular-toepassing starten. Voer de volgende opdracht uit in de hoofdmap van het project.

   ng serveren

7. Na het uitvoeren van de ng serveren commando, wacht tot het project klaar is met compileren. Als het klaar is, geeft de opdrachtregel het lokale adres weer waarop uw Angular-app wordt uitgevoerd. Meestal is dit aan http://localhost: 4200/.
8. Open een webbrowser en voer het adres in waarop uw site wordt gehost, bijvoorbeeld http://localhost: 4200/. Nadat de pagina is geladen, zou u de startpagina voor de voorbeeldhoektoepassing moeten kunnen zien.

Hoe u Ngx-Markdown in uw Angular-toepassing installeert

Om Markdown-bestanden in uw Angular-toepassing te kunnen gebruiken, moet u het ngx-markdown-pakket installeren.

1. Voer in de hoofdmap van uw project de volgende opdracht uit in de terminal. Zorg ervoor dat de ngx-markdown-pakketversie compatibel is met uw Angular-versie.

   npm installeren ngx-markdown@^10.1.1--opslaan
   

2. Open het bestand app.module.ts. Dit bestand staat onder de project/src/app map.
3. Configureer de nieuwe Markdown-module. Importeer de volgende pakketten:

   importeren { Beveiligingscontext } van '@hoekig/kern';
   importeren { MarkdownModule } van 'ngx-markdown'; 
   importeren { HttpClientModule, HttpClient} van '@hoekig/common/http'; 

4. Voeg de Markdown-module toe aan de importarray.

   invoer: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ lader: HttpClient, ontsmet: SecurityContext. GEEN }) 
   ], 

Hoe u uw Markdown-bestanden kunt maken

Elk Markdown-bestand vertegenwoordigt een pagina met inhoud voor uw website. U moet een map maken om uw Markdown-bestanden in op te slaan en uw Markdown-bestanden vullen met inhoud.

1. Navigeer naar de middelen map, die zich onder de project/src map.
2. Maak een nieuwe map met de naam berichten.
3. Maak meerdere Markdown-bestanden. Markdown-bestanden gebruiken de extensie .md.
4. Vul de .md-bestanden met wat inhoud geformatteerd in Markdown-syntaxis. Hier is wat voorbeeldinhoud die u kunt gebruiken:

   #### 03 juni 2022
   # Heerlijk Chocolade Recept
   ___
   Deze is hoe je een geweldige chocolade cheesecake maakt:
   * Verkruimel de koekjes, meng met boter.
   * Laat het set 10 minuten in de koelkast.
   * Mix wat room met siroop.
   * Leg het op de koekjes en zet het terug in de koelkast.

Hoe het Markdown-bestand in een component te renderen

U moet elk van deze bestanden op de startpagina van de toepassing vermelden, zodat u ernaartoe kunt navigeren.

1. Open home.component.html het dossier. Dit bestand staat onder de project/src/app/home map.
2. Voeg links toe aan uw nieuwe Markdown-pagina's. U moet uw links samenstellen volgens de naam van uw Markdown-bestanden. Als u bijvoorbeeld een Markdown-bestand had met de naam "Recept.md", dan is de URL van de pagina "/posts/post/Recept".

   <div klasse="links">
   <een routerLink="/posts/post/ChocolateCheesecakeRecipe" stijl="marge-onder: 24px">Chocolade Cheesecake Recept >></a>
   <br>
   <een routerLink="/posts/post/StrawberryCheesecakeRecipe" stijl="marge-onder: 24px">Aardbeien Cheesecake Recept
   >></a>
   <br>
   <een routerLink="/posts/post/CaramelCheesecakeRecipe" stijl="marge-onder: 24px">Karamel Cheesecake Recept >></a>
   </div>

3. Voeg wat styling toe aan de links:

   .links {
    opvulling: 72px;
    tekst uitlijnen: midden;
   }

4. Maak nog een component die je als aparte pagina kunt gebruiken. Deze pagina zou elk willekeurig Markdown-bestand moeten kunnen weergeven. Voer in de terminal het volgende uit: ng genereren commando om een ​​nieuwe component te maken:

   ng g c home/posts

5. Er zouden nu vier nieuwe bestanden moeten worden gegenereerd in de nieuwe map "posts". Dit omvat "posts.component.html", "posts.component.css", "posts.component.ts" en "posts.component.spec.ts".
6. Open de posts.component.html bestand en voeg de HTML-code toe om de Markdown-bestanden weer te geven.

   <div stijl="opvulling: 100px" markdown [src]="na"></div>

7. Open de posts.component.ts het dossier. Voeg de Routing-import toe.

   importeren { Geactiveerde Route } van '@hoekig/router';

8. Vervang de constructor- en ngOnInit()-functies door de TypeScript-code om de Markdown-bestanden weer te geven. Dit neemt de naam van het artikel in de url-link en leidt naar het corresponderende Markdown-bestand dat is opgeslagen in de activamap.

   bericht: tekenreeks; 
   href: tekenreeks; 
   constructeur(privéroute: ActivatedRoute) { } 
   ngOnInit(): leegte {
   laten artikelnaam = deze.route.snapshot.paramMap.get('artikel'); 
   deze.href = venster.locatie.href; 
    deze.post = './activa/posten/' + artikelnaam + '.md'; 
   }

9. Open de app-routing.module.ts het dossier. Dit bestand staat onder de project/src/app map.
10. Importeer de nieuwe post-component en voeg deze toe aan de routes-array.

    importeren { BerichtenComponent } van './home/posts/posts.component';
    const routes: routes = [
    // ...
     { pad: 'berichten/post/:artikel', component: PostsComponent }, 
    ];

11. U kunt nu de Angular-toepassing opnieuw starten.

    ng serveren 

12. Op bezoek komen http://localhost: 4200 of welk adres dan ook uw site host.
13. Klik op een van de paginalinks. U zou nu de weergave van de Markdown-inhoud op een aparte pagina moeten zien.
14. U kunt een werkend voorbeeld downloaden van de GitHub projectpagina. U kunt de instructies in het README-bestand volgen om het project te downloaden en uit te voeren.

Markdown gebruiken in uw hoekige toepassing

Door Markdown-bestanden op uw website te gebruiken, kunt u zich meer op uw inhoud concentreren. Dit kan erg handig zijn voor blogwebsites. Als u een Angular-toepassing hebt, kunt u Markdown-bestanden voor uw webpagina's gebruiken met behulp van het ngx-markdown node-pakket.

U kunt meer te weten komen over andere technische stapels die handig kunnen zijn voor het opzetten van een blogwebsite. Een daarvan is Hugo, een statische sitegenerator die Markdown-bestanden ook als webpagina's weergeeft.