Pridėkite puslapių į savo kampinę svetainę naudodami Markdown failus

Markdown yra populiarus žiniatinklio turinio rašymo formatas. Jo kompromisas tarp HTML ir paprastos anglų kalbos leidžia rašytojams naudoti labiau pažįstamą sintaksę. Tai gali labai palengvinti kasdienį kelių autorių tinklaraščių ir panašių svetainių veikimą.

Markdown gali būti ypač naudingas, jei norite sukurti tinklaraštį arba turėti kelis tinklalapius su turiniu. Naudodami Markdown failus galite daugiau dėmesio skirti turiniui, o ne kodui aplink tą turinį.

Galite integruoti Markdown su Angular naudodami ngx-markdown mazgo paketą ir sukonfigūruodami jį veikti komponente.

Kampinės programos nustatymas

Jei dar neturite Kampinis pritaikymas, galite atsisiųsti šį kampinės programos pavyzdį iš GitHub.

1. Projekto puslapyje „GitHub“ spustelėkite Kodas mygtuką. Pasirinkite Parsisiųsti ZIP.
instagram viewer
2. Išpakuokite aplanką vietiniame kompiuteryje.
3. Atidarykite projektą naudodami IDE, pvz., Visual Code, Notepad++ arba Sublime Text. Jei naudojate IDE, galite naudoti integruotą terminalą, kad vykdytumėte visas būtinas komandas.
4. Eikite į projekto šakninį aplanką naudodami terminalą. Šakninio aplanko pavadinimas yra muo-sample-angular-app-main, ir jame yra e2e ir src aplankus. Pavyzdžiui, jei jūsų projektas yra aplanke „Atsisiuntimai“, paleiskite šią komandą, kad pereitumėte į aplanką.

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

5. Įdiekite mazgo modulius į projektą. Jei negalite paleisti mazgo komandų, gali tekti įdiegti Node.js į savo kompiuterį.

   npm diegti

6. Dabar galite paleisti programą Angular. Projekto šakniniame aplanke paleiskite šią komandą.

   ng tarnauti

7. Paleidus ng tarnauti komandą, palaukite, kol projektas baigs kompiliuoti. Kai tai bus baigta, komandų eilutė išves vietinį adresą, kuriuo veiks jūsų kampinė programa. Paprastai tai įjungta http://localhost: 4200/.
8. Atidarykite žiniatinklio naršyklę ir įveskite adresą, kuriame yra jūsų svetainė, pavyzdžiui, http://localhost: 4200/. Kai puslapis bus įkeltas, turėtumėte matyti kampinės programos pavyzdžio pagrindinį puslapį.

Kaip įdiegti „Ngx-Markdown“ savo kampinėje programoje

Kad galėtumėte naudoti Markdown failus savo Angular programoje, turėsite įdiegti paketą ngx-markdown.

1. Savo projekto šakniniame aplanke terminale paleiskite šią komandą. Įsitikinkite, kad ngx-markdown paketo versija yra suderinama su jūsų Angular versija.

   npm diegti ngx-markdown@^10.1.1--sutaupyti
   

2. Atidarykite failą app.module.ts. Šis failas yra po projektas/src/app aplanką.
3. Sukonfigūruokite naują Markdown modulį. Importuokite šiuos paketus:

   importuoti { SecurityContext } iš '@kampinis/šerdis';
   importuoti { MarkdownModule } iš „ngx-markdown“; 
   importuoti { HttpClientModule, HttpClient } iš „@kampinis/bendras/http“; 

4. Pridėkite Markdown modulį į importavimo masyvą.

   importas: [
    ...
    HttpClientModule, 
   MarkdownModule.už Šaknį({ krautuvas: HttpClient, dezinfekuokite: SecurityContext. NĖ VIENAS }) 
   ], 

Kaip sukurti savo žymėjimo failus

Kiekvienas Markdown failas bus jūsų svetainės turinio puslapis. Turėsite sukurti aplanką, kuriame būtų saugomi „Markdown“ failai, ir užpildyti „Markdown“ failus turiniu.

1. Eikite į turto aplanką, esantį po projektas/src aplanką.
2. Sukurkite naują aplanką pavadinimu pranešimų.
3. Sukurkite kelis Markdown failus. Markdown failai naudoja .md plėtinį.
4. Užpildykite .md failus tam tikru turiniu suformatuota Markdown sintaksė. Štai keletas turinio pavyzdžių, kuriuos galite naudoti:

   #### 2022 m. birželio 3 d
   # Skanaus šokolado receptas
   ___
   Tai yra kaip pasigaminti nuostabų šokoladinį sūrio pyragą:
   * Sausainius sutrupinti, išmaišyti su sviesto.
   * Tegul rinkinys šaldytuve 10 minučių.
   * Sumaišykite šiek tiek grietinėlės su sirupo.
   * Uždėkite ant sausainių ir vėl įdėkite į šaldytuvą.

