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

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

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

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

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

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

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

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

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

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

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

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

    src/pages/posts/post-1.md
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Мой первый пост в блоге'
    pubDate: 2022-07-01
    description: 'Это мой первый пост в моем новом блоге Astro.'
    author: 'Ученик Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'Полный логотип Astro.'
    tags: ["astro", "ведение блога", "обучение в открытом доступе"]
    ---

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

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

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

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

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

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

src/pages/posts/post-1.md
Опубликовано: 2022-07-01


Добро пожаловать в мой _новый блог_, посвящённый изучению Astro! Здесь я поделюсь своим путём обучения, создавая новый сайт.
src/layouts/MarkdownPostLayout.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 />. Вы можете использовать этот пример или создать свой!

src/layouts/MarkdownPostLayout.astro
---
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 />

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

Заголовок раздела Проверьте свои знания

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

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

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы
Внести свой вклад Сообщество Sponsor