使用 Gatsby.js 搭建静态博客 2 实现分页

william 发布于2019-08-23 13:59 / 2775人阅读

摘要：原文地址使用搭建静态博客关键文件本文将会介绍如何为初始项目添加分页功能。不过由于本来就打算重写样式，这一块可以放心删掉处理完这个问题你的新博客就实现分页功能了下一步是样式的相关调整，留到下一篇继续讲

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

处理完这个问题你的新博客就实现分页功能了！下一步是样式的相关调整，留到下一篇继续讲

云服务器混合云静态博客博客静态html php静态博客系统实现分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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