Gatsby Pagination for multiple pages [closed]

问题

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.

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?

My Github

回答1:

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

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:

Next/Prev buttons:

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

Numbering:

   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.

来源：https://stackoverflow.com/questions/61101895/gatsby-pagination-for-multiple-pages

标签

reactjs

graphql

gatsby