資訊專欄INFORMATION COLUMN
摘要：原文鏈接回顧使用搭建靜態(tài)博客樣式調(diào)整官方自帶標(biāo)簽系統(tǒng)教程，英語(yǔ)過(guò)關(guān)可以直接閱讀官方教程。制作頁(yè)面展示所有標(biāo)簽重點(diǎn)同樣是查詢部分是標(biāo)簽名，是包含該標(biāo)簽的文章總數(shù)。在之前寫好的文章頁(yè)渲染標(biāo)簽就是查詢的時(shí)候多一個(gè)標(biāo)簽字段，然后渲染上，完事。
原文鏈接：https://ssshooter.com/2018-12...
回顧：使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整
官方自帶標(biāo)簽系統(tǒng)教程，英語(yǔ)過(guò)關(guān)可以直接閱讀官方教程。
以下說(shuō)一下重點(diǎn)：
提示：以下所有查詢都可以在 localhost:8000/___graphql 測(cè)試
建立標(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)簽頁(yè)面模板（/tags/{tag}）
標(biāo)簽頁(yè)面結(jié)構(gòu)不難，與之前的文章頁(yè)面差不多，區(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)簽頁(yè)模板
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)簽頁(yè)
tags.forEach(tag => {
createPage({
path: `/tags/${_.kebabCase(tag)}/`,
component: tagTemplate,
context: {
tag,
},
})
})
})
}
如果你要把標(biāo)簽頁(yè)也分頁(yè)，多加一個(gè)循環(huán)就行，道理跟主頁(yè)分頁(yè)都是一樣的：
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)簽都抽取出來(lái)，用以生成標(biāo)簽頁(yè)，但是標(biāo)簽具體內(nèi)容的獲取依賴于標(biāo)簽頁(yè)本身的查詢。
制作 /tags 頁(yè)面展示所有標(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ù)。
在之前寫好的文章頁(yè)渲染標(biāo)簽就是查詢的時(shí)候多一個(gè)標(biāo)簽字段，然后渲染上，完事。
下一步再次提醒，對(duì)于數(shù)據(jù)結(jié)構(gòu)模糊的話直接在 localhost:8000/___graphql 查一下就很清晰了?，F(xiàn)在這個(gè) blog 已經(jīng)越來(lái)越完善，接下來(lái)添加的功能可以說(shuō)都是非必須的了，下一步先說(shuō)說(shuō)頁(yè)面部署。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100529.html
摘要：所以自己定值博客，或許可以讓自己堅(jiān)持更新下去。配合上語(yǔ)雀的文章發(fā)布推送絕配，于是有了這么個(gè)功能專題。 可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言 本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項(xiàng)目搭...
摘要：原文地址靜態(tài)博客之前也有搭建過(guò)，不過(guò)使用一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過(guò)，不過(guò)這個(gè)框架搭建博客入門還是比較難的，前置知識(shí)點(diǎn)包括和。使用建立項(xiàng)目已經(jīng)自帶了不少插件，但在我的搭建過(guò)程中仍然有一些需要自己添加的。 原文地址：https://ssshooter.com/2018-12... 靜態(tài)博客之前也有搭建過(guò)，不過(guò)使用 Hexo 一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過(guò) Gatsby，不過(guò)這個(gè)框架搭...
摘要：原文鏈接方案選擇大家都知道等第三方評(píng)論系統(tǒng)的存在。部署自己的的原理就是使用接口把評(píng)論更新到你靜態(tài)博客的倉(cāng)庫(kù)，觸發(fā)博客重新部署，在頁(yè)面生成評(píng)論。這樣得到的博客頁(yè)面包括評(píng)論部分都是完全靜態(tài)的。配置完畢推送到或本地運(yùn)行。 原文鏈接：https://ssshooter.com/2019-01... 方案選擇 大家都知道 disqus 等第三方評(píng)論系統(tǒng)的存在。disqus 幾年前還是挺好使的，但...
摘要：原文鏈接這真的是最簡(jiǎn)單的一步啦使用你的網(wǎng)站是一個(gè)可以幫助你自動(dòng)部署網(wǎng)站的平臺(tái)。詳細(xì)設(shè)置可以在查看，可以進(jìn)行構(gòu)建環(huán)境變量等相關(guān)配置。 原文鏈接：https://ssshooter.com/2018-12... 這真的是最簡(jiǎn)單的一步啦～ 使用 netlify deploy 你的網(wǎng)站 netlify 是一個(gè)可以幫助你自動(dòng)部署網(wǎng)站的平臺(tái)。你可以選擇自己買服務(wù)器，運(yùn)行 build 然后推送到自己...
摘要：原文地址使用搭建靜態(tài)博客關(guān)鍵文件本文將會(huì)介紹如何為初始項(xiàng)目添加分頁(yè)功能。不過(guò)由于本來(lái)就打算重寫樣式，這一塊可以放心刪掉處理完這個(gè)問題你的新博客就實(shí)現(xiàn)分頁(yè)功能了下一步是樣式的相關(guān)調(diào)整，留到下一篇繼續(xù)講 原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件 0 && ( ← 上一頁(yè) ...
閱讀 1386·2023-04-25 23:42
閱讀 2949·2021-11-19 09:40
閱讀 3565·2021-10-19 11:44
閱讀 3669·2021-10-14 09:42
閱讀 1918·2021-10-13 09:39
閱讀 3897·2021-09-22 15:43
閱讀 696·2019-08-30 15:54
閱讀 1490·2019-08-26 13:32
