生成标签页

Get ready to…

• 创建一个页面生成多个页面

• 指定要构建的页面路由，并传递每个页面自己的属性

动态页面路由

Section titled 动态页面路由

¥Dynamic page routing

你可以使用导出 getStaticPaths() 函数的 .astro 文件动态创建整套页面。

¥You can create entire sets of pages dynamically using .astro files that export a getStaticPaths() function.

动态创建页面

Section titled 动态创建页面

¥Create pages dynamically

1. Create a new file at src/pages/tags/[tag].astro. (You will have to create a new folder.) Notice that the file name ([tag].astro) uses square brackets. Paste the following code into the file:

   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>

   The getStaticPaths function returns an array of page routes, and all of the pages at those routes will use the same template defined in the file.

2. If you have customized your blog posts, then replace the individual tag values (e.g. “astro”, “successes”, “community”, etc.) with the tags used in your own posts.

3. Make sure that every blog post contains at least one tag, written as an array, e.g. tags: ["blogging"].

4. Visit http://localhost:4321/tags/astro in your browser preview and you should see a page, generated dynamically from [tag].astro. Check that you also have pages created for each of your tags at /tags/successes, /tags/community, and /tags/learning%20in%20public, etc., or at each of your custom tags. You may need to first quit and restart the dev server to see these new pages.

在动态路由中使用 props

Section titled 在动态路由中使用 props

¥Use props in dynamic routes

1. Add the following props to your getStaticPaths() function in order to make data from all your blog posts available to each page route.

   Be sure to give each route in your array the new props, and then make those props available to your component template outside of your function.

   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. Filter your list of posts to only include posts that contain the page’s own tag.

   src/pages/tags/[tag].astro

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

3. Now you can update your HTML template to show a list of each blog post containing the page’s own tag. Add the following code to [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. You can even refactor this to use your <BlogPost /> component instead! (Don’t forget to import this component at the top of [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. Check your browser preview for your individual tag pages, and you should now see a list of all of your blog posts containing that particular tag.

分析模式

Section titled 分析模式

¥Analyze the pattern

对于以下每一项，请说明代码是在 getStaticPaths() 函数内部还是外部编写的。

¥For each of the following, state whether the code is written inside the getStaticPaths() function, or outside of it.

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

1. inside getStaticPaths
2. outside getStaticPaths

Submit

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

1. inside getStaticPaths
2. outside getStaticPaths

Submit

3. 接收到的 props 和 params 值将在 HTML 模板中使用。

1. inside getStaticPaths
2. outside getStaticPaths

Submit

Takeaway

If you need information to construct the page routes, write it inside getStaticPaths().

To receive information in the HTML template of a page route, write it outside getStaticPaths().

高级 JavaScript:从现有标签生成页面

Section titled 高级 JavaScript:从现有标签生成页面

¥Advanced JavaScript: Generate pages from existing tags

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

¥Your tag pages are now defined statically in [tag].astro. If you add a new tag to a blog post, you will also have to revisit this page and update your page routes.

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

¥The following example shows how to replace your code on this page with code that will automatically look for, and generate pages for, each tag used on your blog pages.

Note

Even if it looks challenging, you can try following along with the steps to build this function yourself! If you don’t want to walk through the JavaScript required right now, you can skip ahead to the finished version of the code and use it directly in your project, replacing the existing content.

1. Check that all your blog posts contain tags

   Revisit each of your existing Markdown pages and ensure that every post contains a tags array in its frontmatter. Even if you only have one tag, it should still be written as an array, e.g. tags: ["blogging"].

2. Create an array of all your existing tags

   Add the following code to provide you with a list of every tag used in your blog posts.

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

   Tell me what this line of code is doing in more detail!

   It’s OK if this isn’t something you would have written yourself yet!

   It goes through each Markdown post, one by one, and combines each array of tags into one single larger array. Then, it makes a new Set from all the individual tags it found (to ignore repeated values). Finally, it turns that set into an array (with no duplications), that you can use to show a list of tags on your page.

   You now have an array uniqueTags with element items "astro", "successes", "community", "blogging", "setbacks", "learning in public"

3. Replace the return value of the getStaticPaths function

   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 },
     };
   });

4. A getStaticPaths function should always return a list of objects containing params (what to call each page route) and optionally any props (data that you want to pass to those pages). Earlier, you defined each tag name that you knew was used in your blog and passed the entire list of posts as props to each page.

   Now, you generate this list of objects automatically using your uniqueTags array to define each parameter.

   And, now the list of all blog posts is filtered before it is sent to each page as props. Be sure to remove the previous line of code filtering the posts, and update your HTML template to use posts instead of 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>

最终代码示例

Section titled 最终代码示例

¥Final code sample

要检查你的工作，或者如果你只是想将完整、正确的代码复制到 [tag].astro 中，你的 Astro 组件应如下所示：

¥To check your work, or if you just want complete, correct code to copy into [tag].astro, here is what your Astro component should look like:

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>

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

¥Now, you should be able to visit any of your tag pages in your browser preview.

导航到 http://localhost:4321/tags/community，你应该会看到仅包含带有标签 community 的博客文章的列表。同样，http://localhost:4321/tags/learning%20in%20public 应该显示标记为 learning in public 的博客文章列表。

¥Navigate to http://localhost:4321/tags/community and you should see a list of only your blog posts with the tag community. Similarly http://localhost:4321/tags/learning%20in%20public should display a list of the blog posts tagged learning in public.

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

¥In the next section, you will create navigation links to these pages.

测试你的知识

Section titled 测试你的知识

¥Test your knowledge

选择与描述相符的术语。

¥Choose the term that matches the description.

1. 返回页面路由数组的函数。

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

Submit

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

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

Submit

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

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

Submit

清单

Section titled 清单

¥Checklist

• 我可以动态生成页面。

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

资源

Section titled 资源

¥Resources

• Astro 中的动态页面路由

• getStaticPaths() API 文档