使用 Gatsby.js 搭建靜態部落格 4 標籤系統

ssshooter發表於2019-02-16
JS

原文連結：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 已經越來越完善，接下來新增的功能可以說都是非必須的了，下一步先說說頁面部署。

相關文章