Начните создавать контент своего сайта в Markdown и воспользуйтесь его более чистым и удобным для сопровождения синтаксисом.
Markdown — популярный формат для написания веб-контента. Его компромисс между HTML и простым английским языком позволяет авторам использовать более знакомый синтаксис. Это может значительно облегчить повседневную работу блогов с несколькими авторами и подобных сайтов.
Markdown может быть особенно полезен, если вы хотите создать блог или иметь несколько веб-страниц с контентом. Использование файлов Markdown позволяет вам больше сосредоточиться на содержимом, а не на коде вокруг этого содержимого.
Вы можете интегрировать Markdown с Angular, используя пакет узлов ngx-markdown и настроив его для работы внутри компонента.
Настройка приложения Angular
Если у вас еще нет Угловое приложение, вы можете загрузить этот образец приложения Angular с Гитхаб.
- На странице проекта на GitHub нажмите кнопку Код кнопка. Выбирать Скачать ZIP.
- Разархивируйте папку на локальный компьютер.
- Откройте проект с помощью IDE, например Visual Code, Notepad++ или Sublime Text. Если вы используете IDE, вы можете использовать встроенный терминал для выполнения любых необходимых команд.
- Перейдите в корневую папку проекта с помощью терминала. Имя корневой папки muo-sample-angular-app-main, и он содержит e2e а также источник папки. Например, если ваш проект находится в папке «Загрузки», выполните следующую команду, чтобы перейти в папку.
CD C:\Пользователи\Шарл\Загрузки\muo-sample-angular-app-main - Установите модули узла в проект. Если вы не можете запускать команды node, вам может потребоваться установить Node.js на свой компьютер.
нпм установить - Теперь вы можете запустить приложение Angular. Выполните следующую команду в корневой папке проекта.
нг служить - После запуска нг служить команда, дождитесь завершения компиляции проекта. После завершения командная строка выведет локальный адрес, на котором будет работать ваше приложение Angular. Обычно это на http://localhost: 4200/.
- Откройте веб-браузер и введите адрес, на котором размещен ваш сайт, например, http://localhost: 4200/. После загрузки страницы вы сможете увидеть домашнюю страницу примера приложения angular.
Как установить Ngx-Markdown в ваше приложение Angular
Чтобы иметь возможность использовать файлы Markdown в вашем приложении Angular, вам необходимо установить пакет ngx-markdown.
- В корневой папке вашего проекта выполните следующую команду в терминале. Убедитесь, что версия пакета ngx-markdown совместима с вашей версией Angular.
нпм установить ngx-уценка@^10.1.1--спасти - Откройте файл app.module.ts. Этот файл находится под проект/источник/приложение папка.
- Настройте новый модуль Markdown. Импортируйте следующие пакеты:
импорт { Контекст безопасности } из '@угловой/ядро';
импорт { МаркдаунМодуле } из 'ngx-уценка';
импорт {HttpClientModule, HttpClient} из '@angular/common/http'; - Добавьте модуль Markdown в массив импорта.
импорт: [
...
HttpClientModule,
MarkdownModule.forRoot({ погрузчик: HttpClient, очистка: SecurityContext. НИКТО })
],
Как создать файлы уценки
Каждый файл Markdown будет представлять собой страницу контента вашего веб-сайта. Вам нужно будет создать папку для хранения ваших файлов Markdown и заполнить ваши файлы Markdown содержимым.
- Перейдите к ресурсы папка, которая находится под проект/источник папка.
- Создайте новую папку с именем сообщения.
- Создайте несколько файлов Markdown. Файлы Markdown используют расширение .md.
- Заполните файлы .md некоторым содержимым. отформатировано в синтаксисе Markdown. Вот пример контента, который вы можете использовать:
#### 03 июня 2022 г.
# Рецепт вкусного шоколада
___
Этот является как приготовить потрясающий шоколадный чизкейк:
* Растолочь печенье, перемешать с масло.
* Пусть это установлен в холодильник на 10 минут.
* Смешайте немного сливок с сироп.
* Положите его поверх печенья, а затем снова поставьте в холодильник.
Как визуализировать файл уценки в компоненте
Вам нужно будет перечислить каждый из этих файлов на домашней странице приложения, чтобы вы могли перейти к ним.
- Открытым home.component.html файл. Этот файл находится под проект/источник/приложение/дом папка.
- Добавьте ссылки на свои новые страницы Markdown. Вы должны создавать свои ссылки в соответствии с именем ваших файлов Markdown. Например, если у вас есть файл Markdown под названием «Recipe.md», URL-адрес страницы будет «/posts/post/Recipe».
<раздел класс ="ссылки">
<роутерСсылка="/posts/post/ChocolateCheesecakeRecipe" стиль="нижняя граница: 24px">Рецепт шоколадного чизкейка >></ а>
<бр>
<роутерСсылка="/posts/post/StrawberryCheesecakeRecipe" стиль="нижняя граница: 24px">Рецепт клубничного чизкейка
>></ а>
<бр>
<роутерСсылка="/posts/post/CaramelCheesecakeRecipe" стиль="нижняя граница: 24px">Рецепт карамельного чизкейка >></ а>
</div> - Добавьте стили к ссылкам:
.ссылки {
отступ: 72px;
выравнивание текста: по центру;
} - Создайте еще один компонент, который можно использовать как отдельную страницу. Эта страница должна иметь возможность отображать любой файл Markdown. В терминале выполните следующее нг генерировать команда для создания нового компонента:
ng g c домой/сообщения - Теперь в новой папке «posts» должно быть сгенерировано четыре новых файла. Сюда входят «posts.component.html», «posts.component.css», «posts.component.ts» и «posts.component.spec.ts».
- Открой posts.component.html файл и добавьте код HTML для отображения файлов Markdown.
<стиль div="отступ: 100px" уценка [источник] ="почта"></div> - Открой post.component.ts файл. Добавьте импорт маршрутизации.
импорт {Активированный маршрут} из '@угловой/маршрутизатор'; - Замените функции конструктора и ngOnInit() кодом TypeScript для отображения файлов Markdown. Это примет название статьи в URL-ссылке и перенаправит к соответствующему файлу Markdown, хранящемуся в папке ресурсов.
сообщение: строка;
ссылка: строка;
конструктор(частный маршрут: ActivatedRoute) { }
нгонинит(): пустота {
позволять имя статьи = это.route.snapshot.paramMap.get('статья');
это.href = окно.location.href;
это.пост = './активы/сообщения/' + название статьи + '.мд';
} - Открой приложение-routing.module.ts файл. Этот файл находится под проект/источник/приложение папка.
- Импортируйте новый компонент post и добавьте его в массив маршрутов.
импорт {Компонент постов} из './home/posts/posts.component';
константа маршруты: Маршруты = [
// ...
{ дорожка: 'сообщения/сообщение/:статья', компонент: PostsComponent },
]; - Теперь вы можете снова запустить приложение Angular.
нг служить - Посещать http://localhost: 4200 или любой другой адрес, на котором размещен ваш сайт.
- Нажмите на одну из ссылок страницы. Теперь вы должны увидеть визуализацию содержимого Markdown на отдельной странице.
- Вы можете скачать рабочий пример с Гитхаб страница проекта. Вы можете следовать инструкциям в файле README, чтобы загрузить и запустить проект.
Использование Markdown в вашем приложении Angular
Использование файлов Markdown на вашем веб-сайте позволяет вам больше сосредоточиться на своем контенте. Это может быть очень полезно для блогов. Если у вас есть приложение Angular, вы можете использовать файлы Markdown для своих веб-страниц с помощью пакета узла ngx-markdown.
Вы можете узнать больше о других технических стеках, которые могут быть полезны для создания веб-сайта для ведения блога. Одним из них является Hugo, генератор статических сайтов, который также отображает файлы Markdown как веб-страницы.