国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 Gatsby.js 搭建靜態博客 4 標簽系統

AndroidTraveler / 2426人閱讀

摘要:原文鏈接回顧使用搭建靜態博客樣式調整官方自帶標簽系統教程,英語過關可以直接閱讀官方教程。制作頁面展示所有標簽重點同樣是查詢部分是標簽名,是包含該標簽的文章總數。在之前寫好的文章頁渲染標簽就是查詢的時候多一個標簽字段,然后渲染上,完事。

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

回顧:使用 Gatsby.js 搭建靜態博客 3 樣式調整

官方自帶標簽系統教程,英語過關可以直接閱讀官方教程。

以下說一下重點:

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

建立標簽系統只需要以下步驟:

在 md 文件添加 tags

</>復制代碼

  1. ---
  2. title: "A Trip To the Zoo"
  3. tags: ["animals", "Chicago", "zoos"]
  4. ---
用 graphQL 查詢文章標簽

</>復制代碼

  1. {
  2. allMarkdownRemark(
  3. sort: { order: DESC, fields: [frontmatter___date] }
  4. limit: 1000
  5. ) {
  6. edges {
  7. node {
  8. frontmatter {
  9. path
  10. tags // 也就添加了這部分
  11. }
  12. }
  13. }
  14. }
  15. }
制作標簽頁面模板(/tags/{tag}

標簽頁面結構不難,與之前的文章頁面差不多,區別在于標簽的查詢:

</>復制代碼

  1. // 注意 filter
  2. export const pageQuery = graphql`
  3. query($tag: String) {
  4. allMarkdownRemark(
  5. limit: 2000
  6. sort: { fields: [frontmatter___date], order: DESC }
  7. filter: { frontmatter: { tags: { in: [$tag] } } }
  8. ) {
  9. totalCount
  10. edges {
  11. node {
  12. frontmatter {
  13. title
  14. path
  15. }
  16. }
  17. }
  18. }
  19. }
  20. `
修改 gatsby-node.js,渲染標簽頁模板

</>復制代碼

  1. const path = require("path")
  2. const _ = require("lodash")
  3. exports.createPages = ({ actions, graphql }) => {
  4. const { createPage } = actions
  5. const blogPostTemplate = path.resolve("src/templates/blog.js")
  6. const tagTemplate = path.resolve("src/templates/tags.js")
  7. return graphql(`
  8. {
  9. allMarkdownRemark(
  10. sort: { order: DESC, fields: [frontmatter___date] }
  11. limit: 2000
  12. ) {
  13. edges {
  14. node {
  15. frontmatter {
  16. path
  17. tags
  18. }
  19. }
  20. }
  21. }
  22. }
  23. `).then(result => {
  24. if (result.errors) {
  25. return Promise.reject(result.errors)
  26. }
  27. const posts = result.data.allMarkdownRemark.edges
  28. posts.forEach(({ node }) => {
  29. createPage({
  30. path: node.frontmatter.path,
  31. component: blogPostTemplate,
  32. })
  33. })
  34. let tags = []
  35. // 獲取所有文章的 `tags`
  36. _.each(posts, edge => {
  37. if (_.get(edge, "node.frontmatter.tags")) {
  38. tags = tags.concat(edge.node.frontmatter.tags)
  39. }
  40. })
  41. // 去重
  42. tags = _.uniq(tags)
  43. // 創建標簽頁
  44. tags.forEach(tag => {
  45. createPage({
  46. path: `/tags/${_.kebabCase(tag)}/`,
  47. component: tagTemplate,
  48. context: {
  49. tag,
  50. },
  51. })
  52. })
  53. })
  54. }

如果你要把標簽頁也分頁,多加一個循環就行,道理跟主頁分頁都是一樣的:

</>復制代碼

  1. tags.forEach(tag => {
  2. const total = tag.totalCount
  3. const numPages = Math.ceil(total / postsPerPage)
  4. Array.from({ length: numPages }).forEach((_, i) => {
  5. createPage({
  6. path:
  7. i === 0
  8. ? `/tag/${tag.fieldValue}`
  9. : `/tag/${tag.fieldValue}/${i + 1}`,
  10. component: tagTemplate,
  11. context: {
  12. tag: tag.fieldValue,
  13. currentPage: i + 1,
  14. totalPage: numPages,
  15. limit: postsPerPage,
  16. skip: i * postsPerPage,
  17. },
  18. })
  19. })
  20. })

這里僅僅是把查詢到的文章的所有標簽都抽取出來,用以生成標簽頁,但是標簽具體內容的獲取依賴于標簽頁本身的查詢

制作 /tags 頁面展示所有標簽

重點同樣是查詢部分:

</>復制代碼

  1. export const pageQuery = graphql`
  2. query {
  3. site {
  4. siteMetadata {
  5. title
  6. }
  7. }
  8. allMarkdownRemark(
  9. limit: 2000
  10. filter: { frontmatter: { published: { ne: false } } }
  11. ) {
  12. group(field: frontmatter___tags) {
  13. fieldValue
  14. totalCount
  15. }
  16. }
  17. }
  18. `

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 可以大量節省項目搭...

    Channe 評論0 收藏0
  • 使用 Gatsby.js 搭建靜態博客 1 關鍵文件

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

    mzlogin 評論0 收藏0
  • 使用 Gatsby.js 搭建靜態博客 6 評論系統

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

    venmos 評論0 收藏0
  • 使用 Gatsby.js 搭建靜態博客 5 博客上線

    摘要:原文鏈接這真的是最簡單的一步啦使用你的網站是一個可以幫助你自動部署網站的平臺。詳細設置可以在查看,可以進行構建環境變量等相關配置。 原文鏈接:https://ssshooter.com/2018-12... 這真的是最簡單的一步啦~ 使用 netlify deploy 你的網站 netlify 是一個可以幫助你自動部署網站的平臺。你可以選擇自己買服務器,運行 build 然后推送到自己...

    KnewOne 評論0 收藏0
  • 使用 Gatsby.js 搭建靜態博客 2 實現分頁

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

    william 評論0 收藏0

發表評論

0條評論

AndroidTraveler

|高級講師

TA的文章

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