原文地址: https://ssshooter.com/2018-12...
使用 Gatsby.js 搭建静态博客 1 关键文件 <-html
本文将会介绍如何为初始项目添加分页功能。node
上一篇的 gatsby-node.js
介绍部分已经说明了页面生成的方法。ssh
未修改前,首页 index.js
存在于 pages
文件夹,不须要在 gatsby-node.js
使用 createPage
函数生成,由于 createPage
多用于遍历数据批量生成页面。函数
而咱们如今的需求就正好须要用到!文章的分页须要把文章列表分割为每页 N 篇文章的,M 个页面,所以须要使用 createPage
。post
首先在 templates
文件夹建立 index.js
(或者 blog.js
,你喜欢)。this
文件内容大部分都跟现有的 index.js
同样,可是有如下改动:spa
// 数据来源是 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
计算生成页面总数,而后向每页注入四个变量,包括:code
模板页面有了这些参数即可以方便查询出该页面须要渲染什么文章。component
// 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, }, }) })
功能实现了,可是这里有一个突发事件:orm
原来的页面是这样的:
我什么都没修改怎么就变成这样了?
注释了 <bio />
发现这块不属于 title
,而 helmet
是用于处理 html 元数据,懵逼了一段时间,终于明白是 layout 组件的问题.
layout 组件里面写法是在根目录的时候把 title
放大,可是添加分页以后,主页路由从根目录 /
变为 /blog
,因而产生了这个诡异的问题。
不过因为原本就打算重写样式,这一块能够放心删掉!
处理完这个问题你的新博客就实现分页功能了!下一步是样式的相关调整,留到下一篇继续讲