Создание страниц тегов

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

• Создайть страницу для генерации нескольких страниц
• Указать, какие маршруты страниц следует построить, и передать каждой странице свои собственные свойства

Динамическая маршрутизация страниц

Вы можете динамически создавать целые наборы страниц с помощью файлов .astro, которые экспортируют функцию getStaticPaths().

Создание страниц динамически

1. Создайте новый файл по адресу src/pages/tags/[tag].astro. (Вам придется создать новую папку.) Обратите внимание, что имя файла ([tag].astro) использует квадратные скобки. Вставьте следующий код в файл:

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     return [
       { params: { tag: "astro" } },
       { params: { tag: "successes" } },
       { params: { tag: "community" } },
       { params: { tag: "blogging" } },
       { params: { tag: "setbacks" } },
       { params: { tag: "learning in public" } },
     ];
   }
   
   const { tag } = Astro.params;
   ---
   <BaseLayout pageTitle={tag}>
     <p>Посты с тегом {tag}</p>
   </BaseLayout>

   Функция getStaticPaths возвращает массив маршрутов страниц, и все страницы по этим маршрутам будут использовать один и тот же шаблон, определенный в файле.

2. Если вы настроили свои блог-посты, замените отдельные значения тегов (например, “astro”, “successes”, “community” и т.д.) на теги, используемые в ваших собственных постах.

3. Убедитесь, что каждый блог-пост содержит хотя бы один тег, написанный в виде массива, например, tags: ["blogging"].

4. Перейдите по адресу http://localhost:4321/tags/astro в предварительном просмотре вашего браузера, и вы должны увидеть страницу, созданную динамически из [tag].astro. Проверьте, созданы ли у вас страницы для каждого из ваших тегов по адресам /tags/successes, /tags/community и /tags/learning%20in%20public и т.д., или для каждого из ваших пользовательских тегов. Возможно, вам придется сначала выйти и перезапустить сервер разработки, чтобы увидеть эти новые страницы.

Использование props в динамических маршрутах

1. Добавьте следующие props в вашу функцию getStaticPaths(), чтобы сделать данные из всех ваших блог-постов доступными для каждого маршрута страницы.

   Обязательно предоставьте каждому маршруту в вашем массиве новые props, а затем сделайте эти props доступными для вашего шаблона компонента за пределами вашей функции.

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     const allPosts = await Astro.glob('../posts/*.md');
   
     return [
       {params: {tag: "astro"}, props: {posts: allPosts}},
       {params: {tag: "successes"}, props: {posts: allPosts}},
       {params: {tag: "community"}, props: {posts: allPosts}},
       {params: {tag: "blogging"}, props: {posts: allPosts}},
       {params: {tag: "setbacks"}, props: {posts: allPosts}},
       {params: {tag: "learning in public"}, props: {posts: allPosts}}
     ]
   }
   
   const { tag } = Astro.params;
   const { posts } = Astro.props;
   ---

2. Отфильтруйте ваш список постов, чтобы включить только те посты, которые содержат собственный тег страницы.

   /src/pages/tags/[tag].astro

   ---
   const { tag } = Astro.params;
   const { posts } = Astro.props;
   const filteredPosts = posts.filter((post) => post.frontmatter.tags.includes(tag));
   ---

