Fügen Sie Ihrer Angular-Website mithilfe von Markdown-Dateien Seiten hinzu

Markdown ist ein beliebtes Format zum Schreiben von Webinhalten. Sein Kompromiss zwischen HTML und einfachem Englisch ermöglicht es Autoren, eine vertrautere Syntax zu verwenden. Es kann den täglichen Betrieb von Blogs mit mehreren Autoren und ähnlichen Websites erheblich erleichtern.

Markdown kann besonders nützlich sein, wenn Sie einen Blog erstellen oder mehrere Webseiten mit Inhalten haben möchten. Durch die Verwendung von Markdown-Dateien können Sie sich mehr auf den Inhalt konzentrieren als auf den Code um diesen Inhalt herum.

Sie können Markdown mit Angular integrieren, indem Sie das Node-Paket ngx-markdown verwenden und es so konfigurieren, dass es innerhalb einer Komponente funktioniert.

Einrichten einer Angular-Anwendung

Falls Sie noch keine haben Eckige Anwendung, können Sie diese Angular-Beispielanwendung von herunterladen GitHub.

1. Klicken Sie auf der Projektseite auf GitHub auf die Code Taste. Auswählen ZIP herunterladen.
2. Entpacken Sie den Ordner auf Ihrem lokalen Computer.
3. Öffnen Sie das Projekt mit einer IDE wie Visual Code, Notepad++ oder Sublime Text. Wenn Sie eine IDE verwenden, können Sie ein integriertes Terminal verwenden, um alle erforderlichen Befehle auszuführen.
4. Navigieren Sie mit einem Terminal zum Stammordner des Projekts. Der Name des Stammordners lautet muo-sample-angular-app-main, und es enthält die e2e und Quelle Ordner. Wenn sich Ihr Projekt beispielsweise im Ordner „Downloads“ befindet, führen Sie den folgenden Befehl aus, um zu dem Ordner zu navigieren.

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

5. Installieren Sie Knotenmodule im Projekt. Wenn Sie Knotenbefehle nicht ausführen können, müssen Sie möglicherweise installieren Node.js auf Ihren Computer.

   npm Installieren

6. Sie können jetzt die Angular-Anwendung starten. Führen Sie den folgenden Befehl im Stammordner des Projekts aus.

   ng dienen

7. Nach dem Ausführen der ng dienen Befehl, warten Sie, bis das Projekt fertig kompiliert ist. Sobald es fertig ist, gibt die Befehlszeile die lokale Adresse aus, auf der Ihre Angular-App ausgeführt wird. Normalerweise ist dies eingeschaltet http://localhost: 4200/.
8. Öffnen Sie einen Webbrowser und geben Sie die Adresse ein, die Ihre Website hostet, z. B. http://localhost: 4200/. Nachdem die Seite geladen wurde, sollten Sie die Homepage für die Winkelanwendung des Beispiels sehen können.

So installieren Sie Ngx-Markdown in Ihrer Angular-Anwendung

Um Markdown-Dateien in Ihrer Angular-Anwendung verwenden zu können, müssen Sie das Paket ngx-markdown installieren.

1. Führen Sie im Stammordner Ihres Projekts den folgenden Befehl im Terminal aus. Stellen Sie sicher, dass die ngx-Markdown-Paketversion mit Ihrer Angular-Version kompatibel ist.

   npm Installieren ngx-Markdown@^10.1.1--sparen
   

2. Öffne die Datei app.module.ts. Diese Datei befindet sich unter der Projekt/Quelle/App Mappe.
3. Konfigurieren Sie das neue Markdown-Modul. Importieren Sie die folgenden Pakete:

   importieren { Sicherheitskontext } aus '@eckig/Kern';
   importieren { MarkdownModul } aus 'ngx-Markdown'; 
   importieren { HttpClientModul, HttpClient } aus '@eckig/gemeinsam/http'; 

4. Fügen Sie das Markdown-Modul zum imports-Array hinzu.

   Importe: [
    ...
    HttpClientModule, 
   MarkdownModul.fürRoot({ Lader: HttpClient, bereinigen: SecurityContext. KEINER }) 
   ], 

So erstellen Sie Ihre Markdown-Dateien

Jede Markdown-Datei stellt eine Inhaltsseite für Ihre Website dar. Sie müssen einen Ordner erstellen, um Ihre Markdown-Dateien zu speichern und Ihre Markdown-Dateien mit Inhalten zu füllen.

1. Navigieren Sie zu Vermögenswerte Ordner, der sich unter dem befindet Projekt/Quelle Mappe.
2. Erstellen Sie einen neuen Ordner mit dem Namen Beiträge.
3. Erstellen Sie mehrere Markdown-Dateien. Markdown-Dateien haben die Erweiterung .md.
4. Füllen Sie die .md-Dateien mit etwas Inhalt in Markdown-Syntax formatiert. Hier sind einige Beispielinhalte, die Sie verwenden können:

   #### 03. Juni 2022
   # Köstliches Schokoladenrezept
   ___
   Dies ist So machst du einen tollen Schokoladen-Käsekuchen:
   * Kekse zerbröseln, mischen mit Butter.
   * Lass es einstellen 10 Minuten in den Kühlschrank.
   * Mischen Sie etwas Sahne mit Sirup.
   * Legen Sie es auf die Kekse und legen Sie es wieder in den Kühlschrank.

