Aggiungi pagine al tuo sito Web Angular utilizzando i file Markdown

Markdown è un formato popolare per la scrittura di contenuti web. Il suo compromesso tra HTML e inglese semplice consente agli scrittori di utilizzare una sintassi più familiare. Può aiutare notevolmente a semplificare la gestione quotidiana di blog con più autori e siti simili.

Markdown può essere particolarmente utile se desideri creare un blog o avere più pagine Web con contenuti. L'uso dei file Markdown ti consente di concentrarti maggiormente sul contenuto, piuttosto che sul codice attorno a quel contenuto.

Puoi integrare Markdown con Angular usando il pacchetto del nodo ngx-markdown e configurandolo per funzionare all'interno di un componente.

Configurazione di un'applicazione angolare

Se non hai già un Applicazione angolare, puoi scaricare questa applicazione Angular di esempio da GitHub.

1. Nella pagina del progetto su GitHub, fai clic su Codice pulsante. Selezionare Scarica ZIP.
2. Decomprimi la cartella sul tuo computer locale.
3. Apri il progetto usando un IDE, come Visual Code, Notepad++ o Sublime Text. Se stai usando un IDE, puoi usare un terminale integrato per eseguire tutti i comandi necessari.
4. Passare alla cartella principale del progetto utilizzando un terminale. Il nome della cartella principale è muo-sample-angular-app-main, e contiene il e2e e src cartelle. Ad esempio, se il tuo progetto si trova nella cartella "Download", esegui il comando seguente per accedere alla cartella.

   CD C:\Utenti\Sharl\Download\muo-sample-angular-app-main

5. Installa i moduli del nodo nel progetto. Se non è possibile eseguire i comandi del nodo, potrebbe essere necessario eseguire l'installazione Node.js sul tuo computer.

   npm installare

6. Ora puoi avviare l'applicazione Angular. Eseguire il comando seguente nella cartella principale del progetto.

   ng servire

7. Dopo aver eseguito il ng servire comando, attendere il completamento della compilazione del progetto. Al termine, la riga di comando visualizzerà l'indirizzo locale su cui verrà eseguita l'app Angular. Di solito, questo è attivo http://localhost: 4200/.
8. Apri un browser web e inserisci l'indirizzo che ospita il tuo sito, ad esempio, http://localhost: 4200/. Una volta caricata la pagina, dovresti essere in grado di vedere la home page dell'applicazione angolare di esempio.

Come installare Ngx-Markdown nella tua applicazione angolare

Per poter utilizzare i file Markdown nella tua applicazione Angular, dovrai installare il pacchetto ngx-markdown.

1. Nella cartella principale del tuo progetto, esegui il seguente comando nel terminale. Assicurati che la versione del pacchetto ngx-markdown sia compatibile con la tua versione Angular.

   npm installare ngx-markdown@^10.1.1--Salva
   

2. Apri il file app.module.ts. Questo file è sotto il progetto/sorgente/app cartella.
3. Configura il nuovo modulo Markdown. Importa i seguenti pacchetti:

   importare {SicurezzaContext} da '@angular/core';
   importare {Modulo Markdown} da 'ngx-markdown'; 
   importare { HttpClientModule, HttpClient } da '@angular/common/http'; 

4. Aggiungi il modulo Markdown all'array di importazione.

   importazioni: [
    ...
    HttpClientModule, 
   Modulo Markdown.per Root({ caricatore: HttpClient, sanifica: SecurityContext. NESSUNO }) 
   ], 

Come creare i tuoi file Markdown

Ogni file Markdown rappresenterà una pagina di contenuto per il tuo sito web. Dovrai creare una cartella in cui archiviare i tuoi file Markdown e popolare i tuoi file Markdown con il contenuto.

1. Passa a risorse cartella, che si trova sotto il progetto/sorgente cartella.
2. Crea una nuova cartella chiamata messaggi.
3. Crea più file Markdown. I file Markdown utilizzano un'estensione .md.
4. Popola i file .md con alcuni contenuti formattato nella sintassi Markdown. Ecco alcuni contenuti di esempio che puoi utilizzare:

   #### 03 giugno 2022
   # Deliziosa ricetta al cioccolato
   ___
   Questo è come si fa una fantastica cheesecake al cioccolato:
   * Schiacciare i biscotti, mescolare insieme a Burro.
   * Lasciarlo - Lascialo impostare in frigo per 10 minuti.
   * Mescolare un po' di panna insieme a sciroppo.
   * Adagiatela sopra i biscotti e poi riponetela in frigorifero.

