Gatsby slug 没有生成正确的页面

Posted 2023-02-24

【中文标题】Gatsby slug 没有生成正确的页面

【英文标题】：Gatsby slug does not generate correct page

【发布时间】：2020-12-15 11:00:38

【问题描述】：

我的 gatsby slug 没有生成正确的页面 url。 它应该生成 -> /second-post-getting-started 但它正在生成 -> /second-post-getting-started/second-post-getting-started

它将 slug 添加到当前页面，而不是返回然后添加。我已经交叉检查了 gatsby-node.js 等页面但找不到错误。

这是 gatsby-node.js 代码。

 
const path = require('path')
const  slugify  = require('./src/util/utilityFunctions')
const authors = require('./src/util/authors')
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'),
   tag: path.resolve('src/templates/tag-posts.js'),
   tagsPage: path.resolve('src/templates/tags-page.js'),
   authorPosts: path.resolve('src/templates/author-posts.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,
       // Find author imageUrl from author array and pass it to template
       imageUrl: authors.find(x => x.name === node.frontmatter.author)
         .imageUrl,
     ,
   )
 )

 // Create posts pagination pages
 const postsPerPage = 2
 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,
     ,
   )
 )
 // Get all tags
 let tags = []
 _.each(posts, edge => 
   if (_.get(edge, 'node.frontmatter.tags')) 
     tags = tags.concat(edge.node.frontmatter.tags)
   
 )

 let tagPostCounts =  //  tutorial: 2, design: 1
 tags.forEach(tag => 
   // Or 0 cause it might not exist yet
   tagPostCounts[tag] = (tagPostCounts[tag] || 0) + 1
 )

 // Remove duplicates
 tags = _.uniq(tags)

 // Tags page (all tags)
 createPage(
   path: '/tags',
   component: templates.tagsPage,
   context: 
     tags,
     tagPostCounts,
   ,
 )

 // Tag posts pages
 tags.forEach(tag => 
   createPage(
     path: `/tag/$_.kebabCase(tag)`,
     component: templates.tag,
     context: 
       tag,
     ,
   )
 )

 // Create author posts pages
 authors.forEach(author => 
   createPage(
     path: `/author/$slugify(author.name)`,
     component: templates.authorPosts,
     context: 
       authorName: author.name,
       imageUrl: author.imageUrl,
     ,
   )
 )

index.js 代码

       import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import  graphql, StaticQuery  from "gatsby"
import Post from "../components/Post"
import PaginationLinks from '../components/PaginationLinks'

const IndexPage = () => 
  const postPerPage = 2
  let numberOfPages
  return(
  <Layout pageTitle = "Full Stack Me" 
  pageSubtitle = "Just an Encyclopedia for Web Devs" >
    <SEO title="Home" keywords=[`gatsby`, `application`, `react`] />
      <StaticQuery 
      query=indexQuery render=data => 
        numberOfPages = Math.ceil(data.allMarkdownRemark.totalCount / postPerPage)
      return(
        <div>
          data.allMarkdownRemark.edges.map(( node ) => (
            <Post  
            key=node.id 
            title=node.frontmatter.title
            author=node.frontmatter.author
            slug=node.fields.slug
            date=node.frontmatter.date
            body=node.excerpt
            fluid=node.frontmatter.images.childImageSharp.fluid
            tags=node.frontmatter.tags
            />
          ))
          <PaginationLinks currentPage=1 numberOfPages=numberOfPages/>
        </div>
      )
    
    />
  </Layout>
  )


const indexQuery = graphql`
query
  allMarkdownRemark(
    sort:  fields: [frontmatter___date], order: DESC 
    limit: 2
    ) 
    totalCount
    edges
      node
        id
        frontmatter
          title
          date(formatString: "MMM Do YYYY")
          author
          tags
          images
            childImageSharp
              fluid(maxWidth: 600)
                ...GatsbyImageSharpFluid
              
            
          
        
        fields
          slug
        
        excerpt
      
    
  

`

export default IndexPage

【问题讨论】：

您确定不只是在 html/JSX 中链接到错误的路径（例如 foo 而不是 /foo）？

我在哪里可以得到那个文件。如果你想看看这里是 git repo link

【参考方案1】：

当slug 没有以正斜杠作为前缀时，您将链接到slug：

<Link to=slug>/* No slash at the beginning */
  <Img className="card-image-top" fluid=fluid />
</Link>

(source)

这使它成为path-relative URL。如果您正在查看/foo/ 的页面并链接到href="bar"，则完整的URL 路径将为/foo/bar。您几乎肯定希望使用绝对路径，但主机名相对 URL，您可以通过确保始终以斜杠开头的 URL 来做到这一点：

<Link to=`/$slug/`>/* With starting and trailing slashes */
  <Img className="card-image-top" fluid=fluid />
</Link>