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

原文地址： 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...