生成标签页面

你可以使用 .astro 文件创建整套动态页面，这些文件需要向外暴露一个 getStaticPaths() 函数。

1. 创建一个新文件：src/pages/tags/[tag].astro。（你需要创建一个新文件夹。）注意文件名（[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>Posts tagged with {tag}</p>
   </BaseLayout>

   getStaticPaths 函数返回一个页面路由数组，这些页面将使用文件中定义的相同模板。

2. 如果你已经自定义了博客文章，用你自己的文章中使用的标签替换各个标签值（例如 “astro”、“successes”、“community” 等）。

3. 确保每篇博客文章至少包含一个标签，以数组的形式编写，例如 tags: ["blogging"]。

4. 在浏览器中访问 localhost:3000/tags/astro，你应该能看到一个页面，它是从 [tag].astro 动态生成的。检查是否还为每个标签创建了页面，例如 /tags/successes、/tags/community、/tags/learning%20in%20public 等，或者你自定义的标签。你可能需要先退出并重新启动开发服务器才能看到这些新页面。

1. 在你的 getStaticPaths() 函数中添加以下 props，以便使所有博客文章的数据对每个页面路由可用。

   确保为数组中的每个路由都添加新的 props，并将这些 props 在函数之外的组件模板中可用。

   ---
   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. 将文章列表筛选为仅包含页面所属标签的文章。

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

3. 现在，你可以更新 HTML 模板以显示包含页面所属标签的每篇博客文章列表。将以下代码添加到 [tag].astro：

   <BaseLayout pageTitle={tag}>
     <p>Posts tagged with {tag}</p>
     <ul>
       {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
     </ul>
   </BaseLayout>

4. 你甚至可以将此代码重构为使用 <BlogPost /> 组件！（不要忘记在 [tag].astro 的顶部导入该组件。）

   <BaseLayout pageTitle={tag}>
     <p>Posts tagged with {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. 在浏览器中的预览中查看各个标签页面，现在你应该能看到包含特定标签的所有博客文章列表。

现在，你的标签页面在 [tag].astro 中静态定义。如果你在博客文章中添加了新标签，你还必须重新访问该页面并更新你的页面路由。

以下示例显示了如何用新的代码替换此页面上的代码，该代码将自动查找并为博客页面上使用的每个标签生成页面。

重新访问你的现有 Markdown 页面，确保每篇文章的前置数据中都包含一个 tags 数组。即使只有一个标签，它也应该被写成一个数组，例如 tags: ["blogging"]。

添加以下代码，以提供一个包含博客文章中使用的每个标签的列表。

---
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())];

现在，你有一个名为 uniqueTags 的数组，其中包含元素项 "astro"、"successes"、"community"、"blogging"、"setbacks"、"learning in public"。

  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（要传递给这些页面的数据）。之前，你为你所知道的每个博客中使用的标签名称定义了一个参数，并将整个文章列表作为 props 传递给每个页面。

现在，你可以使用 uniqueTags 数组自动生成此对象列表，以定义每个参数。

现在，在将文章列表作为 props 发送到每个页面之前，应在此之前对其进行过滤。确保删除以前过滤文章的代码行，并更新 HTML 模板以使用 posts 而不是 filteredPosts。

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 组件应该是这样的：

---
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>包含「{tag}」标签的文章</p>
  <ul>
    {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
  </ul>
</BaseLayout>

现在，你应该能够在浏览器预览中访问任何一个标签页面。

在浏览器中导航到 localhost:3000/tags/community，你应该看到一个包含标签为 community 的博文列表。同样地，localhost:3000/tags/learning%20in%20public 应该显示一个包含标签为 learning in public 的博文列表。

在接下来的部分，你将创建导航链接到这些页面。

• Astro 中的动态页面路由
• getStaticPaths() API 文档