Добавете страници към вашия Angular уебсайт, като използвате 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 Инсталирай

6. Вече можете да стартирате приложението Angular. Изпълнете следната команда в главната папка на проекта.

   ng служи

7. След стартиране на ng служи команда, изчакайте проектът да завърши компилирането. След като приключи, командният ред ще изведе локалния адрес, на който ще работи вашето приложение Angular. Обикновено това е включено http://localhost: 4200/.
8. Отворете уеб браузър и въведете адреса, който хоства вашия сайт, например http://localhost: 4200/. След като страницата се зареди, трябва да можете да видите началната страница за примерното ъглово приложение.

Как да инсталирате Ngx-Markdown във вашето Angular приложение

За да можете да използвате Markdown файлове във вашето приложение Angular, ще трябва да инсталирате пакета ngx-markdown.

1. В главната папка на вашия проект изпълнете следната команда в терминала. Уверете се, че версията на пакета ngx-markdown е съвместима с вашата Angular версия.

   npm Инсталирай ngx-markdown@^10.1.1--запазете
   

2. Отворете файла app.module.ts. Този файл е под проект/src/приложение папка.
3. Конфигурирайте новия модул Markdown. Импортирайте следните пакети:

   внос { SecurityContext } от '@angular/core';
   внос {MarkdownModule} от 'ngx-markdown'; 
   внос { HttpClientModule, HttpClient } от '@angular/common/http'; 

4. Добавете модула Markdown към масива за импортиране.

   внос: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ товарач: HttpClient, саниране: SecurityContext. НИТО ЕДИН }) 
   ], 

Как да създадете вашите Markdown файлове

Всеки файл на Markdown ще представлява страница със съдържание за вашия уебсайт. Ще трябва да създадете папка, в която да съхранявате вашите Markdown файлове и да попълвате вашите Markdown файлове със съдържание.

1. Навигирайте до активи папка, която се намира под проект/src папка.
2. Създайте нова папка, наречена публикации.
3. Създайте няколко файла Markdown. Markdown файловете използват разширение .md.
4. Попълнете .md файловете с известно съдържание форматиран в синтаксис на Markdown. Ето малко примерно съдържание, което можете да използвате:

   #### 3 юни 2022 г
   # Вкусна шоколадова рецепта
   ___
   Това е как да направите страхотен шоколадов чийзкейк:
   * Натрошете бисквитите, разбъркайте с масло.
   * Нека комплект в хладилник за 10 минути.
   * Смесете малко сметана с сироп.
   * Сложете го върху бисквитите и го върнете в хладилника.

Как да изобразите файла Markdown в компонент

Ще трябва да посочите всеки един от тези файлове на началната страница на приложението, за да можете да отидете до тях.

1. Отвори home.component.html файл. Този файл е под проект/src/app/home папка.
2. Добавете връзки към новите си страници Markdown. Трябва да изградите връзките си според името на вашите Markdown файлове. Например, ако сте имали Markdown файл, наречен „Recipe.md“, тогава URL адресът на страницата ще бъде „/posts/post/Recipe“.

   <div клас="връзки">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" стил="margin-bottom: 24px">Рецепта за шоколадов чийзкейк >></a>
   <бр>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" стил="margin-bottom: 24px">Рецепта за ягодов чийзкейк
   >></a>
   <бр>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" стил="margin-bottom: 24px">Рецепта за карамелен чийзкейк >></a>
   </div>

3. Добавете малко стил към връзките:

   .връзки {
    допълване: 72px;
    подравняване на текста: център;
   }

4. Създайте друг компонент, който можете да използвате като отделна страница. Тази страница трябва да може да изобразява всеки файл на Markdown. В терминала изпълнете следното ng генерира команда за създаване на нов компонент:

   ng g c начало/публикации

5. Вече трябва да има четири нови файла, генерирани в новата папка "публикации". Това включва "posts.component.html", "posts.component.css", "posts.component.ts" и "posts.component.spec.ts".
6. Отвори posts.component.html файл и добавете HTML кода, за да изобразите Markdown файловете.

   <div style="допълване: 100px" уценяване [src]="пост"></div>

7. Отвори posts.component.ts файл. Добавете импортирането на маршрутизация.

   внос { ActivatedRoute } от '@angular/router';

8. Заменете конструктора и функциите ngOnInit() с кода на TypeScript, за да изобразите Markdown файловете. Това ще вземе името на статията в URL връзката и ще насочи към съответния файл Markdown, съхранен в папката с активи.

   пост: низ; 
   href: низ; 
   конструктор(частен маршрут: ActivatedRoute) { } 
   ngOnInit(): нищожен {
   позволявам Име на статията = това.route.snapshot.paramMap.get('article'); 
   това.href = прозорец.location.href; 
    this.post = './assets/posts/' +Име на статия + '.md'; 
   }

9. Отвори app-routing.module.ts файл. Този файл е под проект/src/приложение папка.
10. Импортирайте новия компонент Post и го добавете към масива с маршрути.

    внос { PostsComponent } от './home/posts/posts.component';
    const маршрути: Маршрути = [
    // ...
     { път: 'публикации/публикация/:статия', компонент: PostsComponent }, 
    ];

11. Вече можете да стартирате приложението Angular отново.

    ng служи 

12. Посетете http://localhost: 4200 или който и да е адрес, на който се хоства вашия сайт.
13. Кликнете върху една от връзките към страницата. Сега трябва да видите изобразяването на съдържанието на Markdown на отделна страница.
14. Можете да изтеглите работещ пример от GitHub страница на проекта. Можете да следвате инструкциите във файла README, за да изтеглите и стартирате проекта.

Използване на Markdown във вашето Angular приложение

Използването на Markdown файлове на вашия уебсайт ви позволява да се съсредоточите повече върху съдържанието си. Това може да бъде много полезно за уебсайтове за блогове. Ако имате приложение Angular, можете да използвате Markdown файлове за вашите уеб страници, като използвате пакета за възел ngx-markdown.

Можете да научите повече за други технологии, които могат да бъдат полезни за създаване на уебсайт за блогове. Един от тях е Hugo, статичен генератор на сайтове, който също изобразява файловете на Markdown като уеб страници.