Question

我见过的大多数盖茨比教程都涉及一种单一的分页来源。对于我的网站，我有多个页面使用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。

盖茨比分页多页

1 个答案: