Dodaj strony do swojej witryny Angular za pomocą plików Markdown

Markdown to popularny format do pisania treści internetowych. Jego kompromis między HTML a zwykłym językiem angielskim pozwala pisarzom na używanie bardziej znanej składni. Może znacznie ułatwić codzienne prowadzenie blogów wielu autorów i podobnych witryn.

Markdown może być szczególnie przydatny, jeśli chcesz utworzyć bloga lub mieć wiele stron internetowych z treścią. Korzystanie z plików Markdown pozwala skupić się bardziej na treści, a nie na kodzie wokół tej treści.

Możesz zintegrować Markdown z Angularem za pomocą pakietu węzłów ngx-markdown i konfigurując go do pracy w komponencie.

Konfigurowanie aplikacji Angular

Jeśli jeszcze nie masz Aplikacja kątowa, możesz pobrać tę przykładową aplikację Angular z GitHub.

1. Na stronie projektu w serwisie GitHub kliknij Kod przycisk. Wybierz Pobierz ZIP.
instagram viewer
2. Rozpakuj folder na komputerze lokalnym.
3. Otwórz projekt za pomocą IDE, takiego jak Visual Code, Notepad++ lub Sublime Text. Jeśli używasz IDE, możesz użyć wbudowanego terminala do wykonania niezbędnych poleceń.
4. Przejdź do folderu głównego projektu za pomocą terminala. Nazwa folderu głównego to muo-sample-angular-app-maini zawiera e2e oraz src lornetka składana. Na przykład, jeśli projekt znajduje się w folderze „Pobrane”, uruchom następujące polecenie, aby przejść do folderu.

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

5. Zainstaluj w projekcie moduły węzłów. Jeśli nie możesz uruchomić poleceń węzła, może być konieczne zainstalowanie Node.js na twój komputer.

   npm zainstalować

6. Możesz teraz uruchomić aplikację Angular. Uruchom następujące polecenie w folderze głównym projektu.

   ng służyć

7. Po uruchomieniu ng służyć poczekaj na zakończenie kompilacji projektu. Po zakończeniu wiersz poleceń wyświetli adres lokalny, na którym będzie działać Twoja aplikacja Angular. Zwykle jest włączony http://localhost: 4200/.
8. Otwórz przeglądarkę internetową i wprowadź adres hostujący Twoją witrynę, na przykład http://localhost: 4200/. Po załadowaniu strony powinieneś być w stanie zobaczyć stronę główną przykładowej aplikacji kątowej.

Jak zainstalować Ngx-Markdown w swojej aplikacji Angular

Aby móc używać plików Markdown w swojej aplikacji Angular, musisz zainstalować pakiet ngx-markdown.

1. W folderze głównym projektu uruchom następujące polecenie w terminalu. Upewnij się, że wersja pakietu ngx-markdown jest zgodna z twoją wersją Angular.

   npm zainstalować ngx-markdown@^10.1.1--ratować
   

2. Otwórz plik app.moduł.ts. Ten plik znajduje się pod projekt/źródło/aplikacja teczka.
3. Skonfiguruj nowy moduł Markdown. Importuj następujące pakiety:

   import {Kontekst bezpieczeństwa} z „@kątowy/rdzeń”;
   import { Moduł przecen } z 'ngx-przecena'; 
   import { HttpClientModule, HttpClient } z „@kątowe/wspólne/http”; 

4. Dodaj moduł Markdown do tablicy importów.

   import: [
    ...
    HttpClientModuł, 
   Moduł przecen.dla roota({ ładowarka: HttpClient, oczyść: SecurityContext. ŻADEN }) 
   ], 

Jak tworzyć pliki Markdown

Każdy plik Markdown będzie reprezentował stronę z treścią Twojej witryny. Będziesz musiał utworzyć folder, w którym będą przechowywane Twoje pliki Markdown i zapełniać je treścią.

1. Przejdź do majątek folder, który znajduje się pod projekt/źródło teczka.
2. Utwórz nowy folder o nazwie posty.
3. Utwórz wiele plików Markdown. Pliki Markdown mają rozszerzenie .md.
4. Wypełnij pliki .md jakąś zawartością sformatowane w składni Markdown. Oto kilka przykładowych treści, których możesz użyć:

   #### 03 czerwca 2022
   # Pyszny przepis na czekoladę
   ___
   Ten jest jak zrobić niesamowity sernik czekoladowy:
   * Zmiażdż herbatniki, wymieszaj z masło.
   * Niech to ustawić w lodówce przez 10 minut.
   * Wymieszaj trochę śmietanki z syrop.
   * Połóż go na ciastkach, a następnie włóż z powrotem do lodówki.

