使用 Gatsby.js 搭建静态博客 4 标签系统
内容提要
本文介绍如何用 Gatsby.js 为静态博客添加标签系统：在 Markdown frontmatter 中定义 tags，通过 GraphQL 查询标签，创建 /tags/{tag} 模板页，并在 gatsby-node.js 中提取去重标签、生成标签页（支持分页）；同时建立 /tags 页用 group 展示全部标签及数量，文章页也可渲染标签。
延伸解读
标签页生成的核心逻辑
文章通过 gatsby-node.js 提取所有 Markdown 的 tags，用 lodash 去重后为每个标签创建独立页面。关键点在于标签页模板的查询使用 filter 按标签过滤文章，而标签列表本身由 GraphQL 的 group 字段聚合。这种分离设计让标签页只负责展示特定标签下的文章，标签总览页则负责统计。
分页与路径处理细节
若需标签页分页，文章给出了循环生成多页的示例，路径规则为第一页 /tag/{tag}，后续页 /tag/{tag}/{page}。注意示例中路径前缀是 /tag/ 而非 /tags/，实际使用时需统一。分页上下文传递 currentPage、totalPage、limit、skip 等参数，与主页分页逻辑一致。
调试与数据验证建议
文章多次强调可在 localhost:8000/___graphql 中测试查询，这对理解 GraphQL 返回结构很有帮助。例如 group 查询返回 fieldValue 和 totalCount，分别对应标签名和文章数。在编写模板查询前先验证数据形状，能避免因字段错误导致的构建失败。
Q&A
如何在 Gatsby.js 博客的 Markdown 文件中添加标签？
在 Markdown 文件的 frontmatter 中添加 tags 字段，例如：tags: ["animals", "Chicago", "zoos"]。
Gatsby.js 中如何查询文章的标签？
使用 GraphQL 查询 allMarkdownRemark，在 frontmatter 中获取 tags 字段，例如：frontmatter { path tags }。
如何为每个标签创建单独的页面？
在 gatsby-node.js 中提取所有文章的标签并去重，然后为每个标签调用 createPage，路径为 /tags/{tag}，使用标签页模板，并通过 context 传递 tag 参数。
标签页面模板中的 GraphQL 查询如何过滤出特定标签的文章？
在页面查询中使用 filter 条件：filter: { frontmatter: { tags: { in: [$tag] } } }，其中 $tag 是传入的标签变量。
如何创建一个展示所有标签及其文章数量的页面？
创建 /tags 页面，使用 GraphQL 查询 allMarkdownRemark 的 group(field: frontmatter___tags)，获取 fieldValue（标签名）和 totalCount（文章数），然后渲染。
标签页如何实现分页？
在 gatsby-node.js 中为每个标签计算总页数，然后循环创建分页页面，路径如 /tag/{tag}/{page}，并在 context 中传递 currentPage、totalPage、limit、skip 等参数。
