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

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

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

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

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

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

Заголовок раздела Динамическое отображение списка сообщений

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

    src/pages/blog.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>
      </ul>
    </BaseLayout>

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

    src/pages/blog.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().

  3. Добавьте новую запись в блог, создав новый файл 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()` возвращает список всех моих постов, чтобы создать мой список.

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

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

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

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

src/pages/blog.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>
Развернуть, чтобы увидеть шаги

  1. Создайте новый компонент в src/components/.

    Показать имя файла
    BlogPost.astro

  2. Напишите строку кода в вашем компоненте, чтобы он мог принимать title и url в качестве Astro.props.

    Показать код
    src/components/BlogPost.astro
    ---
    const { title, url } = Astro.props;
    ---

  3. Добавьте шаблонизацию, используемую для создания каждого элемента в списке вашего блога.

    Показать код
    src/components/BlogPost.astro
    <li><a href={url}>{title}</a></li>

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

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

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

    Показать код
    src/components/BlogPost.astro
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    src/pages/blog.astro
    ---
    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. Заголовка вашего третьего блог-поста.

  2. Ссылки на URL вашего первого блог-поста.

  3. Компонент для каждого поста, отображающий дату его последнего обновления.

Чек-лист

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

Ресурсы

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