跳转到内容
Astro Astro

生成标签页面

准备好…

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

动态页面路由

你可以使用 .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

  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 文件的信息，并将其传递给每个页面路由。

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

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

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

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

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

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

重新访问你的现有 Markdown 页面，确保每篇文章的前置数据中都包含一个 tags 数组。即使只有一个标签，它也应该被写成一个数组，例如 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（以忽略重复值）。最后，它将该 Set 转换为一个数组（不重复的），你可以用它来显示页面上的标签列表。

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

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. 返回一个页面路由数组的函数。

  2. 从一个文件中创建多个页面路由的过程。

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

任务清单

相关资源