Напишите свой первый пост в блоге в формате Markdown
Теперь, когда вы создали страницы с помощью файлов .astro
, пришло время сделать несколько записей в блоге с помощью файлов .md
!
Приготовьтесь…
- Создать новую папку и новый пост
- Написать несколько постов в формате Markdown
- Создать ссылки на ваши блог-посты на странице “Блог”
Создайте свой первый файл .md
.
Заголовок раздела Создайте свой первый файл .md.-
Создайте новую директорию по адресу
src/pages/posts/
. -
Добавьте новый (пустой) файл
post-1.md
в новую папку/posts/
. -
Найдите эту страницу в предварительном просмотре браузера, добавив
/posts/post-1
в конец вашего текущего URL-адреса предварительного просмотра. (например,http://localhost:4321/posts/post-1
). -
Измените URL-адрес предварительного просмотра в браузере, чтобы вместо него просматривать
/posts/post-2
. (Это страница, которую вы еще не создали).
Обратите внимание на разный вывод при предварительном просмотре “пустой” и несуществующей страницы. Это поможет вам устранить проблемы в будущем.
Напишите содержимое в формате Markdown.
Заголовок раздела Напишите содержимое в формате Markdown.-
Скопируйте или введите следующий код в файл
post-1.md
-
Проверьте предварительный просмотр браузера по адресу
http://localhost:4321/posts/post-1
. Теперь вы должны увидеть содержимое этой страницы. Возможно, оно еще не отформатировано должным образом, но не волнуйтесь, вы обновите его позже в учебном пособии ! -
Используйте инструменты разработчика вашего браузера для инспектирования этой страницы. Обратите внимание, что, хотя вы не вводили никаких HTML-элементов, ваш Markdown был преобразован в HTML. Вы можете увидеть такие элементы, как заголовки, параграфы и элементы списка.
Информация в верхней части файла, внутри кодовых заборов, называется frontmatter. Эти данные - включая теги и изображение поста - представляют собой информацию о вашем посте, которую может использовать Astro. Она не появляется на странице автоматически, но вы будете обращаться к ней позже в учебном пособии, чтобы улучшить свой сайт.
Создайте ссылки на ваши посты
Заголовок раздела Создайте ссылки на ваши посты-
Создайте ссылку на ваш первый пост с помощью элемента ссылки в файле
src/pages/blog.astro
: -
Теперь добавьте еще два файла в
src/pages/posts/
:post-2.md
иpost-3.md
. Вот небольшой пример кода, который вы можете скопировать и вставить в ваши файлы, или же написать свой! -
Добавьте ссылки на эти новые посты:
-
Проверьте предварительный просмотр в браузере и убедитесь, что:
Все ваши ссылки на Post 1, Post 2 и Post 3 ведут на рабочие страницы на вашем сайте. (Если вы обнаружите ошибку, проверьте ваши ссылки в
blog.astro
или имена ваших файлов Markdown.)
Проверьте свои знания
Заголовок раздела Проверьте свои знания- Содержимое в файле Markdown (
.md
) преобразуется в:
Чек-лист
Заголовок раздела Чек-листРесурсы
Заголовок раздела Ресурсы-
Шпаргалка по Markdown от The Markdown Guide внешняя ссылка
-
Что такое инструменты разработчика браузера? MDN внешняя ссылка
-
YAML frontmatter внешняя ссылка