Создать архив записей блога

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

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

Получить доступ к данным из всех ваших записей сразу, используя Astro.glob()
Отобразить динамически генерируемый список записей на странице вашего блога
Рефакторинг с использованием компонента <BlogPost /> для каждого элемента списка

Динамическое отображение списка сообщений

Добавьте следующий код в blog.astro для возврата информации обо всех ваших файлах Markdown. Astro.glob() вернет массив объектов, один для каждого поста блога.

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Мой учебный блог по Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Здесь я буду писать о моем путешествии обучения Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Пост 1</a></li>
    <li><a href="/posts/post-2/">Пост 2</a></li>
    <li><a href="/posts/post-3/">Пост 3</a></li>
  </ul>
</BaseLayout>

Чтобы генерировать весь список сообщений динамически, используя заголовки и URL-ы сообщений, замените свои отдельные теги <li> следующим кодом Astro:

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Мой учебный блог по Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Здесь я буду писать о моем путешествии обучения Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Пост 1</a></li>
    <li><a href="/posts/post-2/">Пост 2</a></li>
    <li><a href="/posts/post-3/">Пост 3</a></li>

    {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>

Теперь весь ваш список блогов генерируется динамически, путем отображение массива, возвращаемого Astro.glob().

Добавьте новую запись в блог, создав новый файл post-4.md в src/pages/posts/ и добавив немного контента Markdown. Обязательно включите по крайней мере свойства frontmatter, использованные ниже.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: Мой четвертый блог-пост
author: Ученик Astro
description: "Этот пост появится сам по себе!"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "Слово «astro» на фоне иллюстрации планет и звезд."
pubDate: 2022-08-08
tags: ["astro", "успехи"]
---
Этот пост должен появиться с моими другими блог-постами, потому что `Astro.glob()` возвращает список всех моих постов, чтобы создать мой список.

Посетите страницу вашего блога в предварительном просмотре браузера по адресу http://localhost:4321/blog и поищите обновленный список из четырех элементов, включая ваш новый блог-пост!

Задача: Создать компонент BlogPost

Попробуйте самостоятельно внести все необходимые изменения в проект Astro, чтобы вы могли использовать следующий код для генерации списка блог-постов:

<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

Развернуть, чтобы увидеть шаги

Создайте новый компонент в src/components/.
Показать имя файла
```
BlogPost.astro
```
Напишите строку кода в вашем компоненте, чтобы он мог принимать title и url в качестве Astro.props.
Показать код
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
Добавьте шаблонизацию, используемую для создания каждого элемента в списке вашего блога.
Показать код
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

Импортируйте новый компонент на вашу страницу блога.

Показать код

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Мой учебный блог по Astro";
---

Проверьте себя: посмотрите окончательный код компонента.

Показать код

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Мой учебный блог по Astro"
---
<BaseLayout pageTitle={pageTitle}>
  <p>Здесь я буду писать о моем путешествии обучения Astro.</p>
  <ul>
    {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

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

Если ваш компонент Astro содержит следующую строку кода:

---
const myPosts = await Astro.glob('../pages/posts/*.md');
---

Выберите синтаксис, который вы могли бы написать для представления:

Заголовка вашего третьего блог-поста.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Первый пост!!</a>
Ссылки на URL вашего первого блог-поста.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Первый пост!!</a>
Компонент для каждого поста, отображающий дату его последнего обновления.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Первый пост!!</a>