盖茨比分页多页[关闭]

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>
      ))}

您可以查看更多详细信息here。