亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

mzlogin / 2950人閱讀

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

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

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

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

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

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

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

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

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

gatsby-node.js

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

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

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

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

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

這類文件兩部分：

第一部分：export default BlogPostTemplate

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

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

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

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

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

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

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

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

gatsby-config.js

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

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

總結(jié)

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99881.html

相關(guān)文章

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

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

    Channe 評論0 收藏0

  • 使用 Gatsby.js 搭建靜態(tài)博客 2 實現(xiàn)分頁

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

    william 評論0 收藏0

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

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

    DoINsiSt 評論0 收藏0

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

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

    Julylovin 評論0 收藏0

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

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

    AndroidTraveler 評論0 收藏0

發(fā)表評論

0條評論

mzlogin

男|高級講師

TA的文章

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