使用 Gatsby.js 搭建静态博客 4 标签系统

原文链接：https://ssshooter.com/2018-12…回顾：使用 Gatsby.js 搭建静态博客 3 样式调整官方自带标签系统教程，英语过关可以直接阅读官方教程。以下说一下重点：提示：以下所有查询都可以在 localhost:8000/___graphql 测试建立标签系统只需要以下步骤：在 md 文件添加 tags—title: “A Trip To the Zoo"tags: [“animals”, “Chicago”, “zoos”]—用 graphQL 查询文章标签{ allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] } limit: 1000 ) { edges { node { frontmatter { path tags // 也就添加了这部分 } } } }}制作标签页面模板（/tags/{tag}）标签页面结构不难，与之前的文章页面差不多，区别在于标签的查询：// 注意 filterexport const pageQuery = graphql query($tag: String) { allMarkdownRemark( limit: 2000 sort: { fields: [frontmatter___date], order: DESC } filter: { frontmatter: { tags: { in: [$tag] } } } ) { totalCount edges { node { frontmatter { title path } } } } }修改 gatsby-node.js，渲染标签页模板const path = require(“path”)const _ = require(“lodash”)exports.createPages = ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.resolve(“src/templates/blog.js”) const tagTemplate = path.resolve(“src/templates/tags.js”) return graphql( { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] } limit: 2000 ) { edges { node { frontmatter { path tags } } } } } ).then(result => { if (result.errors) { return Promise.reject(result.errors) } const posts = result.data.allMarkdownRemark.edges posts.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: blogPostTemplate, }) }) let tags = [] // 获取所有文章的 tags .each(posts, edge => { if (.get(edge, “node.frontmatter.tags”)) { tags = tags.concat(edge.node.frontmatter.tags) } }) // 去重 tags = .uniq(tags) // 创建标签页 tags.forEach(tag => { createPage({ path: /tags/${_.kebabCase(tag)}/, component: tagTemplate, context: { tag, }, }) }) })}如果你要把标签页也分页，多加一个循环就行，道理跟主页分页都是一样的：tags.forEach(tag => { const total = tag.totalCount const numPages = Math.ceil(total / postsPerPage) Array.from({ length: numPages }).forEach((, i) => { createPage({ path: i === 0 ? /tag/${tag.fieldValue} : /tag/${tag.fieldValue}/${i + 1}, component: tagTemplate, context: { tag: tag.fieldValue, currentPage: i + 1, totalPage: numPages, limit: postsPerPage, skip: i * postsPerPage, }, }) })})这里仅仅是把查询到的文章的所有标签都抽取出来，用以生成标签页，但是标签具体内容的获取依赖于标签页本身的查询。制作 /tags 页面展示所有标签重点同样是查询部分：export const pageQuery = graphql query { site { siteMetadata { title } } allMarkdownRemark( limit: 2000 filter: { frontmatter: { published: { ne: false } } } ) { group(field: frontmatter___tags) { fieldValue totalCount } } }fieldValue 是标签名，totalCount 是包含该标签的文章总数。在之前写好的文章页渲染标签就是查询的时候多一个标签字段，然后渲染上，完事。下一步再次提醒，对于数据结构模糊的话直接在 localhost:8000/___graphql 查一下就很清晰了。现在这个 blog 已经越来越完善，接下来添加的功能可以说都是非必须的了，下一步先说说页面部署。