Προσθέστε σελίδες στον γωνιακό ιστότοπό σας χρησιμοποιώντας αρχεία Markdown

Το Markdown είναι μια δημοφιλής μορφή για τη σύνταξη περιεχομένου ιστού. Ο συμβιβασμός του μεταξύ HTML και απλά Αγγλικά επιτρέπει στους συγγραφείς να χρησιμοποιούν μια πιο οικεία σύνταξη. Μπορεί να βοηθήσει πολύ στη διευκόλυνση της καθημερινής λειτουργίας ιστολογίων πολλών συγγραφέων και παρόμοιων τοποθεσιών.

Το Markdown μπορεί να είναι ιδιαίτερα χρήσιμο εάν θέλετε να δημιουργήσετε ένα ιστολόγιο ή να έχετε πολλές ιστοσελίδες με περιεχόμενο. Η χρήση αρχείων Markdown σάς επιτρέπει να εστιάσετε περισσότερο στο περιεχόμενο και όχι στον κώδικα γύρω από αυτό το περιεχόμενο.

Μπορείτε να ενσωματώσετε το Markdown με το Angular χρησιμοποιώντας το πακέτο κόμβου ngx-markdown και διαμορφώνοντάς το ώστε να λειτουργεί σε ένα στοιχείο.

Ρύθμιση μιας γωνιακής εφαρμογής

Εάν δεν έχετε ήδη ένα Γωνιακή εφαρμογή, μπορείτε να κάνετε λήψη αυτού του δείγματος εφαρμογής Angular από GitHub.

1. Στη σελίδα του έργου στο GitHub, κάντε κλικ στο Κώδικας κουμπί. Επιλέγω Λήψη ZIP.
2. Αποσυμπιέστε το φάκελο στον τοπικό σας υπολογιστή.
3. Ανοίξτε το έργο χρησιμοποιώντας ένα IDE, όπως Visual Code, Notepad++ ή Sublime Text. Εάν χρησιμοποιείτε ένα IDE, μπορείτε να χρησιμοποιήσετε ένα ενσωματωμένο τερματικό για να εκτελέσετε τυχόν απαραίτητες εντολές.
4. Μεταβείτε στον ριζικό φάκελο του έργου χρησιμοποιώντας ένα τερματικό. Το όνομα του ριζικού φακέλου είναι muo-sample-angular-app-main, και περιέχει το e2e και src φακέλους. Για παράδειγμα, εάν το έργο σας βρίσκεται στο φάκελο "Λήψεις", εκτελέστε την ακόλουθη εντολή για να μεταβείτε στον φάκελο.

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

5. Εγκαταστήστε μονάδες κόμβου στο έργο. Εάν δεν μπορείτε να εκτελέσετε εντολές κόμβου, ίσως χρειαστεί να εγκαταστήσετε Node.js στον υπολογιστή σας.

   npm εγκαθιστώ

6. Τώρα μπορείτε να εκκινήσετε την εφαρμογή Angular. Εκτελέστε την ακόλουθη εντολή στον ριζικό φάκελο του έργου.

   ng σερβίρετε

7. Αφού τρέξετε το ng σερβίρετε εντολή, περιμένετε να ολοκληρωθεί η μεταγλώττιση του έργου. Μόλις ολοκληρωθεί, η γραμμή εντολών θα εμφανίσει την τοπική διεύθυνση στην οποία θα εκτελείται η εφαρμογή Angular. Συνήθως, αυτό είναι ενεργοποιημένο http://localhost: 4200/.
8. Ανοίξτε ένα πρόγραμμα περιήγησης και εισαγάγετε τη διεύθυνση που φιλοξενεί τον ιστότοπό σας, για παράδειγμα, http://localhost: 4200/. Αφού φορτωθεί η σελίδα, θα πρέπει να μπορείτε να δείτε την αρχική σελίδα για το δείγμα γωνιακής εφαρμογής.

Πώς να εγκαταστήσετε το Ngx-Markdown στη Angular Application σας

Για να μπορέσετε να χρησιμοποιήσετε αρχεία Markdown στην εφαρμογή Angular, θα χρειαστεί να εγκαταστήσετε το πακέτο ngx-markdown.

