Lägg till sidor på din kantiga webbplats med hjälp av Markdown-filer

Markdown är ett populärt format för att skriva webbinnehåll. Dess kompromiss mellan HTML och vanlig engelska tillåter författare att använda en mer bekant syntax. Det kan avsevärt underlätta den dagliga driften av bloggar med flera författare och liknande webbplatser.

Markdown kan vara särskilt användbart om du vill skapa en blogg eller ha flera webbsidor med innehåll. Genom att använda Markdown-filer kan du fokusera mer på innehållet, snarare än koden runt det innehållet.

Du kan integrera Markdown med Angular med hjälp av nodpaketet ngx-markdown och genom att konfigurera det för att fungera inom en komponent.

Konfigurera en vinkelapplikation

Om du inte redan har en Vinkelapplikation, kan du ladda ner detta exempel på Angular-applikationen från GitHub.

1. På projektsidan på GitHub klickar du på Koda knapp. Välj Ladda ner ZIP.
instagram viewer
2. Packa upp mappen på din lokala dator.
3. Öppna projektet med en IDE, som Visual Code, Notepad++ eller Sublime Text. Om du använder en IDE kan du använda en inbyggd terminal för att utföra alla nödvändiga kommandon.
4. Navigera till projektets rotmapp med en terminal. Rotmappens namn är muo-sample-angular-app-main, och den innehåller e2e och src mappar. Till exempel, om ditt projekt finns i mappen "Nedladdningar", kör följande kommando för att navigera till mappen.

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

5. Installera nodmoduler i projektet. Om du inte kan köra nodkommandon kan du behöva installera Node.js till din dator.

   npm Installera

6. Du kan nu starta Angular-applikationen. Kör följande kommando i projektets rotmapp.

   ng tjäna

7. Efter att ha kört ng tjäna kommando, vänta tills projektet är färdigt kompilerat. När den är klar kommer kommandoraden att mata ut den lokala adressen som din Angular-app kommer att köras på. Vanligtvis är detta på http://localhost: 4200/.
8. Öppna en webbläsare och ange adressen som är värd för din webbplats, till exempel, http://localhost: 4200/. När sidan har laddats bör du kunna se startsidan för provet vinkelapplikation.

Hur man installerar Ngx-Markdown i din Angular-applikation

För att kunna använda Markdown-filer i din Angular-applikation måste du installera paketet ngx-markdown.

1. I rotmappen för ditt projekt, kör följande kommando i terminalen. Se till att ngx-markdown-paketversionen är kompatibel med din Angular-version.

   npm Installera ngx-markdown@^10.1.1--spara
   

2. Öppna filen app.modul.ts. Den här filen finns under projekt/src/app mapp.
3. Konfigurera den nya Markdown-modulen. Importera följande paket:

   importera { SecurityContext } från '@angular/kärna';
   importera { MarkdownModule } från 'ngx-markdown'; 
   importera { HttpClientModule, HttpClient } från '@angular/common/http'; 

4. Lägg till Markdown-modulen i importmatrisen.

   importer: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ lastare: HttpClient, sanera: SecurityContext. INGEN }) 
   ], 

Hur du skapar dina Markdown-filer

Varje Markdown-fil kommer att representera en sida med innehåll för din webbplats. Du måste skapa en mapp för att lagra dina Markdown-filer i och fylla dina Markdown-filer med innehåll.

1. Navigera till tillgångar mapp, som finns under projekt/src mapp.
2. Skapa en ny mapp som heter inlägg.
3. Skapa flera Markdown-filer. Markdown-filer använder filtillägget .md.
4. Fyll .md-filerna med visst innehåll formaterad i Markdown-syntax. Här är exempel på innehåll som du kan använda:

   #### 3 juni 2022
   # Läckert chokladrecept
   ___
   Detta är hur du gör en fantastisk Choklad Cheesecake:
   * Krossa kexen, blanda med Smör.
   * Låt det uppsättning i kylen i 10 minuter.
   * Blanda lite grädde med sirap.
   * Lägg den ovanpå kexen och ställ sedan tillbaka den i kylen.

