Додајте странице на своју Ангулар веб локацију користећи Маркдовн датотеке

Маркдовн је популаран формат за писање веб садржаја. Његов компромис између ХТМЛ-а и обичног енглеског омогућава писцима да користе познатију синтаксу. То може у великој мери помоћи да се олакша свакодневно вођење блогова са више аутора и сличних сајтова.

Маркдовн може бити посебно користан ако желите да направите блог или имате више веб страница са садржајем. Коришћење Маркдовн датотека вам омогућава да се више фокусирате на садржај, а не на код око тог садржаја.

Можете интегрисати Маркдовн са Ангуларом користећи пакет чвора нгк-маркдовн и тако што ћете га конфигурисати да ради унутар компоненте.

Подешавање угаоне апликације

Ако већ немате ан Угаона апликација, можете преузети овај пример Ангулар апликације са ГитХуб.

1. На страници пројекта на ГитХуб-у кликните на Код дугме. Изаберите Преузмите ЗИП.
instagram viewer
2. Распакујте фасциклу на ваш локални рачунар.
3. Отворите пројекат користећи ИДЕ, као што је Висуал Цоде, Нотепад++ или Сублиме Тект. Ако користите ИДЕ, можете користити уграђени терминал да извршите све потребне команде.
4. Идите до основног фолдера пројекта помоћу терминала. Име основног фолдера је муо-сампле-ангулар-апп-маин, и садржи е2е и срц фасцикли. На пример, ако се ваш пројекат налази у фасцикли „Преузимања“, покрените следећу команду да бисте се кретали до фасцикле.

   цд Ц:\Усерс\Схарл\Довнлоадс\муо-сампле-ангулар-апп-маин

5. Инсталирајте модуле чворова у пројекат. Ако не можете да покренете команде чвора, можда ћете морати да инсталирате Ноде.јс на ваш рачунар.

   нпм инсталирај

6. Сада можете покренути апликацију Ангулар. Покрените следећу команду у основној фасцикли пројекта.

   нг служе

7. Након покретања нг служе команду, сачекајте да се пројекат заврши са компајлирањем. Када се заврши, командна линија ће исписати локалну адресу на којој ће се покренути ваша Ангулар апликација. Обично је ово укључено http://localhost: 4200/.
8. Отворите веб прегледач и унесите адресу на којој се налази ваш сајт, нпр. http://localhost: 4200/. Када се страница учита, требало би да будете у могућности да видите почетну страницу за пример ангулар апликације.

Како инсталирати Нгк-Маркдовн у вашу Ангулар апликацију

Да бисте могли да користите Маркдовн датотеке у својој Ангулар апликацији, мораћете да инсталирате пакет нгк-маркдовн.

1. У основној фасцикли вашег пројекта, покрените следећу команду у терминалу. Уверите се да је верзија пакета нгк-маркдовн компатибилна са вашом Ангулар верзијом.

   нпм инсталирај нгк-маркдовн@^10.1.1--сачувати
   

2. Отворите датотеку апп.модуле.тс. Ова датотека се налази испод пројекат/срц/апп фолдер.
3. Конфигуришите нови Маркдовн модул. Увезите следеће пакете:

   увоз { СецуритиЦонтект } из '@ангулар/цоре';
   увоз { МаркдовнМодуле } из 'нгк-маркдовн'; 
   увоз { ХттпЦлиентМодуле, ХттпЦлиент } из '@ангулар/цоммон/хттп'; 

4. Додајте модул Маркдовн у низ импортова.

   увози: [
    ...
    ХттпЦлиентМодуле, 
   МаркдовнМодуле.форРоот({ утоваривач: ХттпЦлиент, санирати: СецуритиЦонтект. НИЈЕДАН }) 
   ], 

Како да креирате своје Маркдовн датотеке

Свака Маркдовн датотека ће представљати страницу садржаја за вашу веб локацију. Мораћете да креирате фасциклу у којој ћете чувати своје Маркдовн датотеке и попуњавати своје Маркдовн датотеке садржајем.

1. Идите до средства фолдер, који се налази испод пројекат/срц фолдер.
2. Креирајте нову фасциклу под називом постова.
3. Направите више Маркдовн датотека. Маркдовн датотеке користе екстензију .мд.
4. Попуните .мд датотеке неким садржајем форматирано у Маркдовн синтакси. Ево неких примера садржаја који можете да користите:

   #### 3. јун 2022
   # Укусни чоколадни рецепт
   ___
   Ово је како направити одличан чоколадни колач од сира:
   * Кекс измрвити, измешати са маслац.
   * Нека га комплет у фрижидеру 10 минута.
   * Умешати мало креме са сируп.
   * Ставите на бисквите па вратите у фрижидер.

