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

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

······

<div>
  {currentPage - 1 > 0 && (
    <Link
      to={'/blog/' + (currentPage - 1 === 1 ? '' : currentPage - 1)}
      rel="prev"
    >
      ← 上一頁
    </Link>
  )}
</div>
<div>
  {currentPage + 1 <= totalPage && (
    <Link to={'/blog/' + (currentPage + 1)} rel="next">
      下一頁 →
    </Link>
  )}
</div>

在查詢中添加分頁邏輯

// $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,
    },
  })
})

無關主題的突發狀況

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

原來的頁面是這樣的：

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

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

layout 組件裏面寫法是在根目錄的時候把 title 放大，可是添加分頁以後，主頁路由從根目錄 / 變爲 /blog,因而產生了這個詭異的問題。

不過因爲原本就打算重寫樣式，這一塊能夠放心刪掉！

Next

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