Dodajte stranice na svoje Angular web-mjesto pomoću Markdown datoteka

Markdown je popularan format za pisanje web sadržaja. Njegov kompromis između HTML-a i običnog engleskog omogućuje piscima korištenje poznatije sintakse. Može uvelike olakšati svakodnevno vođenje blogova s ​​više autora i sličnih stranica.

Markdown može biti osobito koristan ako želite stvoriti blog ili imati više web stranica sa sadržajem. Korištenje Markdown datoteka omogućuje vam da se više usredotočite na sadržaj, a ne na kod oko tog sadržaja.

Markdown možete integrirati s Angularom pomoću paketa čvorova ngx-markdown i konfiguracijom za rad unutar komponente.

Postavljanje kutne aplikacije

Ako već nemate Kutna primjena, možete preuzeti ovaj primjer Angular aplikacije s GitHub.

1. Na stranici projekta na GitHubu kliknite na Kodirati dugme. Odaberi Preuzmite ZIP.
2. Raspakirajte mapu na svoje lokalno računalo.
instagram viewer
3. Otvorite projekt pomoću IDE-a, kao što je Visual Code, Notepad++ ili Sublime Text. Ako koristite IDE, možete koristiti ugrađeni terminal za izvršavanje svih potrebnih naredbi.
4. Dođite do korijenske mape projekta pomoću terminala. Naziv korijenske mape je muo-uzorak-kutni-glavna aplikacija, a sadrži e2e i src mape. Na primjer, ako se vaš projekt nalazi u mapi "Preuzimanja", pokrenite sljedeću naredbu za navigaciju do mape.

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

5. Instalirajte module čvora u projekt. Ako ne možete pokrenuti naredbe čvora, možda ćete morati instalirati Node.js na svoje računalo.

   npm instalirati

6. Sada možete pokrenuti aplikaciju Angular. Pokrenite sljedeću naredbu u korijenskoj mapi projekta.

   ng poslužiti

7. Nakon pokretanja ng poslužiti naredbu, pričekajte da projekt završi s kompajliranjem. Nakon što završi, naredbeni redak će ispisati lokalnu adresu na kojoj će se pokrenuti vaša Angular aplikacija. Obično je ovo uključeno http://localhost: 4200/.
8. Otvorite web preglednik i unesite adresu na kojoj se nalazi vaša stranica, na primjer, http://localhost: 4200/. Nakon što se stranica učita, trebali biste moći vidjeti početnu stranicu za uzorak angular aplikacije.

Kako instalirati Ngx-Markdown u vašu Angular aplikaciju

Da biste mogli koristiti Markdown datoteke u svojoj Angular aplikaciji, morat ćete instalirati paket ngx-markdown.

1. U korijenskoj mapi vašeg projekta pokrenite sljedeću naredbu u terminalu. Provjerite je li verzija paketa ngx-markdown kompatibilna s vašom verzijom Angulara.

   npm instalirati ngx-markdown@^10.1.1--uštedjeti
   

2. Otvorite datoteku app.module.ts. Ova datoteka se nalazi ispod projekt/src/app mapu.
3. Konfigurirajte novi modul Markdown. Uvezite sljedeće pakete:

   uvoz { SecurityContext } iz '@angular/core';
   uvoz {MarkdownModule} iz 'ngx-markdown'; 
   uvoz { HttpClientModule, HttpClient } iz '@angular/common/http'; 

4. Dodajte modul Markdown u niz importova.

   uvozi: [
    ...
    HttpClientModule, 
   MarkdownModule.za korijen({ utovarivač: HttpClient, sanirati: SecurityContext. NIŠTA }) 
   ], 

Kako stvoriti svoje Markdown datoteke

Svaka Markdown datoteka predstavljat će stranicu sadržaja za vašu web stranicu. Morat ćete stvoriti mapu u koju ćete pohraniti svoje Markdown datoteke i popuniti svoje Markdown datoteke sadržajem.

1. Idite na imovina mapu, koja se nalazi ispod projekt/src mapu.
2. Stvorite novu mapu pod nazivom postova.
3. Napravite više Markdown datoteka. Markdown datoteke koriste ekstenziju .md.
4. Popunite .md datoteke nekim sadržajem formatirano u Markdown sintaksi. Evo nekih primjera sadržaja koji možete koristiti:

   #### 3. lipnja 2022
   # Ukusni recept za čokoladu
   ___
   Ovaj je kako napraviti fantastičan čokoladni kolač od sira:
   * Keks izmrvite, izmiksajte s maslac.
   * Pusti ga skupa u hladnjak na 10 minuta.
   * Pomiješajte malo vrhnja s sirup.
   * Stavite ga na kekse pa vratite u hladnjak.