Jak renderować plik Markdown w komponencie?

Będziesz musiał wymienić każdy z tych plików na stronie głównej aplikacji, aby móc do nich przejść.

1. otwarty home.komponent.html plik. Ten plik znajduje się pod projekt/źródło/aplikacja/dom teczka.
2. Dodaj linki do nowych stron Markdown. Powinieneś konstruować swoje linki zgodnie z nazwami swoich plików Markdown. Na przykład, jeśli masz plik Markdown o nazwie „Recipe.md”, adres URL strony będzie miał postać „/posts/post/Recipe”.

   <klasa div="spinki do mankietów">
   <routerLink="/posts/post/ChocolateCheesecakeRecipe" styl="margines-dolny: 24px">Przepis na sernik czekoladowy >></a>
   <br>
   <routerLink="/posts/post/StrawberryCheesecakeRecipe" styl="margines-dolny: 24px">Przepis na sernik truskawkowy
   >></a>
   <br>
   <routerLink="/posts/post/CaramelCheesecakeRecipe" styl="margines-dolny: 24px">Przepis na sernik karmelowy >></a>
   </div>

3. Dodaj stylizację do linków:

   .spinki do mankietów {
    dopełnienie: 72px;
    wyrównanie tekstu: środek;
   }

4. Utwórz kolejny komponent, którego możesz użyć jako osobnej strony. Ta strona powinna być w stanie wyrenderować dowolny plik Markdown. W terminalu uruchom następujące ng generować polecenie, aby utworzyć nowy komponent:

   ng g c strona główna/posty

5. W nowym folderze „posts” powinny być teraz wygenerowane cztery nowe pliki. Obejmuje to „posts.component.html”, „posts.component.css”, „posts.component.ts” i „posts.component.spec.ts”.
6. Otworzyć posts.komponent.html i dodaj kod HTML, aby renderować pliki Markdown.

   <styl div="wypełnienie: 100px" przecena [źródło]="Poczta"></div>

7. Otworzyć posts.komponent.ts plik. Dodaj import routingu.

   import { Aktywna Trasa } z „@kątowy/router”;

8. Zastąp konstruktor i funkcje ngOnInit() kodem TypeScript, aby renderować pliki Markdown. Spowoduje to pobranie nazwy artykułu z linku URL i przejście do odpowiedniego pliku Markdown przechowywanego w folderze zasobów.

   post: ciąg; 
   href: ciąg; 
   konstruktor(trasa prywatna: ActivatedRoute) { } 
   ngOnInit(): próżnia {
   wynajmować nazwa artykułu = ten.route.snapshot.paramMap.get('artykuł'); 
   ten.href = okno.lokalizacja.href; 
    this.post = './aktywa/posty/' + nazwa artykułu + '.md'; 
   }

9. Otworzyć app-routing.module.ts plik. Ten plik znajduje się pod projekt/źródło/aplikacja teczka.
10. Zaimportuj nowy komponent postu i dodaj go do tablicy tras.

    import { Komponent postów } z './home/posts/posts.komponent';
    stały trasy: Trasy = [
    // ...
     { ścieżka: 'posty/post/:artykuł', komponent: PostsComponent }, 
    ];

11. Możesz teraz ponownie uruchomić aplikację Angular.

    ng służyć 

12. Wizyta http://localhost: 4200 lub inny adres, na którym znajduje się Twoja witryna.
13. Kliknij jeden z linków do strony. Powinieneś teraz zobaczyć renderowaną zawartość Markdown na osobnej stronie.
14. Możesz pobrać działający przykład z GitHub strona projektu. Możesz postępować zgodnie z instrukcjami w pliku README, aby pobrać i uruchomić projekt.

Używanie Markdown w Twojej aplikacji Angular

Korzystanie z plików Markdown w witrynie pozwala skupić się bardziej na treści. Może to być bardzo przydatne w przypadku witryn blogowych. Jeśli masz aplikację Angular, możesz używać plików Markdown dla swoich stron internetowych, korzystając z pakietu węzła ngx-markdown.

Możesz dowiedzieć się więcej o innych stosach technologii, które mogą być przydatne do utworzenia witryny blogowej. Jednym z nich jest Hugo, statyczny generator witryn, który również renderuje pliki Markdown jako strony internetowe.