Էջեր ավելացրեք ձեր անկյունային կայքէջին՝ օգտագործելով Markdown ֆայլերը

Սկսեք հեղինակել ձեր կայքի բովանդակությունը Markdown-ում և օգտվեք դրա ավելի մաքուր, ավելի պահպանվող շարահյուսությունից:

Markdown-ը վեբ բովանդակություն գրելու հայտնի ձևաչափ է: Նրա փոխզիջումը HTML-ի և պարզ անգլերենի միջև թույլ է տալիս գրողներին օգտագործել ավելի ծանոթ շարահյուսություն: Այն կարող է մեծապես օգնել թեթևացնել բազմահեղինակային բլոգների և նմանատիպ կայքերի ամենօրյա աշխատանքը:

Markdown-ը կարող է հատկապես օգտակար լինել, եթե ցանկանում եք բլոգ ստեղծել կամ ունենալ բովանդակությամբ բազմաթիվ վեբ էջեր: Markdown ֆայլերի օգտագործումը թույլ է տալիս ավելի շատ կենտրոնանալ բովանդակության վրա, այլ ոչ թե այդ բովանդակության շուրջ ծածկագրի վրա:

Դուք կարող եք ինտեգրել Markdown-ը Angular-ի հետ՝ օգտագործելով ngx-markdown հանգույցի փաթեթը և այն կարգավորելով, որպեսզի այն աշխատի բաղադրիչի ներսում:

Անկյունային հավելվածի կարգավորում

Եթե դուք արդեն չունեք Angular հավելված, կարող եք ներբեռնել այս օրինակելի Angular հավելվածը GitHub-ից:

1. GitHub-ի նախագծի էջում սեղմեք Կոդ կոճակը: Ընտրեք Ներբեռնել ZIP:

   

2. Անջատեք թղթապանակը ձեր տեղական համակարգչի վրա:
3. Բացեք նախագիծը՝ օգտագործելով IDE, ինչպիսիք են Visual Code, Notepad++ կամ Sublime Text: Եթե դուք օգտագործում եք IDE, կարող եք օգտագործել ներկառուցված տերմինալ՝ ցանկացած անհրաժեշտ հրամաններ կատարելու համար:

4. Անցեք նախագծի արմատային թղթապանակ՝ օգտագործելով տերմինալ: Արմատային թղթապանակի անունն է muo-sample-angular-app-main, և այն պարունակում է e2e և src թղթապանակները: Օրինակ, եթե ձեր նախագիծը գտնվում է «Ներբեռնումներ» պանակում, գործարկեք հետևյալ հրամանը՝ թղթապանակը նավարկելու համար:

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

5. Տեղադրեք հանգույցի մոդուլներ նախագծում: Եթե դուք չեք կարող գործարկել հանգույցի հրամանները, գուցե անհրաժեշտ լինի տեղադրել Node.js-ը ձեր համակարգչում:

   npm install

6. Այժմ կարող եք գործարկել Angular հավելվածը: Գործարկեք հետևյալ հրամանը նախագծի արմատային թղթապանակում.

   ng serve

7. ng serve հրամանը գործարկելուց հետո սպասեք նախագծի ավարտին: Երբ այն ավարտվի, հրամանի տողում կհայտնվի տեղական հասցեն, որի վրա կաշխատի ձեր Angular հավելվածը: Սովորաբար սա գտնվում է http://localhost:4200/ կայքում:

   

8. Բացեք վեբ զննարկիչը և մուտքագրեք հասցեն, որը հոսթինգում է ձեր կայքը, օրինակ՝ http://localhost:4200/: Էջը բեռնվելուց հետո դուք պետք է կարողանաք տեսնել անկյունային հավելվածի օրինակելի գլխավոր էջը:

   

Ինչպես տեղադրել Ngx-Markdown-ը ձեր անկյունային հավելվածում

Որպեսզի կարողանաք օգտագործել Markdown ֆայլերը ձեր Angular հավելվածում, դուք պետք է տեղադրեք ngx-markdown փաթեթը:

1. Ձեր նախագծի արմատային թղթապանակում գործարկեք հետևյալ հրամանը տերմինալում. Համոզվեք, որ ngx-markdown փաթեթի տարբերակը համատեղելի է ձեր Angular տարբերակի հետ:

   npm install ngx-markdown@^10.1.1 --save
   

2. Բացեք app.module.ts ֆայլը: Այս ֆայլը գտնվում է project/src/app պանակում:

3. Կարգավորեք նոր Markdown մոդուլը: Ներմուծեք հետևյալ փաթեթները.

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

4. Ավելացնել Markdown մոդուլը ներմուծման զանգվածին:

   imports: [
       ...
       HttpClientModule, 
       MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }) 
   ], 

Ինչպես ստեղծել ձեր Markdown ֆայլերը

Յուրաքանչյուր Markdown ֆայլ կներկայացնի ձեր կայքի բովանդակության էջը: Դուք պետք է ստեղծեք թղթապանակ՝ ձեր Markdown ֆայլերը պահելու և ձեր Markdown ֆայլերը բովանդակությամբ համալրելու համար:

1. Նավարկեք դեպի ակտիվներ պանակ, որը գտնվում է project/src պանակի տակ:
2. Ստեղծեք նոր թղթապանակ, որը կոչվում է գրառումներ:

3. Ստեղծեք բազմաթիվ Markdown ֆայլեր: Markdown ֆայլերը օգտագործում են .md ընդլայնում:

   

4. Լրացրեք .md ֆայլերը Markdown շարահյուսությամբ ձևաչափված որոշ բովանդակությամբ: Ահա որոշ նմուշային բովանդակություն, որը կարող եք օգտագործել.

   #### 03 June 2022
   # Delicious Chocolate Recipe
   ___
   This is how you make an awesome Chocolate Cheesecake:
   * Crush the biscuits, mix with butter.
   * Let it set in the fridge for 10 minutes.
   * Mix some cream with syrup.
   * Put it on top of the biscuits then put it back in the fridge.

Ինչպես կատարել Markdown ֆայլը բաղադրիչում

Դուք պետք է նշեք այս ֆայլերից յուրաքանչյուրը հավելվածի գլխավոր էջում, որպեսզի կարողանաք նավարկել դեպի դրանք:

1. Բացեք home.component.html ֆայլը: Այս ֆայլը գտնվում է project/src/app/home թղթապանակում:

2. Ավելացնել հղումներ ձեր նոր Markdown էջերին: Դուք պետք է կառուցեք ձեր հղումները՝ ըստ ձեր Markdown ֆայլերի անվանման: Օրինակ, եթե ունեիք Markdown ֆայլ, որը կոչվում է «Recipe.md», ապա էջի URL-ը կլինի «/posts/post/Recipe»:

   <div class="links">
       <a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
       
       <a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
           >></a>
       
       <a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
   </div>

3. Ավելացրեք որոշ ոճավորում հղումներին.

   .links {
     padding: 72px;
     text-align: center;
   }

4. Ստեղծեք մեկ այլ բաղադրիչ, որը կարող եք օգտագործել որպես առանձին էջ: Այս էջը պետք է կարողանա ցուցադրել Markdown-ի ցանկացած ֆայլ: Տերմինալում գործարկեք հետևյալ ng generate հրամանը՝ նոր բաղադրիչ ստեղծելու համար.

   ng g c home/posts

5. Այժմ նոր «գրառումներ» թղթապանակում պետք է ստեղծվեն չորս նոր ֆայլեր: Սա ներառում է «posts.component.html», «posts.component.css», «posts.component.ts» և «posts.component.spec.ts»:

6. Բացեք posts.component.html ֆայլը և ավելացրեք HTML կոդը՝ Markdown ֆայլերը ցուցադրելու համար:

   <div style="padding:100px" markdown [src]="post"></div>

7. Բացեք posts.component.ts ֆայլը: Ավելացնել Routing ներմուծումը:

   import { ActivatedRoute } from '@angular/router';

8. Փոխարինեք կոնստրուկտորը և ngOnInit() ֆունկցիաները TypeScript կոդով՝ Markdown ֆայլերը ներկայացնելու համար։ Սա կվերցնի հոդվածի անունը url հղման մեջ և կուղղվի դեպի ակտիվների պանակում պահվող համապատասխան Markdown ֆայլը:

   post: string; 
   href: string; 
   constructor(private route: ActivatedRoute) { } 
   ngOnInit(): void {
       let articleName = this.route.snapshot.paramMap.get('article'); 
       this.href = window.location.href; 
       this.post = './assets/posts/' + articleName + '.md'; 
   }

9. Բացեք app-routing.module.ts ֆայլը: Այս ֆայլը գտնվում է project/src/app թղթապանակում:

10. Ներմուծեք նոր գրառման բաղադրիչը և ավելացրեք այն երթուղիների զանգվածին:

    import { PostsComponent } from './home/posts/posts.component';
    const routes: Routes = [
      // ...
      { path: 'posts/post/:article', component: PostsComponent }, 
    ];

11. Այժմ կարող եք կրկին գործարկել Angular հավելվածը:

    ng serve 

12. Այցելեք http://localhost:4200 կամ այն հասցեն, որը հյուրընկալում է ձեր կայքը:

13. Սեղմեք էջի հղումներից մեկի վրա: Այժմ դուք պետք է տեսնեք Markdown-ի բովանդակության ցուցադրումը առանձին էջում:

    

14. Աշխատանքային օրինակ կարող եք ներբեռնել GitHub նախագծի էջից։ Նախագիծը ներբեռնելու և գործարկելու համար կարող եք հետևել README ֆայլի հրահանգներին:

Markdown-ի օգտագործումը ձեր անկյունային հավելվածում

Markdown ֆայլերի օգտագործումը ձեր կայքում թույլ է տալիս ավելի շատ կենտրոնանալ ձեր բովանդակության վրա: Սա կարող է շատ օգտակար լինել բլոգային կայքերի համար: Եթե ունեք Angular հավելված, կարող եք օգտագործել Markdown ֆայլերը ձեր վեբ էջերի համար՝ օգտագործելով ngx-markdown հանգույցի փաթեթը:

Դուք կարող եք ավելին իմանալ այլ տեխնոլոգիական կույտերի մասին, որոնք կարող են օգտակար լինել բլոգերների կայք ստեղծելու համար: Դրանցից մեկը Hugo-ն է՝ ստատիկ կայքի գեներատոր, որը նաև Markdown ֆայլերը ներկայացնում է որպես վեբ էջեր: