使用 Gatsby.js 搭建靜態博客 1 關鍵文件

mzlogin 發布于2019-08-23 13:58 / 2895人閱讀

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

原文地址：https://ssshooter.com/2018-12...

靜態博客之前也有搭建過，不過使用 Hexo 一鍵生成的，其實當時也有考慮過 Gatsby，不過這個框架搭建博客入門還是比較難的，前置知識點包括 react 和 graphQL。

這個系列的文章記錄的就是這個博客搭建中需要注意的點。

此博客使用 gatsby-starter-blog 作為框架，后續自己添加功能。

在安裝 gatsby cli 后運行此指令即可以 gatsby-starter-blog 為模板創建博客。

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

項目創建后文件夾結構基本如下（有區別是因為這是我搭建好的截圖，也有可能是 starter 的版本升級）

其中最為重要的是 gatsby-node.js、/src/templates/blog-post.js 以及 gatsby-config.js。

gatsby-node.js

頁面創建邏輯大部分都在 gatsby-node.js，打開文件可以看到類似代碼：

// 頁面創建函數
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
    // 查詢 md 文件構建頁面
    // 此處查詢使用的是 graphql，這也是 Gatsby 入門門檻較高的原因之一
    // 不過其實這是一個比 sql 更容易理解的查詢語言
    resolve(
      graphql(
        `
          {
            allMarkdownRemark(limit: 1000) {
              edges {
                node {
                  frontmatter {
                    path
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          reject(result.errors)
        }

        // 遍歷查詢結果生成頁面
        result.data.allMarkdownRemark.edges.forEach(({ node }) => {
          const path = node.frontmatter.path
          // 生成單個頁面的函數
          createPage({
            path, // 頁面路徑
            component: blogPostTemplate, // 頁面使用的模板
            // 這是注入上下文變量，注入后可以在模板頁面中使用變量
            // 變量可以使用于 graphql 查詢和 jsx 編寫
            context: {
              path,
            },
          })
        })
      })
    )
  })
}

/src/templates/blog-post.js

此處只是一個舉例，其他模板文件和頁面文件的結構都類似，所以這里使用 /src/templates/blog-post.js 說明文件結構。（另外放在 /src/pages/ 的 js 文件都是會轉換為頁面的）

這類文件兩部分：

第一部分：export default BlogPostTemplate

這是頁面視圖的組件，跟普通 jsx 一樣，不過上面有說到：createPage 函數是可以注入參數到模板文件的。

而這些參數就在 this.props.pageContext 中。

另外，下面將會提到的頁面查詢函數所得的數據在 this.props.data。

第二部分：export const pageQuery

// 注意其中 $slug，這也是被頁面創建函數注入的上下文變量，沒有前綴，直接使用即可
export const pageQuery = graphql` 
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      frontmatter {
        title
        tags
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

查詢函數大概長這樣，簡單來說 graphql 就是把你需要的數據填入你的請求，然后返回給你，光說不易理解，自己玩一把就能立刻明白！

更方便的是，在項目開發環境運行后，還會自帶一個 graphql 查詢頁面：http://localhost:8000/___graphql

一定要注意右上角是自帶文檔的！遇到數據結構懵逼的時候，在文檔查一下就 ok 啦（你甚至可以 ctrl 點擊 query 中的字段名直接跳轉到對應文檔，實在方便得不能再方便了，好評！）

頁面中的查詢函數返回的結果會注入到 this.props.data，跟普通屬性一樣照常使用即可。

gatsby-config.js

gatsby-config.js 看名字就知道這是 Gatsby 的配置文件。使用 starter 建立項目已經自帶了不少插件，但在我的搭建過程中仍然有一些需要自己添加的。

這里是 Gatsby 的插件庫，遇到什么需求可以優先在此處搜索。

總結

結合這三個重要文件，便是 Gatsby 的應用結構：

讀取設置和插件 -> 調用創建頁面前查詢所需資源 -> 創建頁面，把查詢到的參數注入到模板 -> 進行模板本身的查詢 -> 填入數據 -> 成功生成一個頁面

整個流程大部分都是使用循環生成所有頁面。

此系列下一篇將會是分頁相關的詳細說明，這是我初始化之后第一個加上的功能（是的， starter 是不帶分頁的...）。

參考鏈接：
https://www.gatsbyjs.org/docs...
https://www.gatsbyjs.org/docs...

GPU云服務器云服務器靜態博客博客靜態html php靜態博客系統搭建博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99881.html

創造屬于自己的靜態博客

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

Channe 2019-08-23 15:05 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 2 實現分頁

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

william 2019-08-23 13:59 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 EX 使用語雀發布到博客

摘要：原文鏈接偶然看到通過語雀發布文章到靜態博客，很方便，實現過程也很有意思。我的配置接收推送此時在語雀發布文章，接口就會收到推送的文章信息。原文鏈接：https://ssshooter.com/2019-01... 偶然看到通過語雀 webhook 發布文章到 Hexo 靜態博客，很方便，實現過程也很有意思。同樣的原理可以運用到 Gatsby.js 博客上。因為使用了 netlify，...

DoINsiSt 2019-08-23 14:47 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 3 樣式調整

摘要：成功添加樣式當然，除了，還有其他樣式如等，還有其他可以看官網右側的選項。不過比較麻煩的是覆蓋樣式需重啟服務才能生效不能嵌套選擇器這是一個原文鏈接：https://ssshooter.com/2018-12... 回顧：使用 Gatsby.js 搭建靜態博客 2 實現分頁修復代碼高亮為了測試樣式，隨便找一個以前的 .md 文件粘貼到 blog 項目中渲染看看效果： showImg(...

Julylovin 2019-08-23 14:04 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 4 標簽系統

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

AndroidTraveler 2019-08-23 14:23 評論0 收藏0