使用 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 节点文件根据以上内容，我有两个问题。关于能够点击到实际帖子，我哪里出错了。我怎样才能在 url 上显示分页的帖子localhost:8000/posts而不是全部......这只是我没有看到的模板问题吗？我可以在页面中使用模板吗？或者我可以使用模板作为页面吗？

Answer 1

你module.exports.createPages用第二个覆盖了你的第一个gatsby-node

const path = require('path');

const { createFilePath } = require('gatsby-source-filesystem');

// CREAT SLUGS FOR .MD PAGES

exports.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 POST

module.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,

            },

        });

    });

};