Kako generirati Markdown datoteku u komponenti

Morat ćete navesti svaku od ovih datoteka na početnoj stranici aplikacije kako biste mogli doći do njih.

1. Otvorena home.component.html datoteka. Ova datoteka se nalazi ispod projekt/src/app/home mapu.
2. Dodajte veze na svoje nove Markdown stranice. Trebali biste izgraditi svoje veze prema nazivu vaših Markdown datoteka. Na primjer, ako ste imali Markdown datoteku pod nazivom "Recipe.md", tada će URL stranice biti "/posts/post/Recipe".

   <div klasa="poveznice">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" stil="margin-bottom: 24px">Recept za čokoladni Cheesecake >></a>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" stil="margin-bottom: 24px">Recept za kolač od sira od jagoda
   >></a>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" stil="margin-bottom: 24px">Recept za karamel Cheesecake >></a>
   </div>

3. Dodajte malo stila na linkove:

   .linkovi {
    padding: 72px;
    poravnavanje teksta: središte;
   }

4. Napravite drugu komponentu koju možete koristiti kao zasebnu stranicu. Ova stranica bi trebala moći generirati bilo koju datoteku Markdowna. U terminalu pokrenite sljedeće ng generirati naredba za stvaranje nove komponente:

   ng g c home/posts

5. Sada bi u novoj mapi "postovi" trebale biti generirane četiri nove datoteke. To uključuje "posts.component.html", "posts.component.css", "posts.component.ts" i "posts.component.spec.ts".
6. Otvori postovi.komponenta.html datoteku i dodajte HTML kod za renderiranje Markdown datoteka.

   <div stil="padding: 100px" smanjenje [src]="post"></div>

7. Otvori postovi.komponenta.ts datoteka. Dodajte uvoz usmjeravanja.

   uvoz { ActivatedRoute } iz '@angular/router';

8. Zamijenite konstruktor i funkcije ngOnInit() s kodom TypeScript da biste prikazali Markdown datoteke. Ovo će uzeti naziv članka u url linku i usmjeriti do odgovarajuće Markdown datoteke pohranjene u mapi imovine.

   post: niz; 
   href: niz; 
   konstruktor(privatna ruta: ActivatedRoute) { } 
   ngOnInit(): poništiti {
   neka naziv artikla = ovaj.route.snapshot.paramMap.get('članak'); 
   ovaj.href = prozor.location.href; 
    ovo.post = './assets/posts/' + ČlanakNaziv + '.doktor medicine'; 
   }

9. Otvori app-routing.module.ts datoteka. Ova datoteka se nalazi ispod projekt/src/app mapu.
10. Uvezite novu komponentu posta i dodajte je u niz ruta.

    uvoz {Komponenta postova} iz './home/posts/posts.component';
    konst rute: Rute = [
    // ...
     { staza: 'postovi/post/:članak', komponenta: PostsComponent }, 
    ];

11. Sada možete ponovno pokrenuti aplikaciju Angular.

    ng poslužiti 

12. Posjetiti http://localhost: 4200 ili koja god adresa na kojoj se nalazi vaša stranica.
13. Kliknite na jednu od poveznica na stranici. Sada biste trebali vidjeti Markdown prikaz sadržaja na zasebnoj stranici.
14. Radni primjer možete preuzeti sa GitHub stranica projekta. Možete slijediti upute u datoteci README za preuzimanje i pokretanje projekta.

Korištenje Markdowna u vašoj Angular aplikaciji

Korištenje Markdown datoteka na vašoj web stranici omogućuje vam da se više usredotočite na svoj sadržaj. Ovo može biti vrlo korisno za web stranice za bloganje. Ako imate Angular aplikaciju, možete koristiti Markdown datoteke za svoje web stranice pomoću paketa čvorova ngx-markdown.

Možete saznati više o drugim tehnološkim skupinama koje mogu biti korisne za postavljanje web stranice za bloganje. Jedan od njih je Hugo, generator statičkih stranica koji također prikazuje Markdown datoteke kao web stranice.