Нумерация страниц с Гэтсби и шаблонами

Question

Я пытаюсь создать нумерацию страниц для своего блога в Гэтсби. Мне удалось получить нумерацию страниц для своего рода работы.

Когда я захожу на 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

Этот - мой шаблон для постраничных постов

А это мой файл узла Гэтсби

У меня есть два вопроса, вытекающих из вышеизложенного.

1. Где я ошибаюсь, в связи с возможностью кликнуть на фактическое сообщение.
2. Как я могу отобразитьпостраничные посты на 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,
            },
        });
    });
};