Как оформляется нумерация страниц блога Gatsby?

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

1. Сначала он запросит allMarkdownRemark.

2. Затем будет создано количество страниц на основе общего количества постов, найденных по вышеуказанному запросу, с использованием createPage.

3. Создает каждую страницу, используя blog-list-template и некоторую информацию о разбиении на страницы в context страницы. (Обратите внимание, что в результате $skip & $limit становятся доступными для использования в качестве переменных в запросе blog-list-template graphql.)

Каждая страница будет содержать 6 сообщений До тех пор, пока не останется менее 6 сообщений (const postsPerPage = 6).

Путь к первой странице - /blog, следующие страницы будут иметь путь в форме: /blog/2, /blog/3, et c.