Pievienojiet lapas savai leņķiskajai vietnei, izmantojot Markdown failus

Markdown ir populārs tīmekļa satura rakstīšanas formāts. Tā kompromiss starp HTML un vienkāršu angļu valodu ļauj rakstītājiem izmantot pazīstamāku sintaksi. Tas var ievērojami atvieglot vairāku autoru emuāru un līdzīgu vietņu ikdienas darbību.

Markdown var būt īpaši noderīga, ja vēlaties izveidot emuāru vai izveidot vairākas tīmekļa lapas ar saturu. Izmantojot Markdown failus, varat vairāk koncentrēties uz saturu, nevis kodu ap šo saturu.

Varat integrēt Markdown ar Angular, izmantojot ngx-markdown mezgla pakotni un konfigurējot to darbam komponentā.

Leņķiskās lietojumprogrammas iestatīšana

Ja jums vēl nav Leņķiskais pielietojums, varat lejupielādēt šo Angular lietojumprogrammas paraugu no GitHub.

1. GitHub projekta lapā noklikšķiniet uz Kods pogu. Izvēlieties Lejupielādēt ZIP.
2. Izsaiņojiet mapi vietējā datorā.
instagram viewer
3. Atveriet projektu, izmantojot IDE, piemēram, Visual Code, Notepad++ vai Sublime Text. Ja izmantojat IDE, varat izmantot iebūvēto termināli, lai izpildītu visas nepieciešamās komandas.
4. Izmantojot termināli, dodieties uz projekta saknes mapi. Saknes mapes nosaukums ir muo-sample-angular-app-main, un tas satur e2e un src mapes. Piemēram, ja jūsu projekts atrodas mapē Lejupielādes, palaidiet šo komandu, lai pārietu uz mapi.

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

5. Instalējiet mezglu moduļus projektā. Ja nevarat palaist mezglu komandas, iespējams, būs jāinstalē Node.js savā datorā.

   npm uzstādīt

6. Tagad varat palaist lietojumprogrammu Angular. Projekta saknes mapē palaidiet šo komandu.

   ng kalpot

7. Pēc palaišanas ng kalpot komandu, pagaidiet, līdz projekts pabeidz kompilēšanu. Kad tas būs pabeigts, komandrinda izvadīs vietējo adresi, kurā darbosies jūsu Angular lietotne. Parasti tas ir ieslēgts http://localhost: 4200/.
8. Atveriet tīmekļa pārlūkprogrammu un ievadiet adresi, kas mitina jūsu vietni, piemēram, http://localhost: 4200/. Kad lapa ir ielādēta, jums vajadzētu būt iespējai redzēt leņķiskās lietojumprogrammas parauga sākumlapu.

Kā instalēt Ngx-Markdown savā leņķiskajā lietojumprogrammā

Lai savā Angular lietojumprogrammā varētu izmantot Markdown failus, jums būs jāinstalē pakotne ngx-markdown.

1. Projekta saknes mapē terminālī palaidiet šādu komandu. Pārliecinieties, vai ngx-markdown pakotnes versija ir saderīga ar jūsu Angular versiju.

   npm uzstādīt ngx-markdown@^10.1.1-- saglabāt
   

2. Atveriet failu app.module.ts. Šis fails atrodas zem projekts/src/app mapi.
3. Konfigurējiet jauno Markdown moduli. Importējiet šādas pakotnes:

   imports { SecurityContext } no '@leņķa/kodols';
   imports { MarkdownModule } no "ngx-markdown"; 
   imports { HttpClientModule, HttpClient } no '@leņķis/kopīgs/http'; 

4. Pievienojiet Markdown moduli importēšanas masīvam.

   imports: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ iekrāvējs: HttpClient, dezinficējiet: SecurityContext. NEVIENS }) 
   ], 

Kā izveidot savus Markdown failus

Katrs Markdown fails attēlos jūsu vietnes satura lapu. Jums būs jāizveido mape, kurā saglabāt savus Markdown failus un aizpildīt Markdown failus ar saturu.

1. Dodieties uz aktīviem mapi, kas atrodas zem projekts/src mapi.
2. Izveidojiet jaunu mapi ar nosaukumu ziņas.
3. Izveidojiet vairākus Markdown failus. Markdown faili izmanto .md paplašinājumu.
4. Aizpildiet .md failus ar saturu formatēts Markdown sintaksē. Šeit ir daži satura paraugi, kurus varat izmantot:

   #### 2022. gada 3. jūnijs
   # Gardas šokolādes recepte
   ___
   Šis ir kā pagatavot lielisku šokolādes siera kūku:
   * Sasmalcina cepumus, samaisa ar sviests.
   * Ļaujiet tai komplekts ledusskapī uz 10 minūtēm.
   * Sajauc nedaudz krējuma ar sīrups.
   * Liek to virs cepumiem un pēc tam liec atpakaļ ledusskapī.

