使用 Gatsby.js 搭建靜態博客 2 實現分頁

william 發布于2019-08-23 13:59 / 2963人閱讀

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

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

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

本文將會介紹如何為初始項目添加分頁功能。

理解頁面創建原理

上一篇的 gatsby-node.js 介紹部分已經說明了頁面生成的方法。

未修改前，首頁 index.js 存在于 pages 文件夾，不需要在 gatsby-node.js 使用 createPage 函數生成，因為 createPage 多用于遍歷數據批量生成頁面。

而我們現在的需求就正好需要用到！文章的分頁需要把文章列表分割為每頁 N 篇文章的，M 個頁面，因此需要使用 createPage。

添加分頁模板

首先在 templates 文件夾創建 index.js（或者 blog.js，你喜歡）。

文件內容大部分都跟現有的 index.js 一樣，但是有以下改動：

添加翻頁按鈕

// 數據來源是 createPage 注入的上下文變量
const { totalPage, currentPage } = this.props.pageContext

······


  {currentPage - 1 > 0 && (
    
      ← 上一頁
    
  )}


  {currentPage + 1 <= totalPage && (
    
      下一頁 →
    
  )}

在查詢中添加分頁邏輯

// $skip 和 $limit 的來源也是 context
// 不過可以注意到在查詢中這些變量就存在于最外層而不需要訪問對象屬性獲取
export const pageQuery = graphql`
  query($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
        description
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
          }
        }
      }
    }
  }
`

在 gatsby-node.js 修改生成函數

這里是批量生成分頁頁面的邏輯，根據每頁文章數 postsPerPage 計算生成頁面總數，然后向每頁注入四個變量，包括：

當前頁數

總頁數

每次獲取數據的數量

跳過前面數據的數量

模板頁面有了這些參數便可以方便查詢出該頁面需要渲染什么文章。

//  create homepage pagination
const postsPerPage = 8
const numPages = Math.ceil(posts.length / postsPerPage)

Array.from({ length: numPages }).forEach((_, i) => {
  createPage({
    path: i === 0 ? `/blog` : `/blog/${i + 1}`,
    component: homePaginate,
    context: {
      currentPage: i+1,
      totalPage:numPages,
      limit: postsPerPage,
      skip: i * postsPerPage,
    },
  })
})

無關主題的突發情況

功能實現了，但是這里有一個突發事件：

原來的頁面是這樣的：

我什么都沒修改怎么就變成這樣了？

注釋了發現這塊不屬于 title，而 helmet 是用于處理 html 元數據，懵逼了一段時間，終于明白是 layout 組件的問題.

layout 組件里面寫法是在根目錄的時候把 title 放大，但是添加分頁之后，主頁路由從根目錄 / 變為 /blog,于是產生了這個詭異的問題。

不過由于本來就打算重寫樣式，這一塊可以放心刪掉！

Next

處理完這個問題你的新博客就實現分頁功能了！下一步是樣式的相關調整，留到下一篇繼續講

GPU云服務器云服務器靜態博客博客靜態html php靜態博客系統實現分頁

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99910.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 搭建靜態博客 1 關鍵文件

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

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

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

AndroidTraveler 2019-08-23 14:23 評論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 搭建靜態博客 EX 使用語雀發布到博客

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

DoINsiSt 2019-08-23 14:47 評論0 收藏0