Gatsby多页分页

Question

我看过的大多数Gatsby教程都处理一个单独的分页源。对于我的网站，我有多个页面使用GraphQL来过滤160+篇不同类别的博客文章。我需要一些方法来对每个类别页面进行分页，这样用户就不必向下滚动几十篇文章才能到达网站页脚。但是像gatsby-awesome-pagination这样的在线解决方案只处理单一的分页源。

是否可以跨多个页面进行分页？我想我必须自定义每个类别页面的GraphQL，以解释分页所需的每个页面的博客文章的差异？这个想法可能吗？

我的Github

Answer 1

如果你一针见血，你需要自定义你的页面创建。在您的gatsby-node.js中

const posts = result.data.allMarkdownRemark.edges
const postsPerPage = 6
const numPages = Math.ceil(posts.length / postsPerPage)
Array.from({ length: numPages }).forEach((_, i) => {
createPage({
path: i === 0 ? `/blog` : `/blog/${i + 1}`,
component: path.resolve("./src/templates/blog-list-template.js"),
context: {
limit: postsPerPage,
skip: i * postsPerPage,
numPages,
currentPage: i + 1,
},
})
})

上面的代码将创建基于帖子总数的页面数量。每一页都会列出postsPerPage(6)的帖子，直到剩下的帖子少于postsPerPage(6)为止。第一个页面的路径为/blog，以下页面的路径形式为：/blog/2、/blog/3等。

请记住，您是通过上下文将限制和当前页面传递给模板的。因此，在您的博客模板中，您的查询应该如下所示：

query blogListQuery($skip: Int!, $limit: Int!) {
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: $limit
skip: $skip
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}

你已经完成了，你只需要在你的组件中添加下一个和上一个按钮/编号，如下所示：

下一个/上一个按钮：

const { currentPage, numPages } = this.props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? "/" : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()
return (
/* your code to display a list of posts */
{!isFirst && (
<Link to={prevPage} rel="prev">
← Previous Page
</Link>
)}
{!isLast && (
<Link to={nextPage} rel="next">
Next Page →
</Link>
)}
)

编号：

const { currentPage, numPages } = this.props.pageContext
return (
// ...
{Array.from({ length: numPages }, (_, i) => (
<Link key={`pagination-number${i + 1}`} to={`/${i === 0 ? "" : i + 1}`}>
{i + 1}
</Link>
))}

您可以在此处查看更多详细信息。