Come eseguire il rendering del file Markdown in un componente

Dovrai elencare ciascuno di questi file nella home page dell'applicazione, in modo da poterli navigare.

1. Aprire home.component.html file. Questo file è sotto il progetto/sorgente/app/casa cartella.
2. Aggiungi link alle tue nuove pagine Markdown. Dovresti costruire i tuoi collegamenti in base al nome dei tuoi file Markdown. Ad esempio, se avevi un file Markdown chiamato "Recipe.md", l'URL della pagina sarà "/posts/post/Recipe".

   <classe div="collegamenti">
   <un routerLink="/posts/post/ChocolateCheesecakeRecipe" stile="margine inferiore: 24px">Ricetta Cheesecake al cioccolato >></un>
   <fr>
   <un routerLink="/posts/post/StrawberryCheesecakeRecipe" stile="margine inferiore: 24px">Ricetta Cheesecake alle fragole
   >></un>
   <fr>
   <un routerLink="/posts/post/CaramelCheesecakeRecipe" stile="margine inferiore: 24px">Ricetta Cheesecake al caramello >></un>
   </div>

3. Aggiungi un po' di stile ai link:

   .link {
    imbottitura: 72px;
    allineamento testo: centro;
   }

4. Crea un altro componente che puoi utilizzare come pagina separata. Questa pagina dovrebbe essere in grado di eseguire il rendering di qualsiasi dato file Markdown. Nel terminale, esegui quanto segue ng generare comando per creare un nuovo componente:

   ng g c home/post

5. Ora dovrebbero esserci quattro nuovi file generati all'interno della nuova cartella "post". Ciò include "posts.component.html", "posts.component.css", "posts.component.ts" e "posts.component.spec.ts".
6. Apri il post.component.html file e aggiungi il codice HTML per eseguire il rendering dei file Markdown.

   <stile div="imbottitura: 100px" ribasso [src]="inviare"></div>

7. Apri il post.component.ts file. Aggiungi l'importazione di instradamento.

   importare { Percorso Attivato } da '@angolare/router';

8. Sostituire le funzioni costruttore e ngOnInit() con il codice TypeScript per eseguire il rendering dei file Markdown. Questo prenderà il nome dell'articolo nel collegamento URL e indirizzerà al file Markdown corrispondente memorizzato nella cartella delle risorse.

   messaggio: stringa; 
   href: stringa; 
   costruttore(percorso privato: ActivatedRoute) { } 
   ngOnInit(): vuoto {
   permettere nome articolo = questo.route.snapshot.paramMap.get('articolo'); 
   questo.href = finestra.posizione.href; 
    questo.post = './asset/post/' + nome articolo + '.md'; 
   }

9. Apri il app-routing.module.ts file. Questo file è sotto il progetto/sorgente/app cartella.
10. Importa il nuovo componente post e aggiungilo all'array dei percorsi.

    importare {PostComponente} da './home/posts/posts.component';
    cost percorsi: Itinerari = [
    // ...
     { sentiero: 'post/post/:articolo', componente: PostsComponent }, 
    ];

11. Ora puoi avviare nuovamente l'applicazione Angular.

    ng servire 

12. Visitare http://localhost: 4200 o qualsiasi indirizzo ospita il tuo sito.
13. Fare clic su uno dei collegamenti della pagina. Ora dovresti vedere il rendering del contenuto di Markdown su una pagina separata.
14. Puoi scaricare un esempio funzionante da GitHub pagina del progetto. È possibile seguire le istruzioni nel file README per scaricare ed eseguire il progetto.

Utilizzo di Markdown nella tua applicazione angolare

L'utilizzo dei file Markdown sul tuo sito Web ti consente di concentrarti maggiormente sui tuoi contenuti. Questo può essere molto utile per i siti di blogging. Se disponi di un'applicazione Angular, puoi utilizzare i file Markdown per le tue pagine Web utilizzando il pacchetto del nodo ngx-markdown.

Puoi saperne di più su altri stack tecnologici che possono essere utili per la creazione di un sito Web di blog. Uno di questi è Hugo, un generatore di siti statici che rende anche i file Markdown come pagine web.