Hur man renderar Markdown-filen i en komponent

Du måste lista var och en av dessa filer på applikationens hemsida, så att du kan navigera till dem.

1. Öppna home.component.html fil. Den här filen finns under project/src/app/home mapp.
2. Lägg till länkar till dina nya Markdown-sidor. Du bör konstruera dina länkar enligt namnet på dina Markdown-filer. Om du till exempel hade en Markdown-fil som heter "Recipe.md", kommer sidans URL att vara "/posts/post/Recipe".

   <div klass="länkar">
   <en routerLink="/posts/post/ChocolateCheesecakeRecipe" stil="marginal-botten: 24px">Choklad Cheesecake Recept >></a>
   <br>
   <en routerLink="/posts/post/StrawberryCheesecakeRecipe" stil="marginal-botten: 24px">Recept för jordgubbscheesecake
   >></a>
   <br>
   <en routerLink="/posts/post/CaramelCheesecakeRecipe" stil="marginal-botten: 24px">Caramel Cheesecake Recept >></a>
   </div>

3. Lägg till lite styling på länkarna:

   .länkar {
    stoppning: 72px;
    text-align: center;
   }

4. Skapa ytterligare en komponent som du kan använda som en separat sida. Den här sidan bör kunna rendera vilken Markdown-fil som helst. Kör följande i terminalen ng generera kommando för att skapa en ny komponent:

   ng g c hem/inlägg

5. Det bör nu finnas fyra nya filer genererade i den nya mappen "posts". Detta inkluderar "posts.component.html", "posts.component.css", "posts.component.ts" och "posts.component.spec.ts".
6. Öppna posts.component.html fil och lägg till HTML-koden för att återge Markdown-filerna.

   <div stil="stoppning: 100px" markdown [src]="posta"></div>

7. Öppna posts.component.ts fil. Lägg till routingimporten.

   importera { ActivatedRoute } från '@angular/router';

8. Ersätt konstruktorn och ngOnInit()-funktionerna med TypeScript-koden för att rendera Markdown-filerna. Detta tar namnet på artikeln i url-länken och leder till motsvarande Markdown-fil som lagras i tillgångsmappen.

   post: sträng; 
   href: sträng; 
   konstruktör(privat rutt: ActivatedRoute) { } 
   ngOnInit(): tomhet {
   låta artikelnamn = detta.route.snapshot.paramMap.get('artikel'); 
   detta.href = fönster.location.href; 
    detta.inlägg = './assets/posts/' + artikelnamn + '.md'; 
   }

9. Öppna app-routing.module.ts fil. Den här filen finns under projekt/src/app mapp.
10. Importera den nya postkomponenten och lägg till den i ruttmatrisen.

    importera { PostsComponent } från './home/posts/posts.component';
    konst rutter: Rutter = [
    // ...
     { sökväg: 'inlägg/inlägg/:artikel', komponent: PostsComponent }, 
    ];

11. Du kan nu starta Angular-applikationen igen.

    ng tjäna 

12. Besök http://localhost: 4200 eller vilken adress som är värd för din webbplats.
13. Klicka på en av sidlänkarna. Du bör nu se Markdown-innehållet på en separat sida.
14. Du kan ladda ner ett fungerande exempel från GitHub projektsida. Du kan följa instruktionerna i README-filen för att ladda ner och köra projektet.

Använda Markdown i din vinkelapplikation

Genom att använda Markdown-filer på din webbplats kan du fokusera mer på ditt innehåll. Detta kan vara mycket användbart för bloggande webbplatser. Om du har en Angular-applikation kan du använda Markdown-filer för dina webbsidor genom att använda nodpaketet ngx-markdown.

Du kan lära dig mer om andra tekniska stackar som kan vara användbara för att skapa en bloggwebbplats. En av dessa är Hugo, en statisk webbplatsgenerator som också återger Markdown-filer som webbsidor.