reactjs - 为标签页创建分页时出错 (Gatsby)

Question

我想为标签页面添加分页，但无法正确执行。

我想要类似的东西：

  const postsPerPage = 1
  const numPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: `/blog-page-${i + 1}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })

为了这：

  tags.forEach(tag => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}`,
      component: templates.tag,
      context: {
        tag,
      },
    })
  })

我已经尝试过这个：

  tags.forEach(tag => {
    const postsPerPage = 1
    const numPages = Math.ceil(tagPostCounts / postsPerPage)

    Array.from({ length: numPages }).forEach((_, i) => {
      createPage({
        path: `/tag/${_.kebabCase(tag)}-${i + 1}`,
        component: templates.tag,
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          numPages,
          currentPage: i + 1,
          tag,
        },
      })  
    })
  })

但它不起作用。知道如何使它工作吗？

这是我的文件：

盖茨比-node.js

const path = require('path')
const _ = require('lodash')

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    const slugFromTitle = _.kebabCase(node.frontmatter.title)
    createNodeField({
      node,
      name: 'slug',
      value: slugFromTitle,
    })
  }
}

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions

  // Page templates
  const templates = {
    post: path.resolve('src/templates/single-post.js'),
    postList: path.resolve('src/templates/post-list.js'),
    tag: path.resolve('src/templates/tag-posts.js'),
    tagsPage: path.resolve('src/templates/tags-page.js'),
  }

  const res = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              tags
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (res.errors) return Promise.reject(res.errors)

  // Extracting all posts from res
  const posts = res.data.allMarkdownRemark.edges

  // Create single post pages
  posts.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: templates.post,
      context: {
        // Passing slug for template to use to fetch the post
        slug: node.fields.slug,
      },
    })
  })

  // Create posts pagination pages
  const postsPerPage = 1
  const numPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: `/blog-page-${i + 1}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
  // Get all tags
  let tags = []
  _.each(posts, edge => {
    if (_.get(edge, 'node.frontmatter.tags')) {
      tags = tags.concat(edge.node.frontmatter.tags)
    }
  })

  let tagPostCounts = {} // { tutorial: 2, design: 1}
  tags.forEach(tag => {
    // Or 0 cause it might not exist yet
    tagPostCounts[tag] = (tagPostCounts[tag] || 0) + 1
  })

  // Remove duplicates
  tags = _.uniq(tags)

  // Tags page (all tags)
  createPage({
    path: '/tags',
    component: templates.tagsPage,
    context: {
      tags,
      tagPostCounts,
    },
  })

  // Tag posts pages
  tags.forEach(tag => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}`,
      component: templates.tag,
      context: {
        tag,
      },
    })
  })
}

post-list.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const BlogList  = (props) => {
  const posts = props.data.allMarkdownRemark.edges
  const { currentPage } = props.pageContext
  return (
    <Layout>
      <h1 style={{paddingTop:"80px"}}>All Post</h1>
      <p>{`Page: ${currentPage}`}</p>
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return(
          <div key={node.fields.slug}>{title}</div>
        ) 
      })}
    </Layout>
  )
}

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

export default BlogList

标签-posts.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const TagPost  = ({ data, pageContext }) => {
  const { tag, currentPage } = pageContext
  const { totalCount } = data.allMarkdownRemark
  const pageHeader = `${totalCount} post${
    totalCount === 1 ? '' : 's'
  } tagged with "${tag}"`
  return (
    <Layout>
      <h1 style={{paddingTop:"80px"}}>All Post</h1>
      <p>{pageHeader}</p>
      {data.allMarkdownRemark.edges.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return(
          <div key={node.fields.slug}>{title}</div>
        ) 
      })}
    </Layout>
  )
}

export const TagPostQuery = graphql`
  query TagPostQuery($skip: Int!, $limit: Int!, $tag: String!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
          }
        }
      }
    }
  }
`

export default TagPost