1. Στον ριζικό φάκελο του έργου σας, εκτελέστε την ακόλουθη εντολή στο τερματικό. Βεβαιωθείτε ότι η έκδοση του πακέτου ngx-markdown είναι συμβατή με την έκδοση Angular.

   npm εγκαθιστώ ngx-markdown@^10.1.1--αποθηκεύσετε
   

2. Ανοίξτε το αρχείο app.module.ts. Αυτό το αρχείο βρίσκεται κάτω από το project/src/app ντοσιέ.
3. Διαμορφώστε τη νέα λειτουργική μονάδα Markdown. Εισαγάγετε τα ακόλουθα πακέτα:

   εισαγωγή { SecurityContext } από '@angular/core';
   εισαγωγή { MarkdownModule } από 'ngx-markdown'; 
   εισαγωγή { HttpClientModule, HttpClient } από '@angular/common/http'; 

4. Προσθέστε τη λειτουργική μονάδα Markdown στον πίνακα εισαγωγής.

   εισαγωγές: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ φορτωτής: HttpClient, sanitize: SecurityContext. ΚΑΜΙΑ }) 
   ], 

Πώς να δημιουργήσετε τα αρχεία Markdown σας

Κάθε αρχείο Markdown θα αντιπροσωπεύει μια σελίδα περιεχομένου για τον ιστότοπό σας. Θα χρειαστεί να δημιουργήσετε έναν φάκελο για να αποθηκεύσετε τα αρχεία Markdown και να συμπληρώσετε τα αρχεία Markdown με περιεχόμενο.

1. Πλοηγηθείτε στο περιουσιακά στοιχεία φάκελο, ο οποίος βρίσκεται κάτω από το project/src ντοσιέ.
2. Δημιουργήστε έναν νέο φάκελο που ονομάζεται αναρτήσεις.
3. Δημιουργήστε πολλά αρχεία Markdown. Τα αρχεία Markdown χρησιμοποιούν επέκταση .md.
4. Συμπληρώστε τα αρχεία .md με κάποιο περιεχόμενο μορφοποιημένο σε σύνταξη Markdown. Ακολουθούν μερικά δείγματα περιεχομένου που μπορείτε να χρησιμοποιήσετε:

   #### 03 Ιουνίου 2022
   # Λαχταριστή Συνταγή Σοκολάτας
   ___
   Αυτό είναι Πώς φτιάχνετε ένα υπέροχο Cheesecake σοκολάτας:
   * Θρυμματίζουμε τα μπισκότα, ανακατεύουμε με βούτυρο.
   * Αφήστε το να σειρά στο ψυγείο για 10 λεπτά.
   * Ανακατέψτε λίγη κρέμα με σιρόπι.
   * Το βάζουμε πάνω από τα μπισκότα και το ξαναβάζουμε στο ψυγείο.

Πώς να αποδώσετε το αρχείο Markdown σε ένα στοιχείο

Θα χρειαστεί να καταχωρίσετε καθένα από αυτά τα αρχεία στην αρχική σελίδα της εφαρμογής, ώστε να μπορείτε να πλοηγηθείτε σε αυτά.

1. Ανοιξε home.component.html αρχείο. Αυτό το αρχείο βρίσκεται κάτω από το project/src/app/home ντοσιέ.
2. Προσθέστε συνδέσμους στις νέες σας σελίδες Markdown. Θα πρέπει να δημιουργήσετε τους συνδέσμους σας σύμφωνα με το όνομα των αρχείων Markdown. Για παράδειγμα, εάν είχατε ένα αρχείο Markdown που ονομάζεται "Recipe.md", τότε η διεύθυνση URL της σελίδας θα είναι "/posts/post/Recipe".

   <div class="συνδέσεις">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" στυλ="περιθώριο-κάτω: 24 εικονοστοιχεία">Συνταγή Cheesecake σοκολάτας >></ένα>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" στυλ="περιθώριο-κάτω: 24 εικονοστοιχεία">Συνταγή Cheesecake με φράουλα
   >></ένα>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" στυλ="περιθώριο-κάτω: 24 εικονοστοιχεία">Συνταγή Cheesecake με καραμέλα >></ένα>
   </div>

3. Προσθέστε λίγο στυλ στους συνδέσμους:

   .συνδέσεις {
    padding: 72px;
    text-align: κέντρο;
   }

