Создание и передача данных в пользовательский макет блога
Теперь, когда у вас есть макет для страниц, пришло время добавить макет для записей блога!
Приготовьтесь…
- Создать новый макет записи блога для ваших файлов Markdown
- Передавать значения YAML frontmatter в качестве свойств компоненту макета
Добавление макета для постов блога
Заголовок раздела Добавление макета для постов блогаКогда вы добавляете свойство layout
в frontmatter в файле .md
, все значения ваших frontmatter YAML становятся доступными для файла макета.
-
Создайте новый файл в
src/layouts/MarkdownPostLayout.astro
-
Скопируйте следующий код в
MarkdownPostLayout.astro
-
Добавьте следующее свойство frontmatter в
post-1.md
-
Проверьте свой проект в браузере по адресу
http://localhost:4321/posts/post-1
и обратите внимание, что макет добавился на вашу страницу. -
Добавьте то же свойство макета к вашим двум другим постам блога (
post-2.md
иpost-3.md
). Проверьте в вашем браузере, что макет также применен к этим постам.
При использовании макетов у вас теперь есть возможность включать элементы, такие как заголовок страницы, в содержимое Markdown или в макет. Не забывайте визуально проверять предварительный просмотр страницы и вносить необходимые изменения, чтобы избежать дублирования элементов.
Попробуйте сами — Настройте макет вашего блога
Заголовок раздела Попробуйте сами — Настройте макет вашего блогаЗадача: Идентифицируйте элементы, общие для каждого поста блога, и используйте MarkdownPostLayout.astro
для их отображения, вместо написания их в вашем Markdown в post-1.md
и в каждом будущем посте.
Вот пример рефакторинга вашего кода для включения pubDate
в компонент макета, а не для написания его в основном тексте вашего Markdown:
Отрефакторите столько, сколько считаете нужным, и добавьте столько в свой макет, сколько хотите, помня, что все, что вы добавляете в свой макет, это на одну вещь меньше, чем вы напишете в каждой статье блога!
Вот пример отрефакторенного макета, который оставляет только контент отдельного блога, отображаемого слотом. Не стесняйтесь использовать это или создать свое!
Все, что отображается в вашем макете, не должно быть введено в вашу запись в блоге! Если вы заметили дублирование при просмотре в браузере, то обязательно удалите содержимое из вашего Markdown-файла.
Проверьте свои знания
Заголовок раздела Проверьте свои знанияВы можете разобраться, что должно быть в пробелах, чтобы следующие два компонента вместе создали рабочий код Astro?
-
Покажите заполненные пробелы!
Чек-лист
Заголовок раздела Чек-листРесурсы
Заголовок раздела Ресурсы-
Введение в YAML внешняя ссылка