GatsbyJS 博客中的分页

Question

我在我的第一个 GatsbyJS 项目中创建了一个博客，我对 React 和 Gatsby 很陌生

博客本身运行良好，我正在通过降价文件提取内容，但我很难让分页部分正常工作。

我有 4 个页面 blogTemplate（每个博客文章的模板）、posts.js（循环浏览并在单个登录页面上显示每个博客文章）、blog.js（将所有博客文章拉入一个来自帖子页面的数组并将它们显示在卡片中）和我的 gatsby-node.js 页面（正在处理博客的 graphql）

下面是我正在使用的所有文件的列表，底部是我尝试实现的一些插件

blogTemplate.js

import React from "react";
import { graphql, Link } from "gatsby";
import { Container, Row, Col, Image } from "react-bootstrap";

import Layout from "../components/layout";

export default function Template({ data }) {
    const post = data.markdownRemark;
    const { markdownRemark } = data // data.markdownRemark holds your post data
    const { frontmatter, html } = markdownRemark
    const { title, author, date, thumbnail } = post.frontmatter;
    return (
      <Layout>
      <Container  className="px-0" >
      <Row>
        <Col>
          <Container className="mt-5 mb-5">
            <h1>{title}</h1>
    <p>Posted by {author} on {date} thumbnail {thumbnail}</p>
    <Image src={thumbnail} alt={thumbnail} fluid />
            <div dangerouslySetInnerHTML={{ __html: post.html }} />
            <Link to="/blog">Back to blogs</Link>
          </Container>
        </Col>
      </Row>
    </Container> 


        </Layout>
    )
  };

  export const postQuery = graphql`
  query BlogPost($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path }}) {
      html
      frontmatter {
        author
        date
        title
        path
        description
        thumbnail
      }
      html
    }
  }
`;

Posts.js

import React from "react"
import { Link } from "gatsby"
import { Card } from 'react-bootstrap';


const PostLink = ({ post }) => (
  <Card className="cardpadding">
      <Card.Img variant="top" src={post.frontmatter.thumbnail} alt={post.frontmatter.title} />
      <Card.Body className="dark-text">
        <p>{post.frontmatter.date}</p>
          <Card.Title>{post.frontmatter.title}</Card.Title>
          <Card.Text className="blue-text">
          <Link to={post.frontmatter.path} className="post-link">
            {post.frontmatter.title}
          </Link>
          </Card.Text>
      </Card.Body>
  </Card>
)
export default PostLink

blog.js

import React from "react"
import { graphql } from "gatsby"
import Post from "../components/post";
import Layout from "../components/layout"
import { Container } from "react-bootstrap";

const BlogPage = ({
  data: {
    allMarkdownRemark: { edges },
  },
}) => {

const Posts = edges
.filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria
.map(edge => <Post key={edge.node.id} post={edge.node} />)
console.log('Posts', Posts)

return (
  <Layout>
    <Container className="mt-5">
    <div className="grids">
      {Posts}
    </div>
    </Container>
  </Layout>
)
}

export default BlogPage
export const AllBlogsQuery = graphql`
  query AllBlogPosts {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      ) {
      edges {
        node {
          id
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
            author
            path
            thumbnail
          }
        }
      }
    }
  }
`

gatsby-node.js

const path = require("path");

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions;
  const postTemplate = path.resolve("src/templates/blogTemplate.js");

  return graphql(`
  {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: 1000
    ) {
      edges {
        node {
          id
          frontmatter {
            path
          }
        }
      }
    }
  }
`).then(res => {
    if (res.errors) {
      return  Promise.reject(res.errors)
    }
    res.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: postTemplate,
        context: {}, // additional data can be passed via context
      })
    })
  })
};

我尝试过的

我尝试在下面的 gatsby-node 文件中添加 gatsby-paginate 插件。 但是，当我现在单击单个博客页面链接时，出现 404 错误。

盖茨比-node.js

const path = require("path");
const paginate = require('gatsby-paginate')


exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions;
  //const postTemplate = path.resolve("src/templates/blogTemplate.js");

  const ya = await graphql(`
  {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: 1000
    ) {
      edges {
        node {
          id
          frontmatter {
            path
          }
        }
      }
    }
  }
`);

paginate({
  createPage,
  items: ya.data.allMarkdownRemark.node,
  itemsPerPage: 2,
  pathPrefix: '/blog',
  component: path.resolve("src/templates/blogTemplate.js")
});

ya.data.allMarkdownRemark.node.map(articleData => 
      createPage({
        path: node.frontmatter.path,
        component: path.resolve("src/components/post.js"),
        context: {}, // additional data can be passed via context
    })
  );
}

Answer 1

我解决了这个问题，错误出现在我的 gatsby-node.js 文件中。

将两个模板分解为单独的变量，然后将数据传递给每个模板是我想要实现的正确方法

见下面的 gatsby-node.js 文件

const path = require('path')
const { slugify } = require('./src/util/utilityFunctions')
const _ = require('lodash')

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    const slugFromTitle = slugify(node.frontmatter.title)
    createNodeField({
      node,
      name: 'slug',
      value: slugFromTitle,
    })
  }
}

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

  // Page templates
  const templates = {
    post: path.resolve('src/templates/single-post.js'),
    postList: path.resolve('src/templates/post-list.js')
  }

  const res = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              author
              tags
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (res.errors) return Promise.reject(res.errors)

  // Extracting all posts from res
  const posts = res.data.allMarkdownRemark.edges

  // Create single post pages
  posts.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: templates.post,
      context: {
        // Passing slug for template to use to fetch the post
        slug: node.fields.slug
      },
    })
  })

  // Create posts pagination pages
  const postsPerPage = 4
  const numberOfPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numberOfPages }).forEach((_, index) => {
    const isFirstPage = index === 0
    const currentPage = index + 1
    // Skip first page because of index.js
    if (isFirstPage) return

    createPage({
      path: `/page/${currentPage}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: index * postsPerPage,
        numberOfPages: numberOfPages,
        currentPage: currentPage,
      },
    })
  })
}