Gatsby 博客中的上一页和下一页 link

Question

我想知道我在我的 Gatsby 网站上尝试创建上一页和下一页 link 时做错了什么，下面是我试图解决的错误。

当我点击上一个或下一个 link 而不是转到请求的页面时，它会创建下面的路由，这是不应该做的！

如果我点击上一个

以及接下来的

我的 Gatsby 代码-node.js 如下

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require("path")

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

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

  const results1 = await graphql(`
    query content {
      allMdx(filter: { frontmatter: { key: { eq: "projects" } } }) {
        nodes {
          frontmatter {
            slug
            title
          }
        }
      }
    }
  `)

  const results2 = await graphql(`
    query content {
      allMdx(
        filter: { frontmatter: { key: { eq: "article" } } }
        sort: { fields: frontmatter___date, order: ASC }
      ) {
        nodes {
          frontmatter {
            slug
            title
          }
        }
      }
    }
  `)

  const projectTemplate = path.resolve(`./src/templates/project-details.js`)
  const blogTemplate = path.resolve(`./src/templates/blog-details.js`)
  if (results1.errors || results2.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const posts = results2.data.allMdx.nodes

  posts.forEach((post, index) => {
    const previous = index === 0 ? null : posts[index - 1]
    const next = index === posts.length - 1 ? null : posts[index + 1]
    createPage({
      path: `/blog/${post.frontmatter.slug}`,
      component: blogTemplate,
      context: {
        slug: post.frontmatter.slug,
        previous,
        next,
      },
    })
  })

  results1.data.allMdx.nodes.forEach(node => {
    createPage({
      path: `/projects/${node.frontmatter.slug}`,
      component: projectTemplate,
      context: { slug: node.frontmatter.slug },
    })
  })
}

我的博文页面代码如下

import React from "react"
import { graphql, Link } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../components/Layout"
import * as styles from "../styles/blog-details.module.css"

const BlogPosts = ({ data, pageContext }) => {
  console.log(pageContext)
  const { body } = data.article
  const { title, date, stack, featuredImg } = data.article.frontmatter
  const { previous, next } = pageContext

  return (
    <Layout>
      <div className={styles.details}>
        <h2>{title}</h2>
        <p>{date}</p>
        <p>{stack}</p>
        <div className={styles.featured}>
          <GatsbyImage
            image={getImage(featuredImg.childImageSharp.gatsbyImageData)}
            alt={title}
          />
        </div>
        <article className={styles.body}>
          <MDXRenderer>{body}</MDXRenderer>
        </article>
        {previous && (
          <Link to={previous.frontmatter.slug}>
            <h5>{previous.frontmatter.title}</h5>
          </Link>
        )}
        {next && (
          <Link to={next.frontmatter.slug}>
            <h5>{next.frontmatter.title}</h5>
          </Link>
        )}
      </div>
    </Layout>
  )
}

export default BlogPosts

export const query = graphql`
  query BlogDetails($slug: String) {
    article: mdx(frontmatter: { slug: { eq: $slug }, key: { eq: "article" } }) {
      body
      frontmatter {
        slug
        key
        title
        date
        stack
        featuredImg {
          childImageSharp {
            gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`

在此先感谢您对此的帮助。

Answer 1

如果我没理解错的话，单击上一个和下一个按钮时生成的 URL 是将 post 的 slug“连接”到当前的 URL 而不是替换它，不是吗？

因此，不是像 localhost:8000/blog/next-article 那样创建 URL，而是生成 localhost:8000/blog/current-article/next-article。

这是因为您生成链接的方式。您可以通过将鼠标悬停在链接上来发现链接路径，以查看 previous/next 文章的 URL 被添加到 URL 的末尾而不是替换它。

这是因为您没有为链接添加正确的相关性。只需使用：

{previous && (
  <Link to={`/blog/${previous.frontmatter.slug}`}>
    <h5>{previous.frontmatter.title}</h5>
  </Link>
)}
{next && (
  <Link to={`/blog/${next.frontmatter.slug}`}>
    <h5>{next.frontmatter.title}</h5>
  </Link>
)}

to 属性以斜线开头 (/) 修正了相对论。因为您的文章位于 /blog/ 页面内，您需要将其添加到路径中。

这也是锚点 (<a>) 在 HTML 中的工作方式。

Gatsby 博客中的上一页和下一页 link

Previous & next page link in Gatsby Blog

gatsby