Како приказати Маркдовн датотеку у компоненти

Мораћете да наведете сваку од ових датотека на почетној страници апликације, тако да можете да дођете до њих.

1. Отвори хоме.цомпонент.хтмл фајл. Ова датотека се налази испод пројекат/срц/апп/хоме фолдер.
2. Додајте везе на своје нове Маркдовн странице. Требало би да направите своје везе у складу са именом ваших Маркдовн датотека. На пример, ако сте имали Маркдовн датотеку под називом „Реципе.мд“, онда ће УРЛ странице бити „/постс/пост/Реципе“.

   <див цласс="везе">
   <а роутерЛинк="/posts/post/ChocolateCheesecakeRecipe" стиле="маргин-боттом: 24пк">Рецепт за чоколадни колач од сира >></а>
   <бр>
   <а роутерЛинк="/posts/post/StrawberryCheesecakeRecipe" стиле="маргин-боттом: 24пк">Рецепт за колач од јагоде
   >></а>
   <бр>
   <а роутерЛинк="/posts/post/CaramelCheesecakeRecipe" стиле="маргин-боттом: 24пк">Рецепт за колаче од карамела >></а>
   </div>

3. Додајте мало стила везама:

   .линкс {
    паддинг: 72пк;
    тект-алигн: центар;
   }

4. Направите другу компоненту коју можете користити као засебну страницу. Ова страница би требало да може да прикаже било коју датотеку Маркдовн. У терминалу покрените следеће нг генерате наредба за креирање нове компоненте:

   нг г ц хоме/постс

5. Сада би требало да буду генерисане четири нове датотеке унутар нове фасцикле „постови“. Ово укључује „постс.цомпонент.хтмл“, „постс.цомпонент.цсс“, „постс.цомпонент.тс“ и „постс.цомпонент.спец.тс“.
6. Отвори постс.цомпонент.хтмл датотеку и додајте ХТМЛ код да бисте приказали Маркдовн датотеке.

   <див стиле="паддинг: 100пк" маркдовн [срц]="пошта"></div>

7. Отвори постс.цомпонент.тс фајл. Додајте увоз рутирања.

   увоз { АцтиватедРоуте } из '@ангулар/роутер';

8. Замените функције конструктора и нгОнИнит() са ТипеСцрипт кодом да бисте приказали Маркдовн датотеке. Ово ће узети назив чланка у урл линку и усмерити га до одговарајуће Маркдовн датотеке која је ускладиштена у фасцикли имовине.

   пост: стринг; 
   хреф: стринг; 
   конструктор(приватна рута: АцтиватедРоуте) { } 
   нгОнИнит(): празнина {
   дозволити артицлеНаме = ово.роуте.снапсхот.парамМап.гет('артицле'); 
   ово.хреф = прозор.лоцатион.хреф; 
    тхис.пост = './ассетс/постс/' + артицлеНаме + '.доктор медицине'; 
   }

9. Отвори апп-роутинг.модуле.тс фајл. Ова датотека се налази испод пројекат/срц/апп фолдер.
10. Увезите нову компоненту поста и додајте је у низ рута.

    увоз { ПостсЦомпонент } из './хоме/постс/постс.цомпонент';
    конст руте: Руте = [
    // ...
     {пут: 'постови/пост/:чланак', компонента: ПостсЦомпонент }, 
    ];

11. Сада можете поново покренути апликацију Ангулар.

    нг служе 

12. Посетите http://localhost: 4200 или било која адреса на којој се налази ваш сајт.
13. Кликните на једну од веза на страници. Сада би требало да видите приказ Маркдовн садржаја на посебној страници.
14. Можете преузети радни пример са ГитХуб страница пројекта. Можете пратити упутства у датотеци РЕАДМЕ да преузмете и покренете пројекат.

Коришћење Маркдовн-а у вашој Ангулар апликацији

Коришћење Маркдовн датотека на вашој веб локацији омогућава вам да се више фокусирате на свој садржај. Ово може бити веома корисно за веб странице за блоговање. Ако имате Ангулар апликацију, можете користити Маркдовн датотеке за своје веб странице помоћу пакета чворова нгк-маркдовн.

Можете сазнати више о другим технолошким групама које могу бити корисне за постављање веб локације за блоговање. Један од њих је Хуго, генератор статичког сајта који такође приказује Маркдовн датотеке као веб странице.