多个页面的 Gatsby 分页 [英] Gatsby Pagination for multiple pages

问题描述

我见过的大多数 Gatsby 教程都处理单一的分页源.对于我的网站，我有多个页面使用 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.

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