Dodajte strani na spletno mesto Angular z uporabo datotek Markdown

Markdown je priljubljen format za pisanje spletnih vsebin. Njegov kompromis med HTML in navadno angleščino omogoča piscem uporabo bolj znane sintakse. To lahko močno pomaga olajšati vsakodnevno vodenje blogov z več avtorji in podobnih spletnih mest.

Markdown je lahko še posebej uporaben, če želite ustvariti blog ali imeti več spletnih strani z vsebino. Uporaba datotek Markdown vam omogoča, da se bolj osredotočite na vsebino in ne na kodo okoli te vsebine.

Markdown lahko integrirate z Angular s pomočjo paketa vozlišč ngx-markdown in tako, da ga konfigurirate za delovanje znotraj komponente.

Nastavitev kotne aplikacije

Če še nimate Kotna aplikacija, lahko prenesete ta vzorec aplikacije Angular iz GitHub.

1. Na strani projekta na GitHubu kliknite na Koda gumb. Izberite Prenesite ZIP.
instagram viewer
2. Razpakirajte mapo v lokalni računalnik.
3. Odprite projekt z IDE, kot je Visual Code, Notepad++ ali Sublime Text. Če uporabljate IDE, lahko uporabite vgrajeni terminal za izvajanje vseh potrebnih ukazov.
4. S terminalom se pomaknite do korenske mape projekta. Ime korenske mape je muo-sample-angular-app-main, in vsebuje e2e in src mape. Na primer, če je vaš projekt v mapi »Prenosi«, zaženite naslednji ukaz, da se pomaknete do mape.

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

5. Namestite module vozlišč v projekt. Če ne morete zagnati ukazov vozlišča, boste morda morali namestiti Node.js na vaš računalnik.

   npm namestite

6. Zdaj lahko zaženete aplikacijo Angular. Zaženite naslednji ukaz v korenski mapi projekta.

   ng služijo

7. Po zagonu ng služijo ukaz, počakajte, da se projekt konča s prevajanjem. Ko je končana, bo ukazna vrstica izpisala lokalni naslov, na katerem se bo izvajala vaša aplikacija Angular. Običajno je to vklopljeno http://localhost: 4200/.
8. Odprite spletni brskalnik in vnesite naslov, na katerem gostuje vaše spletno mesto, npr. http://localhost: 4200/. Ko se stran naloži, bi morali videti domačo stran za vzorčno angularno aplikacijo.

Kako namestiti Ngx-Markdown v vašo aplikacijo Angular

Če želite v aplikaciji Angular uporabljati datoteke Markdown, boste morali namestiti paket ngx-markdown.

1. V korenski mapi vašega projekta zaženite naslednji ukaz v terminalu. Prepričajte se, da je različica paketa ngx-markdown združljiva z vašo različico Angular.

   npm namestite ngx-markdown@^10.1.1--shrani
   

2. Odprite datoteko app.module.ts. Ta datoteka je pod projekt/src/app mapo.
3. Konfigurirajte nov modul Markdown. Uvozite naslednje pakete:

   uvoz { SecurityContext } od '@kotni/jedro';
   uvoz {MarkdownModule} od 'ngx-markdown'; 
   uvoz { HttpClientModule, HttpClient } od '@angular/common/http'; 

4. Dodajte modul Markdown v matriko uvozov.

   uvoz: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ nakladalnik: HttpClient, sanirati: SecurityContext. NI }) 
   ], 

Kako ustvariti svoje Markdown datoteke

Vsaka datoteka Markdown bo predstavljala stran z vsebino za vaše spletno mesto. Ustvariti boste morali mapo za shranjevanje datotek Markdown in zapolniti datoteke Markdown z vsebino.

1. Pomaknite se do sredstva mapo, ki je pod projekt/src mapo.
2. Ustvarite novo mapo z imenom objave.
3. Ustvarite več datotek Markdown. Datoteke Markdown uporabljajo pripono .md.
4. Napolnite datoteke .md z nekaj vsebine oblikovano v sintaksi Markdown. Tukaj je nekaj vzorčnih vsebin, ki jih lahko uporabite:

   #### 3. junija 2022
   # Slasten čokoladni recept
   ___
   tole je kako narediti čudovit čokoladni Cheesecake:
   * Piškote zdrobite, premešajte z maslo.
   * Naj set v hladilniku za 10 minut.
   * Zmešajte malo smetane z sirup.
   * Položite ga na piškote in nato ponovno postavite v hladilnik.

