/second%20post 上还没有页面

如何解决/second%20post 上还没有页面

我的 gatsby 网站有问题。我正在从 contentful 中获取内容，根据我的 gatsby-node.js 中的代码，它必须生成两个页面，并且确实如此，但是当我单击它显示第二个页面时，只有其中一个页面在工作

/second%20post 上还没有页面

我很困惑，因为这里问的大部分问题都告诉我他们无法生成页面，我不知道页面是否已创建，如果已创建，那么为什么它会向我显示错误消息并且当到达错误页面时

第二个帖子

链接已给出，但不可点击。所有其他代码都在我的 git 存储库中，位于 Github code

请参阅图片以清楚了解 Image here

这是我的 gatsby-node.js 代码文件

const path = require(`path`)


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

// Define a template for blog post
 const blogPost = path.resolve(`./src/templates/blog-post-contentful.js`)

// Get all markdown blog posts sorted by date
const result = await graphql(
`
 {
  allContentfulBlockchainlearning{
    edges{
      node{
        slug
        title
        subtitle
        
       
      }
    }
  }
}
`
)

if (result.errors) {
 reporter.panicOnBuild(
  `There was an error loading your blog posts`,result.errors
  )
  return
}

 const posts = result.data.allContentfulBlockchainlearning.edges

  // Create blog posts pages
  // But only if there's at least one markdown file found at "content/blog" (defined in gatsby- 
config.js)
  // `context` is available in the template as a prop and as a variable in GraphQL

 if (posts.length > 0) {
  posts.forEach((post,index) => {
  const previousPostSlug = index === 0 ? null : posts[index - 1].id
  const $nextPostSlug = index === posts.length - 1 ? null : posts[index + 1].id

  createPage({
    path: post.node.slug,component: blogPost,context: {
      slug: post.node.slug,previousPostSlug,$nextPostSlug,},})
})
}
}

这是我想创建的博客帖子模板

import React from "react"
import { Link,graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({ data,location }) => {
const post = data.contentfulBlockchainlearning
const siteTitle = data.site.siteMetadata?.title || `Title`
const { previous,next } = data

return (
<Layout location={location} title={siteTitle}>
  <SEO
    title={post.title}
    description={post.subtitle}
  />
  <article
    className="blog-post"
    itemScope
    itemType="http://schema.org/Article"
  >
    <header>
      <h1 itemProp="headline">{post.title}</h1>
      <p>{post.date}</p>
    </header>
    <section
      dangerouslySetInnerHTML={{ __html: post.content.raw }}
      itemProp="articleBody"
    />
    <hr />
    <footer>
      <Bio />
    </footer>
  </article>
  <nav className="blog-post-nav">
    <ul
      style={{
        display: `flex`,flexWrap: `wrap`,justifyContent: `space-between`,listStyle: `none`,padding: 0,}}
    >
      <li>
        {previous && (
          <Link to={previous.slug} rel="prev">Hey There
            ← {previous.title}
          </Link>
        )}
      </li>
      <li>
        {next && (
          <Link to={next.slug} rel="next">
            {next.title} →
          </Link>
        )}
      </li>
    </ul>
    </nav>
  </Layout>
 )
 }

  export default BlogPostTemplate

export const pageQuery = graphql`
query BlogPostBySlug(
$slug: String!
$previousPostSlug: String
$nextPostSlug: String

) {
site {
  siteMetadata {
    title
    
    
  }
}
contentfulBlockchainlearning(slug: {eq: $slug}){
  title
  subtitle
  content{
    raw
  }

}
previous: contentfulBlockchainlearning(slug: { eq: $previousPostSlug}) {
  title 
}

    


next:  contentfulBlockchainlearning(slug: { eq: $nextPostSlug }) {
     title     
    
 
      
  
 }
 }
 `

解决方法

问题很简单，您无法像尝试创建的那样创建带有空格的 URL。 second page 应该被解析为 second-page，因为 second 和 page 之间的空格可能会导致很多问题。

Gatsby 正在正确创建页面，因为它们出现在 404 页面上（在 gatsby develop 下，404 页面列出了您创建的所有页面）。但是，它没有有效的路线，因为您的 slug 必须是 slugified。理想情况下，应该已经从 CMS 中以正确的格式获取了 slug，但是，您可以添加一些控件来避免这种行为：

 if (posts) {
  posts.forEach((post,index) => {
  let slugifiedPath= post.node.slug.toLowerCase().replace(/\s/g,'-');
  
  const previousPostSlug = index === 0 ? null : posts[index - 1].id
  const $nextPostSlug = index === posts.length - 1 ? null : posts[index + 1].id

  createPage({
    path: slugifiedPath,component: blogPost,context: {
      slug: post.node.slug,previousPostSlug,$nextPostSlug,},})
})
}

这是不言自明的，但是，由于您的路径是以错误的格式获取的，您需要通过以下方式重构它们：

  let slugifiedPath= post.node.slug.toLowerCase().replace(/\s/g,'-');

它将其转换为小写，并使用连字符 (/\s/g) 的正则表达式在全局范围内替换全空格 (-)，从而创建有效的 slug。