使用 Gatsby mdx.slug 的重复页面

Posted 2023-03-08

【中文标题】使用 Gatsby mdx.slug 的重复页面

【英文标题】：Duplicated pages using Gatsby mdx.slug使用 Gatsby mdx.slug 的重复页面

【发布时间】：2021-11-22 15:01:40

【问题描述】：

我在src\pages\mountains 下使用mdx.slug 创建了一组页面，它们运行良好。如果我在路径 src\pages\cycling 中复制相同的 .mdx 文件，我注意到新页面将在 mountains 下，而不是在另一个（在浏览器中）下。 其实cyclyng下我会404页面。 你对这个问题有什么想法吗？

我认为重点在于我的 graphql 查询：

export const query = graphql`
  query($slug: String) 
    mdx(slug: eq: $slug) 
      body
      frontmatter 
        title
        date(formatString: "MMMM DD, YYYY")
        hero_image_alt
        hero_image_credit_link
        hero_image_credit_text
        hero_image 
          childImageSharp 
            gatsbyImageData
          
        
      
    
  
`

使用 $slug 我可以读取整个页面列表，而不仅仅是单个路径下的页面（例如src\pages\mountains）

我刚刚表演了gatsby clean Gatsby.js development 404 page: Imgur

【问题讨论】：

你能分享一下你的项目结构吗？这很奇怪...您是否尝试过运行gatsby clean？ 404 中列出了哪些页面？

在 GitHub 中是github.com/gtsolid/la-corse-toujours

谢谢，你能回答剩下的问题吗？你跑gatsby clean了吗？ 404 页面中列出的页面是什么（这些是 Gatsby 迄今为止生成的页面，因此这是一个很好的调试点，可以查看问题出在哪里）

gatsby clean 是；我如何分享Gatsby.js development 404 page 的屏幕？

上传图片到您编辑的问题

【参考方案1】：

如何使用 GraphiQL 只查询一组页面，而不是全部

您需要向 MDX 添加一些标识符以应用 GraphQL 过滤器。在你的情况下，我会做类似的事情：

---
title: "Cap Corse"
date: "2018-08-05"
type: "cycling_ascent"
hero_image: "./golfu-alisu.jpg"
hero_image_alt: "Golfu di Alisu"
hero_image_credit_text: "AV - 2019"
---
Then in your query:

export const query = graphql`
  query($slug: String) 
    mdx(slug: eq: $slug, type: eq: "cycling_ascent" ) 
      body
      frontmatter 
        title
        date(formatString: "MMMM DD, YYYY")
        hero_image_alt
        hero_image_credit_link
        hero_image_credit_text
        hero_image 
          childImageSharp 
            gatsbyImageData
          
        
      
    
  
`

检查 GraphiQL 游乐场 (localhost:8000/_graphql) 中的符号以检查可用的过滤器和输出。

山脉页面则相反 (type: mountains)。