Kako upodabljati datoteko Markdown v komponenti

Vsako od teh datotek boste morali navesti na domači strani aplikacije, da se lahko pomaknete do njih.

1. Odprto domača.komponenta.html mapa. Ta datoteka je pod projekt/src/app/home mapo.
2. Dodajte povezave na svoje nove strani Markdown. Svoje povezave morate sestaviti v skladu z imenom datotek Markdown. Na primer, če ste imeli datoteko Markdown z imenom "Recipe.md", bo URL strani "/posts/post/Recipe".

   <div razred="povezave">
   <usmerjevalnikLink="/posts/post/ChocolateCheesecakeRecipe" slog ="rob-dno: 24 slikovnih pik">Recept za čokoladni Cheesecake >></a>
   <br>
   <usmerjevalnikLink="/posts/post/StrawberryCheesecakeRecipe" slog ="rob-dno: 24 slikovnih pik">Recept za jagodni sir s sirom
   >></a>
   <br>
   <usmerjevalnikLink="/posts/post/CaramelCheesecakeRecipe" slog ="rob-dno: 24 slikovnih pik">Recept za karamelni Cheesecake >></a>
   </div>

3. Povezavam dodajte nekaj stilov:

   .povezave {
    oblazinjenje: 72px;
    poravnava besedila: središče;
   }

4. Ustvarite drugo komponento, ki jo lahko uporabite kot ločeno stran. Ta stran bi morala imeti možnost upodabljanja katere koli datoteke Markdown. V terminalu zaženite naslednje ng ustvariti ukaz za ustvarjanje nove komponente:

   ng g c doma/objave

5. V novi mapi »objave« bi morale biti zdaj ustvarjene štiri nove datoteke. To vključuje "posts.component.html", "posts.component.css", "posts.component.ts" in "posts.component.spec.ts".
6. Odprite objave.komponenta.html in dodajte kodo HTML za upodabljanje datotek Markdown.

   <div style="oblazinjenje: 100px" znižanje [src]="post"></div>

7. Odprite posts.component.ts mapa. Dodajte uvoz usmerjanja.

   uvoz { ActivatedRoute } od '@kotni/usmerjevalnik';

8. Za upodobitev datotek Markdown zamenjajte konstruktor in funkcije ngOnInit() s kodo TypeScript. To bo prevzelo ime članka v povezavi URL in usmerilo do ustrezne datoteke Markdown, shranjene v mapi sredstev.

   post: niz; 
   href: niz; 
   konstruktor(zasebna pot: ActivatedRoute) { } 
   ngOnInit(): nična {
   pustiti Ime članka = to.route.snapshot.paramMap.get('article'); 
   to.href = okno.location.href; 
    ta.objava = './assets/posts/' + ČlanekIme + '.md'; 
   }

9. Odprite app-routing.module.ts mapa. Ta datoteka je pod projekt/src/app mapo.
10. Uvozite novo komponento objave in jo dodajte v matriko poti.

    uvoz {Komponenta objav} od './home/posts/posts.component';
    konst poti: Poti = [
    // ...
     { pot: 'objave/objava/:članek', komponenta: PostsComponent }, 
    ];

11. Zdaj lahko znova zaženete aplikacijo Angular.

    ng služijo 

12. Obiščite http://localhost: 4200 ali kateri koli naslov, na katerem gostuje vaše spletno mesto.
13. Kliknite na eno od povezav strani. Zdaj bi morali videti upodobitev vsebine Markdown na ločeni strani.
14. Delovni primer lahko prenesete iz GitHub stran projekta. Za prenos in zagon projekta lahko sledite navodilom v datoteki README.

Uporaba Markdowna v vaši aplikaciji Angular

Uporaba datotek Markdown na vašem spletnem mestu vam omogoča, da se bolj osredotočite na svojo vsebino. To je lahko zelo koristno za spletne strani za bloganje. Če imate aplikacijo Angular, lahko uporabite datoteke Markdown za svoje spletne strani z uporabo paketa vozlišč ngx-markdown.

Izvedete lahko več o drugih tehnoloških skladih, ki so lahko uporabni za postavitev spletnega mesta za bloganje. Eden od teh je Hugo, generator statičnega spletnega mesta, ki datoteke Markdown tudi upodablja kot spletne strani.