Перейти к содержимому

Создайте и передайте данные в пользовательский макет блога

Теперь, когда у вас есть макет для страниц, пришло время добавить макет для записей блога!

Приготовьтесь…

  • Создать новый макет записи блога для ваших файлов Markdown
  • Передать значения метаданных YAML в качестве свойств компоненту макета

Добавление макета для постов блога

Когда вы добавляете свойство layout в метаданные в файле .md, все значения ваших метаданных YAML становятся доступными для файла макета.

  1. Создайте новый файл в src/layouts/MarkdownPostLayout.astro

  2. Скопируйте следующий код в MarkdownPostLayout.astro

    ---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Автор: {frontmatter.author}</p>
<slot />

  3. Добавьте следующие метаданные в post-1.md

    ---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'Моя первая запись в блоге'
pubDate: 2022-07-01
description: 'Это мой первый пост в моем новом блоге Astro.'
author: 'Ученик Astro'
image:
    url: 'https://docs.astro.build/assets/rose.webp'
    alt: 'Логотип Astro на тёмном фоне с розовым свечением.'
tags: ["astro", "ведение блога", "обучение в открытом доступе"]
---

  4. Проверьте свой проект в браузере по адресу http://localhost:4321/posts/post-1 и обратите внимание, что макет добавился на вашу страницу.

  5. Добавьте то же свойство макета к вашим двум другим постам блога (post-2.md и post-3.md). Проверьте в вашем браузере, что макет также применен к этим постам.

:::tipПри использовании макетов у вас теперь есть возможность включать элементы, такие как заголовок страницы, в содержимое Markdown или в макет. Не забывайте визуально проверять предварительный просмотр страницы и вносить необходимые изменения, чтобы избежать дублирования элементов.:::

Попробуйте сами — Настройте макет вашего блога

Задача: Идентифицируйте элементы, общие для каждого поста блога, и используйте MarkdownPostLayout.astro для их отображения, вместо написания их в вашем Markdown в post-1.md и в каждом будущем посте.

Вот пример рефакторинга вашего кода для включения pubDate в компонент макета, а не для написания его в основном тексте вашего Markdown:

Опубликовано: 2022-07-01

Добро пожаловать в мой _новый блог_, посвящённый изучению Astro! Здесь я поделюсь своим путём обучения, создавая новый сайт.
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Опубликовано: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Автор: {frontmatter.author}</p>
<slot />

Рефакторите столько, сколько считаете полезным для себя, и добавляйте в макет столько, сколько хотите, помня, что всё, что вы добавляете в макет, — это то, что вам не придётся писать в каждом посте блога!

Вот пример рефакторинга макета, где только содержимое отдельного поста рендерится через <slot />. Вы можете использовать этот пример или создать свой!

---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Автор: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />

:::note[Избегайте дублирования]Всё, что отображается в вашем макете, не должно быть введено в вашу запись в блоге! Если вы заметили дублирование при просмотре в браузере, то обязательно удалите содержимое из вашего Markdown-файла.:::

Проверьте свои знания

Вы можете разобраться, что должно быть в пробелах, чтобы следующие два компонента вместе создали рабочий код Astro?

  1. ---
layout: ../../__________/MyMarkdownLayout.astro
title: "Изучение Markdown в Astro"
author: Ученик Astro
____: 2022-08-08
---
Сегодня я узнал так много! Astro позволяет мне писать в Markdown, а также использовать переменные из метаданных. Я даже могу получить доступ к этим значениям в компоненте макета Astro.
  2. ---
import ____________ from '../components/Footer.astro'
const { ___________ } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>Автор: {frontmatter.______}, {frontmatter.pubDate}</p>
< _______ />
<Footer />

    Покажите заполненные пробелы!

    1. ---
layout: ../../layouts/MyMarkdownLayout.astro
title: "Изучение Markdown в Astro"
author: Ученик Astro
pubDate: 2022-08-08
---
Сегодня я узнал так много! Astro позволяет мне писать в Markdown, а также использовать переменные из метаданных. Я даже могу получить доступ к этим значениям в компоненте макета Astro.
    2. ---
import Footer from '../components/Footer.astro'
const { frontmatter } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>Автор: {frontmatter.author}, {frontmatter.pubDate}</p>
<slot />
<Footer />

Контрольный список

Ресурсы

Внести свой вклад Сообщество Поддержать