Adjon oldalakat szögletes webhelyéhez Markdown fájlok segítségével

A Markdown egy népszerű formátum a webtartalom írására. A HTML és az egyszerű angol közötti kompromisszum lehetővé teszi az írók számára, hogy ismerősebb szintaxist használjanak. Nagyban megkönnyítheti a többszerzős blogok és hasonló webhelyek napi működését.

A Markdown különösen hasznos lehet, ha blogot szeretne létrehozni, vagy több tartalommal rendelkező weboldalt szeretne létrehozni. A Markdown fájlok használatával jobban összpontosíthat a tartalomra, nem pedig a tartalom körüli kódra.

A Markdown integrálható az Angular-ral az ngx-markdown node csomag használatával, és úgy konfigurálhatja, hogy egy összetevőn belül működjön.

Szögletes alkalmazás beállítása

Ha még nem rendelkezik egy Szögletes alkalmazás, letöltheti ezt a minta Angular alkalmazást innen GitHub.

1. A GitHub projekt oldalán kattintson a Kód gomb. Válassza ki Letöltés ZIP.
2. Csomagolja ki a mappát a helyi számítógépére.
3. Nyissa meg a projektet IDE segítségével, például Visual Code, Notepad++ vagy Sublime Text segítségével. Ha IDE-t használ, a beépített terminál segítségével végrehajthatja a szükséges parancsokat.
4. Keresse meg a projekt gyökérmappáját egy terminál segítségével. A gyökérmappa neve muo-sample-angular-app-main, és tartalmazza a e2e és src mappákat. Például, ha a projekt a "Letöltések" mappában található, futtassa a következő parancsot a mappához való navigáláshoz.

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

5. Telepítse a csomópont modulokat a projektbe. Ha nem tudja futtatni a csomóponti parancsokat, előfordulhat, hogy telepítenie kell Node.js a számítógépére.

   npm telepítés

6. Most elindíthatja az Angular alkalmazást. Futtassa a következő parancsot a projekt gyökérmappájában.

   ng szolgálni

7. Futás után a ng szolgálni parancsot, várja meg, amíg a projekt befejezi a fordítást. Amint ez befejeződött, a parancssor kiírja azt a helyi címet, amelyen az Angular alkalmazás futni fog. Általában ez be van kapcsolva http://localhost: 4200/.
8. Nyisson meg egy webböngészőt, és írja be a webhelyét tároló címet, például http://localhost: 4200/. Az oldal betöltése után látnia kell a szögletes alkalmazás minta kezdőlapját.

Az Ngx-Markdown telepítése az Angular alkalmazásba

Ahhoz, hogy használni tudja a Markdown fájlokat az Angular alkalmazásban, telepítenie kell az ngx-markdown csomagot.

1. A projekt gyökérmappájában futtassa a következő parancsot a terminálban. Győződjön meg arról, hogy az ngx-markdown csomag verziója kompatibilis az Ön Angular verziójával.

   npm telepítés ngx-markdown@^10.1.1--megment
   

2. Nyissa meg a fájlt app.module.ts. Ez a fájl a project/src/app mappát.
3. Konfigurálja az új Markdown modult. Importálja a következő csomagokat:

   import { SecurityContext } tól től '@szögletes/mag';
   import { MarkdownModule } tól től 'ngx-markdown'; 
   import { HttpClientModule, HttpClient } tól től '@angular/common/http'; 

4. Adja hozzá a Markdown modult az importálási tömbhöz.

   import: [
    ...
    HttpClientModule, 
   MarkdownModule.ForRoot({ rakodó: HttpClient, fertőtlenítés: SecurityContext. EGYIK SEM }) 
   ], 

Markdown fájlok létrehozása

Minden Markdown-fájl a webhely tartalmi oldalát képviseli. Létre kell hoznia egy mappát a Markdown-fájlok tárolására, és tartalommal kell feltöltenie a Markdown-fájlokat.

1. Navigáljon a eszközöket mappa alatt található projekt/src mappát.
2. Hozzon létre egy új mappát, melynek neve hozzászólások.
3. Hozzon létre több Markdown fájlt. A Markdown fájlok .md kiterjesztést használnak.
4. Töltse fel az .md fájlokat tartalommal Markdown szintaxissal formázva. Íme néhány felhasználható mintatartalom:

   #### 2022. június 3
   # Finom csokoládé recept
   ___
   Ez van hogyan készíthetsz egy fantasztikus csokis túrótortát:
   * A kekszet összetörjük, összekeverjük val vel vaj.
   * Hagyjuk, hogy készlet 10 percre a hűtőben.
   * Keverj össze egy kis tejszínt val vel szirup.
   * Tedd a kekszek tetejére, majd tedd vissza a hűtőbe.

