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

資訊專欄INFORMATION COLUMN

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

william / 2973人閱讀

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

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

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

本文將會(huì)介紹如何為初始項(xiàng)目添加分頁功能。

理解頁面創(chuàng)建原理

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

未修改前，首頁 index.js 存在于 pages 文件夾，不需要在 gatsby-node.js 使用 createPage 函數(shù)生成，因?yàn)?createPage 多用于遍歷數(shù)據(jù)批量生成頁面。

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

添加分頁模板

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

文件內(nèi)容大部分都跟現(xiàn)有的 index.js 一樣，但是有以下改動(dòng)：

添加翻頁按鈕 
// 數(shù)據(jù)來源是 createPage 注入的上下文變量
const { totalPage, currentPage } = this.props.pageContext

······



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




  {currentPage + 1 <= totalPage && (
    
      下一頁 →
    
  )}
在查詢中添加分頁邏輯 
// $skip 和 $limit 的來源也是 context
// 不過可以注意到在查詢中這些變量就存在于最外層而不需要訪問對(duì)象屬性獲取
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 修改生成函數(shù)

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

當(dāng)前頁數(shù)

總頁數(shù)

每次獲取數(shù)據(jù)的數(shù)量

跳過前面數(shù)據(jù)的數(shù)量

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

//  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,
    },
  })
})
無關(guān)主題的突發(fā)情況

功能實(shí)現(xiàn)了，但是這里有一個(gè)突發(fā)事件：

原來的頁面是這樣的：

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

注釋了 發(fā)現(xiàn)這塊不屬于 title，而 helmet 是用于處理 html 元數(shù)據(jù)，懵逼了一段時(shí)間，終于明白是 layout 組件的問題.

layout 組件里面寫法是在根目錄的時(shí)候把 title 放大，但是添加分頁之后，主頁路由從根目錄 / 變?yōu)?/blog,于是產(chǎn)生了這個(gè)詭異的問題。

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

Next

處理完這個(gè)問題你的新博客就實(shí)現(xiàn)分頁功能了！下一步是樣式的相關(guān)調(diào)整，留到下一篇繼續(xù)講

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

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

相關(guān)文章

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

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

    Channe 評(píng)論0 收藏0

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

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

    mzlogin 評(píng)論0 收藏0

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

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

    AndroidTraveler 評(píng)論0 收藏0

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

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

    Julylovin 評(píng)論0 收藏0

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

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

    DoINsiSt 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<