如何处理 GatsbyJS 中 markdown 帖子之间的父/子关系

Posted 2023-03-08

【中文标题】如何处理 GatsbyJS 中 markdown 帖子之间的父/子关系

【英文标题】：How to handle parent/child relationship between markdown posts in GatsbyJS

【发布时间】：2021-12-31 14:30:34

【问题描述】：

我想知道是否有一个优雅的解决方案来处理 Gatsby 中的两级父/子关系？

我正在建立一个展示产品的网站，其中一些产品有多种变体。

我的项目有以下两级文件夹结构：

src/posts
│
└───Product_A
│   │   index.md
│   │   image.png
│   │ 
│   └───Variants
│       └───Variant_1
│       │   index.md
│       │
│       └───Variant_2
│       │   index.md
│   
└───Product_B
│   │   index.md
│   
└───Product_C
│   │   index.md
│   │
│   └───Variants
...    

每个产品文件夹在 markdown、图像和可选的 Variants 文件夹中包含一篇文章（对于具有一个或多个变体的产品）。 我还使用 Markdown frontmatter 来描述父产品和子产品的产品属性。

我必须以“折叠”方式（同时显示产品及其变体数量）和展开方式（以扁平结构显示所有产品及其变体）在主页上显示产品及其变体，如下所示：

在产品页面上，我必须显示具有如下产品的产品变体：

我还必须确定产品是父产品还是子产品，并据此在产品页面上显示略有不同的设计/内容。

我目前正在尝试结合使用 GraphQL 过滤器和 fileAbsolutePath 来获取特定产品的变体：

  allMarkdownRemark( filter: fileAbsolutePath: glob: "**/Product_A/Variants/**")
    edges 
      node 
        fileAbsolutePath
        fields
          slug
        
        excerpt
        frontmatter 
          title
        
      
  

而且我必须依赖包含“/Variants/”文本的 fileAbsolutePath 或 slug 字段来在代码中区分父级和子级（计算产品变体主页并在展开的视图中显示）。

之前看到有人问similar questions，建议使用GraphQL schema自定义，但是好像太复杂了。

我想知道是否有更简单的方法来完成我在 Gatsby 中所做的事情，或者是否有针对父子结构的现成解决方案？

我正在使用 Gatsby 2.3.23 和 MarkdownRemark。

【参考方案1】：

我同意使用GraphQL schema customization 是最理想、更简洁、更优雅的解决方案，但是，如果您无法选择，我会为每个父产品考虑一种key 值，以便可以使用作为过滤器标识符。给定：

src/posts
│
└───Product_A
│   │   index.md

所以在 index.md 中：

---
key: product A
someField: Some value
someField2: Some value 2
---

然后，在您的查询字段中，您可以执行以下操作：

  allMarkdownRemark( filter: key: eq: "product A" )
    edges 
      node 
        fileAbsolutePath
        fields
          slug
        
        excerpt
        frontmatter 
          title
        
      
  

其余的以此类推。

【讨论】：

谢谢，这正是我所做的。我必须保持两级文件夹结构。所以在 gatsby-node.js onCreateNode() 我添加了父键（基于我从 fileAbsolutePath 读取的文件夹结构）。后来我在页面模板中使用该键。