Kaip pateikti žymėjimo failą komponente

Turėsite nurodyti kiekvieną iš šių failų pagrindiniame programos puslapyje, kad galėtumėte juos naršyti.

1. Atviras home.component.html failą. Šis failas yra po project/src/app/home aplanką.
2. Pridėkite nuorodas į naujus „Markdown“ puslapius. Turėtumėte sukurti nuorodas pagal savo Markdown failų pavadinimus. Pavyzdžiui, jei turėjote Markdown failą pavadinimu „Receptas.md“, tada puslapio URL bus „/posts/post/Recipe“.

   <div klasė ="nuorodos">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" stilius ="paraštė-apačia: 24 piks">Šokoladinio sūrio pyrago receptas >></a>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" stilius ="paraštė-apačia: 24 piks">Braškių sūrio pyrago receptas
   >></a>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" stilius ="paraštė-apačia: 24 piks">Karamelinio sūrio pyrago receptas >></a>
   </div>

3. Pridėkite šiek tiek nuorodų stiliaus:

   .nuorodos {
    pamušalas: 72px;
    teksto lygiavimas: centre;
   }

4. Sukurkite kitą komponentą, kurį galėtumėte naudoti kaip atskirą puslapį. Šis puslapis turėtų galėti pateikti bet kurį nurodytą Markdown failą. Terminale paleiskite šiuos veiksmus ng generuoti komanda sukurti naują komponentą:

   ng g c home/posts

5. Dabar naujame aplanke „Įrašai“ turėtų būti sukurti keturi nauji failai. Tai apima „posts.component.html“, „posts.component.css“, „posts.component.ts“ ir „posts.component.spec.ts“.
6. Atidaryk posts.component.html failą ir pridėkite HTML kodą, kad būtų pateikti Markdown failai.

   <div stilius ="užpildymas: 100 pikselių" žymėjimas [src]="paštu"></div>

7. Atidaryk posts.component.ts failą. Pridėkite maršruto parinkimo importą.

   importuoti { ActivatedRoute } iš '@kampinis/maršrutizatorius';

8. Pakeiskite konstruktorių ir ngOnInit() funkcijas TypeScript kodu, kad būtų pateikti Markdown failai. Tai paims straipsnio pavadinimą URL nuorodoje ir nukreips į atitinkamą Markdown failą, saugomą išteklių aplanke.

   paštas: eilutė; 
   href: eilutė; 
   konstruktorius(privatus maršrutas: aktyvuotas maršrutas) { } 
   ngOnInit(): tuštuma {
   leisti straipsnio pavadinimas = tai.route.snapshot.paramMap.get('straipsnis'); 
   tai.href = langas.location.href; 
    šis.post = './assets/posts/' + straipsnioPavadinimas + '.md'; 
   }

9. Atidaryk app-routing.module.ts failą. Šis failas yra po projektas/src/app aplanką.
10. Importuokite naują įrašo komponentą ir pridėkite jį prie maršrutų masyvo.

    importuoti { PostsComponent } iš './home/posts/posts.component';
    konst maršrutai: Maršrutai = [
    // ...
     { kelias: 'įrašai/post/:straipsnis', komponentas: PostsComponent }, 
    ];

11. Dabar galite vėl paleisti programą Angular.

    ng tarnauti 

12. Apsilankykite http://localhost: 4200 arba bet kurį adresą, kuriame yra jūsų svetainė.
13. Spustelėkite vieną iš puslapio nuorodų. Dabar turėtumėte matyti Markdown turinio pateikimą atskirame puslapyje.
14. Darbo pavyzdį galite atsisiųsti iš GitHub projekto puslapyje. Norėdami atsisiųsti ir paleisti projektą, vadovaukitės README faile pateiktomis instrukcijomis.

Markdown naudojimas kampinėje programoje

Naudodami Markdown failus savo svetainėje galite daugiau dėmesio skirti savo turiniui. Tai gali būti labai naudinga tinklaraščių svetainėms. Jei turite „Angular“ programą, savo tinklalapiuose galite naudoti Markdown failus naudodami mazgo paketą „ngx-markdown“.

Galite sužinoti daugiau apie kitus technologijų paketus, kurie gali būti naudingi kuriant tinklaraščių svetainę. Vienas iš jų yra „Hugo“, statinis svetainių generatorius, kuris taip pat pateikia „Markdown“ failus kaip tinklalapius.