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

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

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

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

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

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

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

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

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

   src/layouts/MarkdownPostLayout.astro

   ---
   const { frontmatter } = Astro.props;
   ---
   <h1>{frontmatter.title}</h1>
   <p>Written by {frontmatter.author}</p>
   <slot />

3. Добавьте следующее свойство frontmatter в post-1.md

   src/pages/posts/post-1.md

   ---
   layout: ../../layouts/MarkdownPostLayout.astro
   title: 'My First Blog Post'
   pubDate: 2022-07-01
   description: 'This is the first post of my new Astro blog.'
   author: 'Astro Learner'
   image:
       url: 'https://docs.astro.build/assets/full-logo-light.png'
       alt: 'The full Astro logo.'
   tags: ["astro", "blogging", "learning in public"]
   ---

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

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

Совет

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

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

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

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

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

src/pages/posts/post-1.md

Published on: 2022-07-01

Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

src/layouts/MarkdownPostLayout.astro

---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

Отрефакторите столько, сколько считаете нужным, и добавьте столько в свой макет, сколько хотите, помня, что все, что вы добавляете в свой макет, это на одну вещь меньше, чем вы напишете в каждой статье блога!

Вот пример отрефакторенного макета, который оставляет только контент отдельного блога, отображаемого слотом. Не стесняйтесь использовать это или создать свое!

src/layouts/MarkdownPostLayout.astro

---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />

Избегайте дублирования

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

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

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

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

1. src/pages/posts/learning-astro.md

   ---
   layout: ../../__________/MyMarkdownLayout.astro
   title: "Learning About Markdown in Astro"
   author: Astro Learner
   ____: 2022-08-08
   ---
   I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.

2. src/layouts/MyMarkdownLayout.astro

   ---
   import ____________ from '../components/Footer.astro'
   const { ___________ } = Astro.props
   ---
   <h1>{frontmatter.title}</h1>
   <p>Written by: {frontmatter.______} on {frontmatter.pubDate}</p>
   < _______ />
   <Footer />

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

   1. src/pages/posts/learning-astro.md

      ---
      layout: ../../layouts/MyMarkdownLayout.astro
      title: "Learning About Markdown in Astro"
      author: Astro Learner
      pubDate: 2022-08-08
      ---
      I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.

   2. src/layouts/MyMarkdownLayout.astro

      ---
      import Footer from '../components/Footer.astro'
      const { frontmatter } = Astro.props
      ---
      <h1>{frontmatter.title}</h1>
      <p>Written by: {frontmatter.author} on {frontmatter.pubDate}</p>
      <slot />
      <Footer />

Чек-лист

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

• Я могу добавить свойство макета к записи блога в формате Markdown в ее YAML frontmatter.
• Я могу создать отдельный макет для постов в формате Markdown.
• Я могу использовать значения из frontmatter записи блога в компоненте макета.

Ресурсы

Заголовок раздела Ресурсы

• Макеты Markdown в Astro

• Свойства макета Markdown

• Введение в YAML внешняя ссылка