成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用 Gatsby.js 搭建靜態(tài)博客 4 標(biāo)簽系統(tǒng)

AndroidTraveler / 2482人閱讀

摘要：原文鏈接回顧使用搭建靜態(tài)博客樣式調(diào)整官方自帶標(biāo)簽系統(tǒng)教程，英語過關(guān)可以直接閱讀官方教程。制作頁面展示所有標(biāo)簽重點(diǎn)同樣是查詢部分是標(biāo)簽名，是包含該標(biāo)簽的文章總數(shù)。在之前寫好的文章頁渲染標(biāo)簽就是查詢的時(shí)候多一個(gè)標(biāo)簽字段，然后渲染上，完事。

原文鏈接：https://ssshooter.com/2018-12...

回顧：使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整

官方自帶標(biāo)簽系統(tǒng)教程，英語過關(guān)可以直接閱讀官方教程。

以下說一下重點(diǎn)：

提示：以下所有查詢都可以在 localhost:8000/___graphql 測試

建立標(biāo)簽系統(tǒng)只需要以下步驟：

在 md 文件添加 tags 
---
title: "A Trip To the Zoo"
tags: ["animals", "Chicago", "zoos"]
---
用 graphQL 查詢文章標(biāo)簽 
{
  allMarkdownRemark(
    sort: { order: DESC, fields: [frontmatter___date] }
    limit: 1000
  ) {
    edges {
      node {
        frontmatter {
          path
          tags // 也就添加了這部分
        }
      }
    }
  }
}
制作標(biāo)簽頁面模板（/tags/{tag}）

標(biāo)簽頁面結(jié)構(gòu)不難，與之前的文章頁面差不多，區(qū)別在于標(biāo)簽的查詢：

// 注意 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，渲染標(biāo)簽頁模板 
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)

    // 創(chuàng)建標(biāo)簽頁
    tags.forEach(tag => {
      createPage({
        path: `/tags/${_.kebabCase(tag)}/`,
        component: tagTemplate,
        context: {
          tag,
        },
      })
    })
  })
}

如果你要把標(biāo)簽頁也分頁，多加一個(gè)循環(huán)就行，道理跟主頁分頁都是一樣的：

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,
        },
    })
    })
})

這里僅僅是把查詢到的文章的所有標(biāo)簽都抽取出來，用以生成標(biāo)簽頁，但是標(biāo)簽具體內(nèi)容的獲取依賴于標(biāo)簽頁本身的查詢。

制作 /tags 頁面展示所有標(biāo)簽

重點(diǎn)同樣是查詢部分：

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      limit: 2000
      filter: { frontmatter: { published: { ne: false } } }
    ) {
      group(field: frontmatter___tags) {
        fieldValue
        totalCount
      }
    }
  }
`

fieldValue 是標(biāo)簽名，totalCount 是包含該標(biāo)簽的文章總數(shù)。

在之前寫好的文章頁渲染標(biāo)簽

就是查詢的時(shí)候多一個(gè)標(biāo)簽字段，然后渲染上，完事。

下一步

再次提醒，對于數(shù)據(jù)結(jié)構(gòu)模糊的話直接在 localhost:8000/___graphql 查一下就很清晰了。現(xiàn)在這個(gè) blog 已經(jīng)越來越完善，接下來添加的功能可以說都是非必須的了，下一步先說說頁面部署。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100529.html

相關(guān)文章

  • 創(chuàng)造屬于自己的靜態(tài)博客

    摘要：所以自己定值博客，或許可以讓自己堅(jiān)持更新下去。配合上語雀的文章發(fā)布推送絕配，于是有了這么個(gè)功能專題。 可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言 本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項(xiàng)目搭...

    Channe 評論0 收藏0

  • 使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

    摘要：原文地址靜態(tài)博客之前也有搭建過，不過使用一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過，不過這個(gè)框架搭建博客入門還是比較難的，前置知識點(diǎn)包括和。使用建立項(xiàng)目已經(jīng)自帶了不少插件，但在我的搭建過程中仍然有一些需要自己添加的。 原文地址：https://ssshooter.com/2018-12... 靜態(tài)博客之前也有搭建過，不過使用 Hexo 一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過 Gatsby，不過這個(gè)框架搭...

    mzlogin 評論0 收藏0

  • 使用 Gatsby.js 搭建靜態(tài)博客 6 評論系統(tǒng)

    摘要：原文鏈接方案選擇大家都知道等第三方評論系統(tǒng)的存在。部署自己的的原理就是使用接口把評論更新到你靜態(tài)博客的倉庫，觸發(fā)博客重新部署，在頁面生成評論。這樣得到的博客頁面包括評論部分都是完全靜態(tài)的。配置完畢推送到或本地運(yùn)行。 原文鏈接：https://ssshooter.com/2019-01... 方案選擇 大家都知道 disqus 等第三方評論系統(tǒng)的存在。disqus 幾年前還是挺好使的，但...

    venmos 評論0 收藏0

  • 使用 Gatsby.js 搭建靜態(tài)博客 5 博客上線

    摘要：原文鏈接這真的是最簡單的一步啦使用你的網(wǎng)站是一個(gè)可以幫助你自動部署網(wǎng)站的平臺。詳細(xì)設(shè)置可以在查看，可以進(jìn)行構(gòu)建環(huán)境變量等相關(guān)配置。 原文鏈接：https://ssshooter.com/2018-12... 這真的是最簡單的一步啦～ 使用 netlify deploy 你的網(wǎng)站 netlify 是一個(gè)可以幫助你自動部署網(wǎng)站的平臺。你可以選擇自己買服務(wù)器，運(yùn)行 build 然后推送到自己...

    KnewOne 評論0 收藏0

  • 使用 Gatsby.js 搭建靜態(tài)博客 2 實(shí)現(xiàn)分頁

    摘要：原文地址使用搭建靜態(tài)博客關(guān)鍵文件本文將會介紹如何為初始項(xiàng)目添加分頁功能。不過由于本來就打算重寫樣式，這一塊可以放心刪掉處理完這個(gè)問題你的新博客就實(shí)現(xiàn)分頁功能了下一步是樣式的相關(guān)調(diào)整，留到下一篇繼續(xù)講 原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件 0 && ( ← 上一頁 ...

    william 評論0 收藏0

發(fā)表評論

0條評論

AndroidTraveler

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<