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

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

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

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

  • Создать новый макет записи блога для ваших файлов 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). Проверьте в вашем браузере, что макет также применен к этим постам.

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

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

Задача: Идентифицируйте элементы, общие для каждого поста блога, и используйте 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 />

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

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

Вы можете разобраться, что должно быть в пробелах, чтобы следующие два компонента вместе создали рабочий код 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 />

Чек-лист

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

Ресурсы

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