盖茨比分页多页 [英] Gatsby Pagination for multiple pages

问题描述

我见过的大多数盖茨比教程都涉及一种单一的分页来源.对于我的网站，我有多个页面使用GraphQL来过滤160多个博客文章的不同类别.我需要某种方式来对每个类别页面进行分页，因此用户不必向下滚动数十篇文章即可到达网站页脚.但是像gatsby-awesome-pagination这样的在线解决方案只能处理单一的分页来源.

Most of the Gatsby tutorials I've seen deal with one single source of pagination. For my site, I have multiple pages that use GraphQL to filter different categories of 160+ of blog posts. I need some way to paginate each category page, so users don't have to scroll down dozens of articles to reach the site footer. But solutions online like gatsby-awesome-pagination deal with a single source of pagination.

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

Is it possible to have pagination across multiple pages? I imagine I'd have to customize the GraphQL of each category page to account for the difference in blog posts for each page required for pagination? Is this idea even possible?

我的 Github

推荐答案

您触手可及，需要自定义页面创建.在您的gatsby-node.js

You hit the nail, you need to custom your page creation. In your 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等.

The code above will create an amount of pages that is based on the total number of posts. Each page will list postsPerPage(6) posts, until there are less than postsPerPage(6) posts left. The path for the first page is /blog, the following pages will have a path of the form: /blog/2, /blog/3, etc.

请记住，您是通过上下文将限制和当前页面传递给模板的.因此，在您的博客模板中，您的查询应类似于:

Keep in mind that you are passing via context the limit and the current page to your template. So, in your blog template your query should look like:

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

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

You are all done, you only need to add the next and prev buttons/numbering in your component with something like this:

下一个/上一个按钮:

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

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

You can check for further details here.

这篇关于盖茨比分页多页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！