盖茨比动态 slug

Question

首先我将展示我拥有的代码，然后解释问题：

我的 gatsby-node.js 上有这个：

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

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `ContetnfulPost`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allContentfulPost {
        edges {
          node {
            postTitle
            slug
          }
        }
      }
    }
  `)

  const posts = result.data.allContentfulPost.edges

  posts.forEach(({ node }, index) => {
    createPage({
      path: `${node.slug}`,
      component: path.resolve(`./src/templates/blogPost.js`),
      context: {
        slug: node.slug,
        prev: index === 0 ? null : posts[index - 1].node,
        next: index === posts.length - 1 ? null : posts[index + 1].node,
      },
    })
  })
}

然后我在 2 个地方查询博客文章：一个像这样的博客页面：

blog.js页面：

function Blog() {
  return (
    <Layout>
      <SEO title="Blog Page" />
      <StaticQuery
        query={graphql`
          query blogQuery {
            allContentfulPost {
              edges {
                node {
                  slug
                  postTitle
                  postImage {
                    file {
                      url
                      fileName
                    }
                  }
                  postContent {
                    postContent
                  }
                  postDate
                }
              }
            }
          }
        `}
        render={data => (
          <ul>
            {data.allContentfulPost.edges.map(({ node }) => {
              return (
                <BlogPostsContainer>
                  <Link to={`${node.slug}`}>
                    <BlogPostImage src={node.postImage.file.url} />
                    <PostTitle>{node.postTitle}</PostTitle>
                  </Link>
                </BlogPostsContainer>
              )
            })}
          </ul>
        )}
      />
    </Layout>
  )
}

另一个是我用来在主页上显示我的一些帖子的反应组件：

BlogSection.js

function BlogSection() {
  return (
    <BlogSectionWrapper>
      <StaticQuery
        query={graphql`
          query homeBlogQuery {
            allContentfulPost(limit: 2) {
              edges {
                node {
                  slug
                  postTitle
                  postImage {
                    file {
                      url
                      fileName
                    }
                  }
                  postContent {
                    postContent
                  }
                  postDate
                }
              }
            }
          }
        `}
        render={data => (
          <ul>
            {data.allContentfulPost.edges.map(({ node }) => {
              return (
                <HomePostsContainer>
                  <Link to={`${node.slug}`}>
                    <HomePostImage src={node.postImage.file.url} />
                    <PostTitle>{node.postTitle}</PostTitle>
                  </Link>
                </HomePostsContainer>
              )
            })}
          </ul>
        )}
      />
      <ButtonWrapper></ButtonWrapper>
      <FlatButton
        item={{
          title: "See all posts",
          icon: "/images/icons/book.svg",
          link: "/blog",
        }}
      />
    </BlogSectionWrapper>
  )
}

现在的问题是，当我从主页（从BlogSection.js 组件呈现的）点击博客文章时，URL 通常是http://localhost:8000/test-post。

但是当我从博客页面（从blog.js 文件呈现）中单击帖子时，URL 变为http://localhost:8000/blog/test-post。

我还在每个帖子上添加了 Prev 和 Next 按钮，当我点击它们时，它只是在 URL 中附加了 slug，例如当我在 http://localhost:8000/test-post 并点击 Next 时，它变为http://localhost:8000/test-post/test-post2。

如何保留 URL 以仅显示帖子 slug 或者可能为所有帖子添加 /blog 前缀，而与我点击它的位置无关？

我在gatsby-node.js 文件上试过这个，但它不起作用：

posts.forEach(({ node }, index) => {
    createPage({
      path: `/blog/${node.slug}`, //<===== THIS LINE
      component: path.resolve(`./src/templates/blogPost.js`),
      context: {
        slug: node.slug,
        prev: index === 0 ? null : posts[index - 1].node,
        next: index === posts.length - 1 ? null : posts[index + 1].node,
      },
    })
  })

Answer 1

您的动态帖子是在localhost:8000/:post-slug 而不是/blog/:post-slug 下创建的，原因是：

  path: `${node.slug}`,

所以，第一步是添加以下内容（到目前为止您已经尝试过）：

posts.forEach(({ node }, index) => {
    createPage({
      path: `/blog/${node.slug}`, 
      component: path.resolve(`./src/templates/blogPost.js`),
      context: {
        slug: node.slug,
        prev: index === 0 ? null : posts[index - 1].node,
        next: index === posts.length - 1 ? null : posts[index + 1].node,
      },
    })
  })

之后，请记住，所有不以 / 为前缀的链接都将连接到当前 URL，就像标准锚点（<a> 标记）一样。只需在 slug 的开头添加 / 就可以了。这就解释了这个问题：

我还在每个帖子上添加了 Prev 和 Next 按钮，当我点击 他们，它只是在 URL 中附加 slug，例如当我在 http://localhost:8000/test-post 然后点击下一步，就变成了 http://localhost:8000/test-post/test-post2.

现在，例如，如果您想从主页转到特定帖子，则需要将 /blog 添加到 URL，因为它不是帖子 slug 的一部分：

function BlogSection() {
  return (
    <BlogSectionWrapper>
      <StaticQuery
        query={graphql`
          query homeBlogQuery {
            allContentfulPost(limit: 2) {
              edges {
                node {
                  slug
                  postTitle
                  postImage {
                    file {
                      url
                      fileName
                    }
                  }
                  postContent {
                    postContent
                  }
                  postDate
                }
              }
            }
          }
        `}
        render={data => (
          <ul>
            {data.allContentfulPost.edges.map(({ node }) => {
              return (
                <HomePostsContainer>
                  <Link to={`/blog/${node.slug}`}>
                    <HomePostImage src={node.postImage.file.url} />
                    <PostTitle>{node.postTitle}</PostTitle>
                  </Link>
                </HomePostsContainer>
              )
            })}
          </ul>
        )}
      />
      <ButtonWrapper></ButtonWrapper>
      <FlatButton
        item={{
          title: "See all posts",
          icon: "/images/icons/book.svg",
          link: "/blog",
        }}
      />
    </BlogSectionWrapper>
  )
}

注意<Link to={`/blog/${node.slug}`}>。对blog.js 模板执行相同的操作。

之前的行为在 blog.js 中有效，因为路径不是相对的，它将 post slug 连接到当前 URL (/blog)，但没有指向 /blog。

要解决更多问题，请检查所有slug 并添加/（如果需要）以避免连接问题。

总结：

• 在gatsby-node.js中创建/blog/:post-slug下的动态帖子：这将生成/blog下的所有帖子
• 将所有链接指向/blog/:post-slug，无论来源网址如何（要发布的主页等）。
• 在指向帖子的所有链接的开头添加一个斜杠 (/)，以避免 URL 问题的串联和相关性。相同的解决方法适用于下一个和上一个按钮。