使用 Gatsby 和模板进行分页

Question

我正在尝试在 Gatsby 中为我的博客创建分页。我已经设法让分页有点工作。

当我去时，localhost:8000/posts我会得到我的博客文章的完整列表。当我去时，localhost:8000/posts/2我得到了分页帖子的列表，只显示了 3 个帖子。

当我尝试访问该帖子时，说http://localhost:8000/posts/loading-css-via-prefers-color-scheme/我得到了一个TypeError: Cannot read property 'page' of undefined让我失望的消息，因为这是我的目录：

│   ├── posts

│   │   ├── breaking-jekyll-posts-into-years.md

│   │   ├── cleaning-up-git.md

│   │   ├── converting-dates-from-api-repsonses-in-django.md

│   │   ├── css-dark-mode.md

│   │   ├── generating-ssh-keys.md

│   │   ├── getting-api-data-into-your-templates-with-django.md

│   │   ├── imgs

│   │   ├── loading-css-via-prefers-color-scheme.md

│   │   ├── sticky-footer-with-flexbox.md

│   │   └── writing-a-changelog.md

│   └── templates

│       ├── post-list.js

│       └── post.js

这是我的分页帖子模板

这是我的gatsby 节点文件

根据以上内容，我有两个问题。

1. 关于能够点击到实际帖子，我哪里出错了。

2. 我怎样才能在 url 上显示分页的帖子localhost:8000/posts而不是全部......这只是我没有看到的模板问题吗？我可以在页面中使用模板吗？或者我可以使用模板作为页面吗？

Answer 1

你module.exports.createPages用第二个覆盖了你的第一个gatsby-nodeconst path = require('path');const { createFilePath } = require('gatsby-source-filesystem');// CREAT SLUGS FOR .MD PAGESexports.onCreateNode = ({ node, getNode, actions }) => {    const { createNodeField } = actions;    if (node.internal.type === 'MarkdownRemark') {        const slug = createFilePath({ node, getNode, basePath: 'pages' });        createNodeField({            node,            name: 'slug',            value: slug,        });    }};// DYNAMICALLY CREATE PAGES FOR EACH POSTmodule.exports.createPages = async ({ graphql, actions, reporter }) => {    const { createPage } = actions;    const result = await graphql(`        query {            allMarkdownRemark {                edges {                    node {                        fields {                            slug                        }                    }                }            }        }    `);    // Handle errors    if (result.errors) {        reporter.panicOnBuild('Error while running GraphQL query.');        return;    }    // Create the pages for each markdown file    const postTemplate = path.resolve('src/templates/post.js');    result.data.allMarkdownRemark.edges.forEach(({ node }) => {        createPage({            component: postTemplate,            path: `${node.fields.slug}`,            context: {                slug: node.fields.slug,            },        });    });    // PAGINATION FOR BLOG POSTS    const postsResult = await graphql(        `            {                allMarkdownRemark(                    sort: { fields: [frontmatter___date], order: DESC }                    limit: 1000                ) {                    edges {                        node {                            fields {                                slug                            }                        }                    }                }            }        `    );    if (postsResult.errors) {        reporter.panicOnBuild('Error while running GraphQL query.');        return;    }    // Create blog-list pages    const posts = postsResult.data.allMarkdownRemark.edges;    const postsPerPage = 3;    const numPages = Math.ceil(posts.length / postsPerPage);    Array.from({ length: numPages }).forEach((_, i) => {        createPage({            path: i === 0 ? '/posts' : `/posts/${i + 1}`,            component: path.resolve('./src/templates/post-list.js'),            context: {                limit: postsPerPage,                skip: i * postsPerPage,                numPages,                currentPage: i + 1,            },        });    });};