Пропустить до содержимого
Astro Astro

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

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

Приготовьтесь к...

  • Создать новый макет для постов блога на основе 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>Написал {frontmatter.author}</p>
    <slot />

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

    src/pages/posts/post-1.md
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Мой первый пост в блоге'
    pubDate: 2022-07-01
    description: 'Это первый пост в моем новом блоге на Astro.'
    author: 'Astro Learner'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'Полный логотип Astro.'
    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
Опубликовано: 2022-07-01


Добро пожаловать в мой новый блог о изучении Astro! Здесь я буду делиться своим путем обучения по мере создания нового сайта.
src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Опубликовано: {frontmatter.pubDate.slice(0,10)}</p>
<p>Написал {frontmatter.author}</p>
<slot />

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

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

src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1> {frontmatter.title}</h1>
<p>{frontmatter.pubDate.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: "Learning About Markdown in Astro"
    author: Astro Learner
    ____: 2022-08-08
    ---
    Я так много узнал сегодня! Astro позволяет мне писать на Markdown, но также использовать переменные из frontmatter. Я даже могу получить доступ к этим значениям в компоненте макета Astro.
  2. src/layouts/MarkdownLayout.astro
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Написал:{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/MarkdownLayout.astro
      ---
      import Footer from '../components/Footer.astro'
      const { frontmatter } = Astro.props
      ---
      <h1>{frontmatter.title}</h1>
      <p>Написал:{frontmatter.author } on {frontmatter.pubDate}</p>
      < slot />
      <Footer />

Чек-лист

Ресурсы