生成标签页面

准备好…

• 创建一个页面以生成多个页面
• 指定要构建的页面路由，并为每个页面传递各自的属性

动态页面路由

段落标题 动态页面路由

你可以使用 .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>Posts tagged with {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

段落标题 在动态路由中使用 props

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

   确保为数组中的每个路由都添加新的 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>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 的顶部导入该组件。）

   src/pages/tags/[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. 在浏览器中的预览中查看各个标签页面，现在你应该能看到包含特定标签的所有博客文章列表。

分析代码

段落标题 分析代码

对于以下每个问题，请指出代码是在 getStaticPath() 函数的内部还是在其外部编写的。

1. Astro.glob() 调用以接收有关所有 .md 文件的信息，并将其传递给每个页面路由。

   1. 在 getStaticPaths 内部
   2. 在 getStaticPaths 外部

   提交

2. getStaticPaths() 要生成（返回的）路由列表的代码。

   1. 在 getStaticPaths 内部
   2. 在 getStaticPaths 外部

   提交

3. 用于在 HTML 模板中使用的 props 和 params 的值。

   1. 在 getStaticPaths 内部
   2. 在 getStaticPaths 外部

   提交

要点

如果需要构建页面路由的信息，请将其编写在 getStaticPaths() 内部。

要在页面路由的 HTML 模板中接收信息，请将其编写在 getStaticPaths() 外部。

进阶 JavaScript：从现有标签生成页面

段落标题 进阶 JavaScript：从现有标签生成页面

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

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

注意

即使看起来有挑战性，你也可以尝试按照步骤自己构建此功能！如果你现在不想跟着编写所需的 JavaScript 代码，可以直接跳到代码的最终版本，并将其直接用于你的项目中，替换现有内容。

1. 检查所有博客文章是否包含标签

段落标题 1. 检查所有博客文章是否包含标签

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

2. 创建包含所有现有标签的数组

段落标题 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（以忽略重复值）。最后，它将该 Set 转换为一个数组（不重复的），你可以用它来显示页面上的标签列表。

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

3. 替换 getStaticPaths 函数的 return 值

段落标题 3. 替换 getStaticPaths 函数的 return 值

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

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

现在，在将文章列表作为 props 发送到每个页面之前，应在此之前对其进行过滤。确保删除以前过滤文章的代码行，并更新 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>包含「{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. 从一个文件中创建多个页面路由的过程。

   1. params
   2. 动态路由
   3. getStaticPaths()
   4. props

   提交

3. 定义动态生成的页面路由名称的值。

   1. params
   2. dynamic routing
   3. getStaticPaths()
   4. props

   提交

任务清单

段落标题 任务清单

• 我可以动态生成页面。
• 我可以将 props 传递给每个页面路由。

相关资源

段落标题 相关资源

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