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

AndroidTraveler 发布于2019-08-23 14:23 / 2271人阅读

摘要：原文链接回顾使用搭建静态博客样式调整官方自带标签系统教程，英语过关可以直接阅读官方教程。制作页面展示所有标签重点同样是查询部分是标签名，是包含该标签的文章总数。在之前写好的文章页渲染标签就是查询的时候多一个标签字段，然后渲染上，完事。

原文链接：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}）

标签页面结构不难，与之前的文章页面差不多，区别在于标签的查询：

// 注意 filter
export 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 已经越来越完善，接下来添加的功能可以说都是非必须的了，下一步先说说页面部署。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100529.html

创造属于自己的静态博客

摘要：所以自己定值博客，或许可以让自己坚持更新下去。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。可以前往我的博客阅读：https://ssshooter.com/2019-02... 0 前言本文并不是从 0 开始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭...

Channe 2019-08-23 15:05 评论0 收藏0
使用 Gatsby.js 搭建静态博客 1 关键文件

摘要：原文地址静态博客之前也有搭建过，不过使用一键生成的，其实当时也有考虑过，不过这个框架搭建博客入门还是比较难的，前置知识点包括和。使用建立项目已经自带了不少插件，但在我的搭建过程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 静态博客之前也有搭建过，不过使用 Hexo 一键生成的，其实当时也有考虑过 Gatsby，不过这个框架搭...

mzlogin 2019-08-23 13:58 评论0 收藏0
使用 Gatsby.js 搭建静态博客 6 评论系统

摘要：原文链接方案选择大家都知道等第三方评论系统的存在。部署自己的的原理就是使用接口把评论更新到你静态博客的仓库，触发博客重新部署，在页面生成评论。这样得到的博客页面包括评论部分都是完全静态的。配置完毕推送到或本地运行。原文链接：https://ssshooter.com/2019-01... 方案选择大家都知道 disqus 等第三方评论系统的存在。disqus 几年前还是挺好使的，但...

venmos 2019-08-23 14:48 评论0 收藏0
使用 Gatsby.js 搭建静态博客 5 博客上线

摘要：原文链接这真的是最简单的一步啦使用你的网站是一个可以帮助你自动部署网站的平台。详细设置可以在查看，可以进行构建环境变量等相关配置。原文链接：https://ssshooter.com/2018-12... 这真的是最简单的一步啦～使用 netlify deploy 你的网站 netlify 是一个可以帮助你自动部署网站的平台。你可以选择自己买服务器，运行 build 然后推送到自己...

KnewOne 2019-08-23 14:26 评论0 收藏0
使用 Gatsby.js 搭建静态博客 2 实现分页

摘要：原文地址使用搭建静态博客关键文件本文将会介绍如何为初始项目添加分页功能。不过由于本来就打算重写样式，这一块可以放心删掉处理完这个问题你的新博客就实现分页功能了下一步是样式的相关调整，留到下一篇继续讲原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 0 && ( ← 上一页 ...

william 2019-08-23 13:59 评论0 收藏0