使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

mzlogin 發(fā)布于2019-08-23 13:58 / 2905人閱讀

摘要：原文地址靜態(tài)博客之前也有搭建過(guò)，不過(guò)使用一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過(guò)，不過(guò)這個(gè)框架搭建博客入門(mén)還是比較難的，前置知識(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è)框架搭建博客入門(mén)還是比較難的，前置知識(shí)點(diǎn)包括 react 和 graphQL。

這個(gè)系列的文章記錄的就是這個(gè)博客搭建中需要注意的點(diǎn)。

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

在安裝 gatsby cli 后運(yùn)行此指令即可以 gatsby-starter-blog 為模板創(chuàng)建博客。

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

項(xiàng)目創(chuàng)建后文件夾結(jié)構(gòu)基本如下（有區(qū)別是因?yàn)檫@是我搭建好的截圖，也有可能是 starter 的版本升級(jí)）

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

gatsby-node.js

頁(yè)面創(chuàng)建邏輯大部分都在 gatsby-node.js，打開(kāi)文件可以看到類(lèi)似代碼：

// 頁(yè)面創(chuàng)建函數(shù)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

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

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

/src/templates/blog-post.js

此處只是一個(gè)舉例，其他模板文件和頁(yè)面文件的結(jié)構(gòu)都類(lèi)似，所以這里使用 /src/templates/blog-post.js 說(shuō)明文件結(jié)構(gòu)。（另外放在 /src/pages/ 的 js 文件都是會(huì)轉(zhuǎn)換為頁(yè)面的）

這類(lèi)文件兩部分：

第一部分：export default BlogPostTemplate

這是頁(yè)面視圖的組件，跟普通 jsx 一樣，不過(guò)上面有說(shuō)到：createPage 函數(shù)是可以注入?yún)?shù)到模板文件的。

而這些參數(shù)就在 this.props.pageContext 中。

另外，下面將會(huì)提到的頁(yè)面查詢(xún)函數(shù)所得的數(shù)據(jù)在 this.props.data。

第二部分：export const pageQuery

// 注意其中 $slug，這也是被頁(yè)面創(chuàng)建函數(shù)注入的上下文變量，沒(méi)有前綴，直接使用即可
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")
      }
    }
  }
`

查詢(xún)函數(shù)大概長(zhǎng)這樣，簡(jiǎn)單來(lái)說(shuō) graphql 就是把你需要的數(shù)據(jù)填入你的請(qǐng)求，然后返回給你，光說(shuō)不易理解，自己玩一把就能立刻明白！

更方便的是，在項(xiàng)目開(kāi)發(fā)環(huán)境運(yùn)行后，還會(huì)自帶一個(gè) graphql 查詢(xún)頁(yè)面：http://localhost:8000/___graphql

一定要注意右上角是自帶文檔的！遇到數(shù)據(jù)結(jié)構(gòu)懵逼的時(shí)候，在文檔查一下就 ok 啦（你甚至可以 ctrl 點(diǎn)擊 query 中的字段名直接跳轉(zhuǎn)到對(duì)應(yīng)文檔，實(shí)在方便得不能再方便了，好評(píng)?。?/p>

頁(yè)面中的查詢(xún)函數(shù)返回的結(jié)果會(huì)注入到 this.props.data，跟普通屬性一樣照常使用即可。

gatsby-config.js

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

這里是 Gatsby 的插件庫(kù)，遇到什么需求可以?xún)?yōu)先在此處搜索。

總結(jié)

結(jié)合這三個(gè)重要文件，便是 Gatsby 的應(yīng)用結(jié)構(gòu)：

讀取設(shè)置和插件 -> 調(diào)用創(chuàng)建頁(yè)面前查詢(xún)所需資源 -> 創(chuàng)建頁(yè)面，把查詢(xún)到的參數(shù)注入到模板 -> 進(jìn)行模板本身的查詢(xún) -> 填入數(shù)據(jù) -> 成功生成一個(gè)頁(yè)面

整個(gè)流程大部分都是使用循環(huán)生成所有頁(yè)面。

此系列下一篇將會(huì)是分頁(yè)相關(guān)的詳細(xì)說(shuō)明，這是我初始化之后第一個(gè)加上的功能（是的， starter 是不帶分頁(yè)的...）。

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

GPU云服務(wù)器云服務(wù)器靜態(tài)博客博客靜態(tài)html php靜態(tài) 博客系統(tǒng) 搭建博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99881.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mzlogin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow1轉(zhuǎn)tensorflow2

閱讀 911·2023-04-26 02:16
svg animation應(yīng)用之-描邊效果

閱讀 1218·2019-08-30 15:55
關(guān)于在一段文本上加修飾劃線(xiàn)的效果

閱讀 2797·2019-08-30 15:53
深入理解ES6（二）（解構(gòu)賦值）

閱讀 3392·2019-08-29 15:38
從web現(xiàn)狀談及前端性能優(yōu)化

閱讀 2900·2019-08-29 13:42
form表單提交

閱讀 1989·2019-08-26 13:34
vue 打包后動(dòng)態(tài)配置API地址

閱讀 1849·2019-08-26 10:10
Dom中高big 事件總結(jié)（持續(xù)更新中）

閱讀 3083·2019-08-23 14:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

相關(guān)文章

**創(chuàng)造屬于自己的靜態(tài)博客**

**使用 Gatsby.js 搭建靜態(tài)博客 2 實(shí)現(xiàn)分頁(yè)**

**使用 Gatsby.js 搭建靜態(tài)博客 EX 使用語(yǔ)雀發(fā)布到博客**

**使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整**

**使用 Gatsby.js 搭建靜態(tài)博客 4 標(biāo)簽系統(tǒng)**

發(fā)表評(píng)論

0條評(píng)論

mzlogin

男|高級(jí)講師

TA的文章

tensorflow1轉(zhuǎn)tensorflow2

svg animation應(yīng)用之-描邊效果

關(guān)于在一段文本上加修飾劃線(xiàn)的效果

深入理解ES6（二）（解構(gòu)賦值）

從web現(xiàn)狀談及前端性能優(yōu)化

form表單提交

vue 打包后動(dòng)態(tài)配置API地址

Dom中高big 事件總結(jié)（持續(xù)更新中）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！