摘要:原文鏈接回顧使用搭建靜態博客樣式調整官方自帶標簽系統教程,英語過關可以直接閱讀官方教程。制作頁面展示所有標簽重點同樣是查詢部分是標簽名,是包含該標簽的文章總數。在之前寫好的文章頁渲染標簽就是查詢的時候多一個標簽字段,然后渲染上,完事。
原文鏈接: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 已經越來越完善,接下來添加的功能可以說都是非必須的了,下一步先說說頁面部署。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100529.html
摘要:所以自己定值博客,或許可以讓自己堅持更新下去。配合上語雀的文章發布推送絕配,于是有了這么個功能專題。 可以前往我的博客閱讀:https://ssshooter.com/2019-02... 0 前言 本文并不是從 0 開始使用 gatsby.js 搭建博客,starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節省項目搭...
摘要:原文地址靜態博客之前也有搭建過,不過使用一鍵生成的,其實當時也有考慮過,不過這個框架搭建博客入門還是比較難的,前置知識點包括和。使用建立項目已經自帶了不少插件,但在我的搭建過程中仍然有一些需要自己添加的。 原文地址:https://ssshooter.com/2018-12... 靜態博客之前也有搭建過,不過使用 Hexo 一鍵生成的,其實當時也有考慮過 Gatsby,不過這個框架搭...
摘要:原文鏈接方案選擇大家都知道等第三方評論系統的存在。部署自己的的原理就是使用接口把評論更新到你靜態博客的倉庫,觸發博客重新部署,在頁面生成評論。這樣得到的博客頁面包括評論部分都是完全靜態的。配置完畢推送到或本地運行。 原文鏈接:https://ssshooter.com/2019-01... 方案選擇 大家都知道 disqus 等第三方評論系統的存在。disqus 幾年前還是挺好使的,但...
摘要:原文鏈接這真的是最簡單的一步啦使用你的網站是一個可以幫助你自動部署網站的平臺。詳細設置可以在查看,可以進行構建環境變量等相關配置。 原文鏈接:https://ssshooter.com/2018-12... 這真的是最簡單的一步啦~ 使用 netlify deploy 你的網站 netlify 是一個可以幫助你自動部署網站的平臺。你可以選擇自己買服務器,運行 build 然后推送到自己...
摘要:原文地址使用搭建靜態博客關鍵文件本文將會介紹如何為初始項目添加分頁功能。不過由于本來就打算重寫樣式,這一塊可以放心刪掉處理完這個問題你的新博客就實現分頁功能了下一步是樣式的相關調整,留到下一篇繼續講 原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建靜態博客 1 關鍵文件 0 && ( ← 上一頁 ...
閱讀 1349·2023-04-25 23:42
閱讀 2841·2021-11-19 09:40
閱讀 3528·2021-10-19 11:44
閱讀 3560·2021-10-14 09:42
閱讀 1870·2021-10-13 09:39
閱讀 3836·2021-09-22 15:43
閱讀 672·2019-08-30 15:54
閱讀 1454·2019-08-26 13:32
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要