Kā atveidot atzīmes failu komponentā

Katrs no šiem failiem būs jānorāda lietojumprogrammas sākumlapā, lai jūs varētu uz tiem pārvietoties.

1. Atvērt home.component.html failu. Šis fails atrodas zem projekts/src/app/home mapi.
2. Pievienojiet saites uz jaunajām Markdown lapām. Saites ir jāveido atbilstoši Markdown failu nosaukumam. Piemēram, ja jums bija Markdown fails ar nosaukumu "Recipe.md", lapas URL būs "/posts/post/Recipe".

   <div klase="saites">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" stils ="mala apakšā: 24 pikseļi">Šokolādes siera kūkas recepte >></a>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" stils ="mala apakšā: 24 pikseļi">Zemeņu siera kūkas recepte
   >></a>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" stils ="mala apakšā: 24 pikseļi">Karameļu siera kūkas recepte >></a>
   </div>

3. Pievienojiet saitēm stilu:

   .saites {
    polsterējums: 72 pikseļi;
    teksta līdzināšana: centrs;
   }

4. Izveidojiet citu komponentu, ko varat izmantot kā atsevišķu lapu. Šai lapai jāspēj renderēt jebkuru Markdown failu. Terminālī izpildiet tālāk norādīto ng ģenerēt komanda, lai izveidotu jaunu komponentu:

   ng g c home/posts

5. Tagad jaunajā mapē "Ziņas" ir jāģenerē četri jauni faili. Tas ietver "posts.component.html", "posts.component.css", "posts.component.ts" un "posts.component.spec.ts".
6. Atveriet posts.component.html failu un pievienojiet HTML kodu, lai renderētu Markdown failus.

   <div style="polsterējums: 100 pikseļi" markdown [src]="pastu"></div>

7. Atveriet posts.component.ts failu. Pievienojiet maršrutēšanas importēšanu.

   imports { Aktivizētais maršruts } no '@leņķiskais/maršrutētājs';

8. Aizstājiet konstruktora un ngOnInit() funkcijas ar TypeScript kodu, lai renderētu Markdown failus. Tas izmantos URL saitē esošā raksta nosaukumu un novirzīs uz atbilstošo Markdown failu, kas saglabāts līdzekļu mapē.

   post: string; 
   href: virkne; 
   konstruktors(privātais maršruts: ActivatedRoute) { } 
   ngOnInit(): nederīgs {
   ļaut rakstaNosaukums = šis.route.snapshot.paramMap.get('raksts'); 
   šis.href = logs.location.href; 
    this.post = './assets/posts/' + rakstaNosaukums + '.md'; 
   }

9. Atveriet app-routing.module.ts failu. Šis fails atrodas zem projekts/src/app mapi.
10. Importējiet jauno pasta komponentu un pievienojiet to maršrutu masīvam.

    imports { PostsComponent } no './home/posts/posts.component';
    konst maršruti: maršruti = [
    // ...
     { ceļš: 'ziņas/post/:raksts', komponents: PostsComponent }, 
    ];

11. Tagad varat vēlreiz palaist lietojumprogrammu Angular.

    ng kalpot 

12. Vizīte http://localhost: 4200 vai jebkura adrese, kurā tiek mitināta jūsu vietne.
13. Noklikšķiniet uz vienas no lapas saitēm. Tagad jums vajadzētu redzēt Markdown satura renderēšanu atsevišķā lapā.
14. Jūs varat lejupielādēt darba piemēru no vietnes GitHub projekta lapa. Lai lejupielādētu un palaistu projektu, izpildiet failā README sniegtos norādījumus.

Markdown izmantošana jūsu leņķiskajā lietojumprogrammā

Izmantojot Markdown failus savā vietnē, varat vairāk koncentrēties uz saturu. Tas var būt ļoti noderīgi emuāru rakstīšanas vietnēm. Ja jums ir lietojumprogramma Angular, varat izmantot Markdown failus savām tīmekļa lapām, izmantojot ngx-markdown mezgla pakotni.

Varat uzzināt vairāk par citiem tehnoloģiju krājumiem, kas var būt noderīgi emuāru veidošanas vietnes iestatīšanai. Viens no tiem ir Hugo, statisks vietņu ģenerators, kas arī atveido Markdown failus kā tīmekļa lapas.