3. Теперь вы можете обновить ваш HTML-шаблон, чтобы показать список каждого блог-поста, содержащего собственный тег страницы. Добавьте следующий код в [tag].astro:

   src/pages/tags/[tag].astro

   <BaseLayout pageTitle={tag}>
     <p>Посты с тегом {tag}</p>
     <ul>
       {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
     </ul>
   </BaseLayout>

4. Вы даже можете рефакторить этот код, чтобы использовать ваш компонент <BlogPost /> вместо этого! (Не забудьте импортировать этот компонент в начале файла [tag].astro.)

   src/pages/tags/[tag].astro

   <BaseLayout pageTitle={tag}>
     <p>Посты с тегом {tag}</p>
     <ul>
       {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
       {filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
     </ul>
   </BaseLayout>

5. Проверьте предварительный просмотр в вашем браузере для ваших отдельных страниц с тегами, и теперь вы должны увидеть список всех ваших блог-постов, содержащих этот конкретный тег.

Анализируйте шаблон

Для каждого из следующих укажите, написан ли код внутри функции getStaticPath(), или вне её.

1. Вызов Astro.glob() для получения информации обо всех ваших файлах .md, которую нужно передать каждому маршруту страницы.

   1. внутри getStaticPaths
   2. вне getStaticPaths

   Подтвердить

2. Список маршрутов, которые должны быть сгенерированы (возвращены) getStaticPaths()

   1. внутри getStaticPaths
   2. вне getStaticPaths

   Подтвердить

3. Полученные значения props и params, которые будут использоваться в HTML-шаблоне.

   1. внутри getStaticPaths
   2. вне getStaticPaths

   Подтвердить

Вывод

Если вам нужна информация для создания маршрутов страниц, напишите её внутри getStaticPaths().

Чтобы получить информацию в HTML-шаблоне маршрута страницы, напишите её вне getStaticPaths().

Продвинутый JavaScript: Генерация страниц из существующих тегов

Теперь ваши страницы с тегами статически определены в [tag].astro. Если вы добавите новый тег к сообщению в блоге, вам также придется вернуться на эту страницу и обновить маршруты страниц.

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

Заметка

Даже если это выглядит сложно, вы можете попробовать следовать инструкциям и самостоятельно построить эту функцию! Если вы не хотите сейчас разбираться с необходимым JavaScript, вы можете перейти к готовому примеру кода и использовать его напрямую в своем проекте, заменяя существующий контент.

1. Убедитесь, что все ваши блог-посты содержат теги

Пересмотрите каждую из ваших существующих страниц Markdown и убедитесь, что каждый пост содержит массив tags в его frontmatter. Даже если у вас только один тег, он все равно должен быть записан как массив, например, tags: ["blogging"].

2. Создайте массив со всеми вашими существующими тегами

Добавьте следующий код, чтобы получить список каждого тега, используемого в ваших блог-постах.

src/pages/tags/[tag].astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
  const allPosts = await Astro.glob('../posts/*.md');

  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];

Расскажите мне подробнее, что делает эта строчка кода!

Все в порядке, если это не то, что вы бы сами написали!

Он проходит через каждый пост в Markdown, по одному, и объединяет каждый массив тегов в один большой массив. Затем он создает новый Set из всех найденных индивидуальных тегов (чтобы игнорировать повторяющиеся значения). Наконец, он преобразует этот набор в массив (без дублирования), который вы можете использовать для отображения списка тегов на вашей странице.

Теперь у вас есть массив uniqueTags с элементами "astro", "successes", "community", "blogging", "setbacks", "learning in public"

3. Замените значение return функции getStaticPaths

src/pages/tags/[tag].astro

  return [
        {params: {tag: "astro"}, props: {posts: allPosts}},
        {params: {tag: "successes"}, props: {posts: allPosts}},
        {params: {tag: "community"}, props: {posts: allPosts}},
        {params: {tag: "blogging"}, props: {posts: allPosts}},
        {params: {tag: "setbacks"}, props: {posts: allPosts}},
        {params: {tag: "learning in public"}, props: {posts: allPosts}}
      ]

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });

Функция getStaticPaths всегда должна возвращать список объектов, содержащих params (как называть каждый маршрут страницы) и, возможно, любые props (данные, которые вы хотите передать на эти страницы). Ранее вы определили каждое имя тега, которое использовалось в вашем блоге, и передали весь список постов как свойства на каждую страницу.

Теперь вы генерируете этот список объектов автоматически, используя ваш массив uniqueTags для определения каждого параметра.

И теперь список всех блог-постов фильтруется до его отправки на каждую страницу в качестве свойств. Обязательно удалите предыдущую строку кода, фильтрующую посты, и обновите ваш HTML-шаблон, чтобы использовать posts вместо filteredPosts.

src/pages/tags/[tag].astro

const { tag } = Astro.params;
const { posts } = Astro.props;
const filteredPosts = posts.filter((post) => post.frontmatter.tags.includes(tag));
---
<!-- -->
<ul>
    {filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
    {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>

Пример окончательного кода

Чтобы проверить свою работу, или если вы просто хотите скопировать полный, правильный код в [tag].astro, то вот как должен выглядеть ваш компонент Astro:

src/pages/tags/[tag].astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPost from '../../components/BlogPost.astro'

export async function getStaticPaths() {
  const allPosts = await Astro.glob('../posts/*.md');

  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

const { tag } = Astro.params;
const { posts } = Astro.props;
---
<BaseLayout pageTitle={tag}>
  <p>Posts tagged with {tag}</p>
  <ul>
    {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
  </ul>
</BaseLayout>

Теперь вы должны быть в состоянии посетить любую из ваших страниц с тегами в предварительном просмотре браузера.

Перейдите к http://localhost:4321/tags/community и вы должны увидеть список только ваших блог-постов с тегом community. Аналогично http://localhost:4321/tags/learning%20in%20public должен отображать список блог-постов с тегом learning in public.

В следующем разделе вы создадите навигационные ссылки на эти страницы.

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

Выберите термин, который соответствует описанию.

1. Функция, которая возвращает массив маршрутов страниц.

   1. params
   2. динамическая маршрутизация
   3. getStaticPaths()
   4. props

   Подтвердить

2. Процесс создания нескольких маршрутов страниц из одного файла в Astro.

   1. params
   2. динамическая маршрутизация
   3. getStaticPaths()
   4. props

   Подтвердить

3. Значение, которое определяет имя маршрута страницы, генерируемого динамически.

   1. params
   2. динамическая маршрутизация
   3. getStaticPaths()
   4. props

   Подтвердить

Чек-лист

• Я могу генерировать страницы динамически.
• Я могу передавать props каждому маршруту страницы.

Ресурсы

• Динамическая маршрутизация страниц в Astro

• Документация API getStaticPaths() (EN)