本文介绍如何用 Gatsby.js 为静态博客添加标签系统:在 Markdown frontmatter 中定义 tags,通过 GraphQL 查询标签,创建 /tags/{tag} 模板页,并在 gatsby-node.js 中提取去重标签、生成标签页(支持分页);同时建立 /tags 页用 group 展示全部标签及数量,文章页也可渲染标签。
本文介绍用 Gatsby.js 搭建静态博客的关键文件:gatsby-node.js 通过 GraphQL 查询 Markdown 并调用 createPage 生成页面;模板文件(如 blog-post.js)分为视图组件和 pageQuery 查询,注入的上下文变量可在 props 中使用;gatsby-config.js 用于管理插件。整体流程为读取配置、查询资源、创建页面并注入数据。
完成下面两步后,将自动完成登录并继续当前操作。