4. Δημιουργήστε ένα άλλο στοιχείο που μπορείτε να χρησιμοποιήσετε ως ξεχωριστή σελίδα. Αυτή η σελίδα θα πρέπει να μπορεί να αποδίδει οποιοδήποτε δεδομένο αρχείο Markdown. Στο τερματικό, εκτελέστε τα εξής παράγουν εντολή για τη δημιουργία ενός νέου στοιχείου:

   ng g γ σπίτι/αναρτήσεις

5. Θα πρέπει τώρα να δημιουργηθούν τέσσερα νέα αρχεία μέσα στον νέο φάκελο "αναρτήσεις". Αυτό περιλαμβάνει τα "posts.component.html", "posts.component.css", "posts.component.ts" και "posts.component.spec.ts".
6. Ανοιξε το posts.component.html και προσθέστε τον κώδικα HTML για την απόδοση των αρχείων Markdown.

   <div style="padding: 100px" markdown [src]="Θέση"></div>

7. Ανοιξε το αναρτήσεις.component.ts αρχείο. Προσθέστε την εισαγωγή δρομολόγησης.

   εισαγωγή { ActivatedRoute } από '@angular/router';

8. Αντικαταστήστε τον κατασκευαστή και τις συναρτήσεις ngOnInit() με τον κώδικα TypeScript για απόδοση των αρχείων Markdown. Αυτό θα πάρει το όνομα του άρθρου στη σύνδεση url και θα δρομολογήσει το αντίστοιχο αρχείο Markdown που είναι αποθηκευμένο στο φάκελο στοιχείων.

   post: string; 
   href: συμβολοσειρά; 
   κατασκευαστής(ιδιωτική διαδρομή: ActivatedRoute) { } 
   ngOnInit(): κενός {
   αφήνω Όνομα άρθρου = Αυτό.route.snapshot.paramMap.get('article'); 
   Αυτό.href = παράθυρο.location.href; 
    αυτό.ανάρτηση = './assets/posts/' + άρθροΌνομα + '.md'; 
   }

9. Ανοιξε το app-routing.module.ts αρχείο. Αυτό το αρχείο βρίσκεται κάτω από το project/src/app ντοσιέ.
10. Εισαγάγετε το νέο στοιχείο ανάρτησης και προσθέστε το στον πίνακα διαδρομών.

    εισαγωγή { PostsComponent } από './home/posts/posts.component';
    συνθ διαδρομές: Διαδρομές = [
    // ...
     { μονοπάτι: 'αναρτήσεις/ανάρτηση/:άρθρο', συστατικό: PostsComponent }, 
    ];

11. Τώρα μπορείτε να εκκινήσετε ξανά την εφαρμογή Angular.

    ng σερβίρετε 

12. Επίσκεψη http://localhost: 4200 ή οποιαδήποτε διεύθυνση φιλοξενεί τον ιστότοπό σας.
13. Κάντε κλικ σε έναν από τους συνδέσμους της σελίδας. Θα πρέπει τώρα να δείτε την απόδοση του περιεχομένου Markdown σε ξεχωριστή σελίδα.
14. Μπορείτε να κατεβάσετε ένα παράδειγμα εργασίας από το GitHub σελίδα του έργου. Μπορείτε να ακολουθήσετε τις οδηγίες στο αρχείο README για λήψη και εκτέλεση του έργου.

Χρήση Markdown στη γωνιακή σας εφαρμογή

Η χρήση αρχείων Markdown στον ιστότοπό σας σάς επιτρέπει να εστιάσετε περισσότερο στο περιεχόμενό σας. Αυτό μπορεί να είναι πολύ χρήσιμο για το blogging ιστοσελίδες. Εάν έχετε μια εφαρμογή Angular, μπορείτε να χρησιμοποιήσετε αρχεία Markdown για τις ιστοσελίδες σας χρησιμοποιώντας το πακέτο κόμβου ngx-markdown.

Μπορείτε να μάθετε περισσότερα για άλλες στοίβες τεχνολογίας που μπορεί να είναι χρήσιμες για τη δημιουργία ενός ιστότοπου για ιστολόγια. Ένα από αυτά είναι το Hugo, μια δημιουργία στατικών τοποθεσιών που αποδίδει επίσης τα αρχεία Markdown ως ιστοσελίδες.