A Markdown fájl megjelenítése egy komponensben

Ezeket a fájlokat listáznia kell az alkalmazás kezdőlapján, hogy el tudjon navigálni hozzájuk.

1. Nyisd ki home.component.html fájlt. Ez a fájl a project/src/app/home mappát.
2. Adjon hozzá hivatkozásokat az új Markdown oldalaihoz. A hivatkozásokat a Markdown-fájlok nevének megfelelően kell létrehoznia. Például, ha volt egy „Recept.md” nevű Markdown-fájlja, akkor az oldal URL-je „/posts/post/Recipe” lesz.

   <div class="linkeket">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" stílus="margó-alsó: 24 képpont">Csokoládé sajttorta recept >></a>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" stílus="margó-alsó: 24 képpont">Epres sajttorta recept
   >></a>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" stílus="margó-alsó: 24 képpont">Karamell sajttorta recept >></a>
   </div>

3. Adjon hozzá stílust a linkekhez:

   .linkek {
    padding: 72px;
    szöveg igazítása: középre;
   }

4. Hozzon létre egy másik összetevőt, amelyet külön oldalként használhat. Ennek az oldalnak képesnek kell lennie bármely adott Markdown fájl megjelenítésére. A terminálban futtassa a következőt ng generálni parancs egy új komponens létrehozásához:

   ng g c home/posts

5. Most már négy új fájlnak kell létrejönnie az új "bejegyzések" mappában. Ide tartozik a „posts.component.html”, „posts.component.css”, „posts.component.ts” és „posts.component.spec.ts”.
6. Nyissa meg a posts.component.html fájlt, és adja hozzá a HTML-kódot a Markdown fájlok megjelenítéséhez.

   <div style="kitöltés: 100 képpont" markdown [src]="hozzászólás"></div>

7. Nyissa meg a posts.component.ts fájlt. Adja hozzá az Útválasztás importálást.

   import { ActivatedRoute } tól től '@angular/router';

8. Cserélje le a konstruktort és az ngOnInit() függvényeket a TypeScript kódra a Markdown fájlok megjelenítéséhez. Ez felveszi a cikk nevét az URL-hivatkozásban, és az eszközök mappájában tárolt megfelelő Markdown fájlhoz vezet.

   hozzászólás: string; 
   href: string; 
   konstruktőr(privát útvonal: ActivatedRoute) { } 
   ngOnInit(): üres {
   hagyja cikkNév = ez.route.snapshot.paramMap.get('cikk'); 
   ez.href = ablak.location.href; 
    this.post = './assets/posts/' + cikkNév + '.md'; 
   }

9. Nyissa meg a app-routing.module.ts fájlt. Ez a fájl a project/src/app mappát.
10. Importálja az új bejegyzés összetevőt, és adja hozzá az útvonalak tömbhöz.

    import { PostsComponent } tól től './home/posts/posts.component';
    const útvonalak: Routes = [
    // ...
     { pálya: 'hozzászólások/bejegyzés/:cikk', összetevő: PostsComponent }, 
    ];

11. Most újra elindíthatja az Angular alkalmazást.

    ng szolgálni 

12. Látogatás http://localhost: 4200 vagy amelyik címen tárolja webhelyét.
13. Kattintson az oldal egyik hivatkozására. Most egy külön oldalon kell látnia a Markdown tartalommegjelenítést.
14. A működő példát letöltheti a GitHub projekt oldala. A projekt letöltéséhez és futtatásához kövesse a README fájl utasításait.

A Markdown használata az Angular alkalmazásban

Ha Markdown fájlokat használ webhelyén, akkor jobban összpontosíthat a tartalomra. Ez nagyon hasznos lehet blogoló webhelyeknél. Ha rendelkezik Angular alkalmazással, az ngx-markdown node csomag használatával Markdown fájlokat használhat weboldalaihoz.

Többet megtudhat más technológiai halmazokról, amelyek hasznosak lehetnek blogolási webhely létrehozásához. Az egyik ilyen a Hugo, egy statikus webhelygenerátor, amely a Markdown fájlokat weboldalként is megjeleníti.