So rendern Sie die Markdown-Datei in einer Komponente

Sie müssen jede dieser Dateien auf der Homepage der Anwendung auflisten, damit Sie zu ihnen navigieren können.

1. Offen home.component.html Datei. Diese Datei befindet sich unter der project/src/app/home Mappe.
2. Fügen Sie Links zu Ihren neuen Markdown-Seiten hinzu. Sie sollten Ihre Links nach dem Namen Ihrer Markdown-Dateien aufbauen. Wenn Sie beispielsweise eine Markdown-Datei mit dem Namen „Rezept.md“ hatten, lautet die URL der Seite „/posts/post/Rezept“.

   <div-Klasse="Verknüpfungen">
   <ein routerLink="/posts/post/ChocolateCheesecakeRecipe" Stil="Rand unten: 24px">Rezept für Schokoladen-Käsekuchen >></a>
   <Br>
   <ein routerLink="/posts/post/StrawberryCheesecakeRecipe" Stil="Rand unten: 24px">Erdbeer-Käsekuchen-Rezept
   >></a>
   <Br>
   <ein routerLink="/posts/post/CaramelCheesecakeRecipe" Stil="Rand unten: 24px">Rezept für Karamell-Käsekuchen >></a>
   </div>

3. Fügen Sie den Links ein gewisses Styling hinzu:

   .links {
    Polsterung: 72px;
    Textausrichtung: Mitte;
   }

4. Erstellen Sie eine weitere Komponente, die Sie als separate Seite verwenden können. Diese Seite sollte in der Lage sein, jede beliebige Markdown-Datei zu rendern. Führen Sie im Terminal Folgendes aus ng erzeugen Befehl zum Erstellen einer neuen Komponente:

   ng g c home/posts

5. Es sollten jetzt vier neue Dateien im neuen Ordner "posts" generiert werden. Dazu gehören „posts.component.html“, „posts.component.css“, „posts.component.ts“ und „posts.component.spec.ts“.
6. Öffne das posts.komponente.html -Datei und fügen Sie den HTML-Code zum Rendern der Markdown-Dateien hinzu.

   <div-Stil="Polsterung: 100px" Markdown [Quelle]="Post"></div>

7. Öffne das posts.component.ts Datei. Fügen Sie den Routing-Import hinzu.

   importieren {AktivierteRoute} aus '@angular/router';

8. Ersetzen Sie die Konstruktor- und ngOnInit()-Funktionen durch den TypeScript-Code, um die Markdown-Dateien zu rendern. Dadurch wird der Name des Artikels im URL-Link übernommen und an die entsprechende Markdown-Datei weitergeleitet, die im Assets-Ordner gespeichert ist.

   Beitrag: Zeichenkette; 
   href: Zeichenkette; 
   Konstrukteur(private Route: ActivatedRoute) { } 
   ngOnInit(): Leere {
   Lassen Artikelname = Dies.route.snapshot.paramMap.get('article'); 
   Dies.href = Fenster.location.href; 
    dieser.post = './assets/posts/' + Artikelname + '.md'; 
   }

9. Öffne das app-routing.module.ts Datei. Diese Datei befindet sich unter der Projekt/Quelle/App Mappe.
10. Importieren Sie die neue Pfostenkomponente und fügen Sie sie dem Routen-Array hinzu.

    importieren { Beitragskomponente } aus './home/posts/posts.component';
    konst Routen: Routen = [
    // ...
     { Weg: 'Beiträge/Beitrag/:Artikel', Komponente: PostsComponent }, 
    ];

11. Sie können die Angular-Anwendung jetzt erneut starten.

    ng dienen 

12. Besuch http://localhost: 4200 oder welche Adresse auch immer Ihre Website hostet.
13. Klicken Sie auf einen der Seitenlinks. Der Markdown-Inhalt sollte jetzt auf einer separaten Seite gerendert werden.
14. Sie können ein funktionierendes Beispiel von herunterladen GitHub Projektseite. Sie können den Anweisungen in der README-Datei folgen, um das Projekt herunterzuladen und auszuführen.

Verwenden von Markdown in Ihrer Angular-Anwendung

Durch die Verwendung von Markdown-Dateien auf Ihrer Website können Sie sich mehr auf Ihre Inhalte konzentrieren. Dies kann für Blogging-Websites sehr nützlich sein. Wenn Sie eine Angular-Anwendung haben, können Sie Markdown-Dateien für Ihre Webseiten verwenden, indem Sie das Node-Paket ngx-markdown verwenden.

Sie können mehr über andere Tech-Stacks erfahren, die für die Einrichtung einer Blogging-Website nützlich sein können. Einer davon ist Hugo, ein statischer Site-Generator, der auch Markdown-Dateien als Webseiten rendert.