Question

在阅读分页教程时，我不了解如何呈现分页？使用哪个页面？ blog-list-template是否正在将组件传递到页面文件夹中的文件上？如果没有，那么在未指定文件的情况下，盖茨比如何知道使用blog-list-template？

Answer 1

在本教程示例中，查看gatsby-node.js的代码。

const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")

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

  // 1.
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  // ...

  // Create blog-list pages
  const posts = result.data.allMarkdownRemark.edges
  const postsPerPage = 6
  const numPages = Math.ceil(posts.length / postsPerPage)

  // 2.
  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      // 4. 
      path: i === 0 ? `/blog` : `/blog/${i + 1}`,

      // 3.
      component: path.resolve("./src/templates/blog-list-template.js"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

首先它将查询allMarkdownRemark。
然后它将创建一个页面数量，该数量基于上述查询中使用createPage找到的帖子总数。
它使用blog-list-template和在页面context中的有关分页的一些信息来创建每个页面。（请注意，因此，$skip和$limit随后可在blog-list-template的graphql查询中用作变量。）

每个页面将列出6个帖子，直到剩余少于6个帖子（const postsPerPage = 6）。

首页的路径为/blog，后续页面的路径格式为：/blog/2，/blog/3，等等。

如何呈现盖茨比博客列表分页？

1 个答案: