gatsby 多个markdown文件夹的多个收集路线答案

【问题标题】：gatsby multiple collection routes for multiple markdown foldersgatsby 多个markdown文件夹的多个收集路线
【发布时间】：2021-08-29 03:14:23
【问题描述】：

我有两个降价收集路线，我想将它们应用于由子文件夹分隔的两组不同的降价。

我的文件夹结构如下

appfolder
  content
    projects
      project1.md
      project2.md
    article
      article1.md
      article2.md
  src
    pages
      projects
        {MarkdownRemark.frontmatter__slug}.js 
      articles
        {MarkdownRemark.frontmatter__slug}.js

projects/{MarkdownRemark.frontmatter__slug}.js的内容如下

import React from 'react';
import Layout from "../../components/Layout";
import Nav from "../../components/Nav";
import PageHeader from "../../components/PageHeader";
import Footer from "../../components/Footer";
import SimpleReactLightbox from 'simple-react-lightbox'
import { graphql } from 'gatsby'
const ProjectPage = ({data}) => {
    const fm = data.markdownRemark.frontmatter;
    const html = data.markdownRemark.html;
    return (
        <SimpleReactLightbox>
        <Layout pageTitle={fm.title}>
            <Nav />
            <PageHeader title={fm.title} />
            <Footer />
        </Layout>
        </SimpleReactLightbox>
    );
};


export const query = graphql`
query($id: String!) {
    markdownRemark(id: { eq: $id },fileAbsolutePath: {regex: "/(projects)/" }) {
      html
      frontmatter {
        slug
        title
        summary
        icon
      }
    }
}
`

export default ProjectPage;

但 GraphiQL 显示页面是为所有 md 文件生成的。如何将每个收集路线限制到相应的子文件夹。

【问题讨论】：

标签： reactjs graphql markdown gatsby

【解决方案1】：

认为您的问题属于fileAbsolutePath 的正则表达式。

将 (projects) 更改为 projects

【讨论】：

试过了，并没有解决问题。
你能添加你的 gatsby-config 以及你是如何引入它的吗？

【解决方案2】：

在这种情况下，我认为最简单的方法是在您的 frontmatter 中添加一个“关键”值来制作过滤器。例如：

---
key: article
title: Test Title
anotherField: Another field value
---
The body of the markdown

注意：需要时将key: article 更改为key: projects

然后，在您的 GraphQL 查询中使用 filter 类似：

export const query = graphql`
query($id: String!) {
    markdownRemark(id: { eq: $id }, filter: { frontmatter: { key: { eq: "article" },  
          }
        },, ) {
      html
      frontmatter {
        slug
        title
        summary
        icon
      }
    }
}
`

根据需要对其进行调整并检查 localhost:8000/___graphql 游乐场中过滤器的可用性。

【讨论】：

【解决方案3】：

我刚刚遇到了同样的问题。您当前的src/pages 组织似乎没有现成的解决方案。但是经过对盖茨比的讨论，我发现有一些变通方法，虽然我觉得有点不方便。

就像this comment说的：

如果您的源节点包含 category: "article" | "blog" 之类的内容，您可以生成单独的路由，其中包含嵌套的文件 category 类似/{SourceNode.category}/{SourceNode.slug}.tsx 的目录。

如果您的源节点不包含这样的类别字段，那么您可以将其附加到onCreateNode hook 中的节点，或者完全创建用于您的目的的新节点

在您的情况下，如果您可以在 .md 文件的 frontmatter 中添加 category 字段，则可以将 src 的组织更改为

appfolder
  content
    projects
      project1.md
      project2.md
    article
      article1.md
      article2.md
  src
    templates
      project-template.js
      article-template.js
    pages
      {MarkdownRemark.frontmatter__category}
        {MarkdownRemark.frontmatter__slug}.js

然后projects/{MarkdownRemark.frontmatter__slug}.js转到templates/project-template.js，第一篇类似。

现在在您的{MarkdownRemark.frontmatter__slug}.js文件中，您可以将GraphQL查询到的数据转发到相应的模板中。

// {MarkdownRemark.frontmatter__slug}.js
const GeneratedPage = ({ data }) => {
  const templates = {
    project: <ProjectTemplate data={data} />,
    article: <ArticleTemplate data={data} />,
  };

  return templates[data.MarkdownRemark.frontmatter.category];
};

如果无法将category 字段添加到.md 文件中，请使用createNodeField API 以编程方式将其添加到gatsby-node.js 中的MarkdownRemark 节点。可能是这样的：

// gatsby-node.js
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  if (node.internal.type === `MarkdownRemark`) {
    const value = ...; // something mapping the directory of node to certain catecory
    createNodeField({
      name: 'category',
      node,
      value,
    });
  }
};

希望这对您有所帮助。

【讨论】：