您如何确定 gatsbyjs 中页面之间的父子关系？

Question

更新：2020 年 2 月 9 日 我在https://github.com/gatsbyjs/gatsby/issues/26752提出了一个问题

---

是否有任何合乎逻辑且简单的方法来告诉 gatsby 子文件夹中的给定页面是子页面？

我知道如果您将页面放在/src/pages/subpages 下的子文件夹中，gatsby 将在给定文件夹下生成一条路由，例如：

/src/pages/page-01.js
/src/pages/page-02/index.js
/src/pages/page-02/child-page-of-02

会给你：

http://localhost:8000/page-01
http://localhost:8000/page-02
http://localhost:8000/page-02/child-page-of-02

现在，我尝试用页面链接轻松填充侧边栏，并希望缩进子页面。 为此，我使用了查询：

query MyQuery {
  allSitePage {
    nodes {
      id
      children {
        id
      }
    }
  }
}

结果是：

{
  "data": {
    "allSitePage": {
      "nodes": [
        {
          "id": "SitePage /page-01",
          "children": []
        },
        {
          "id": "SitePage /dev-404-page/",
          "children": []
        },
        {
          "id": "SitePage /",
          "children": []
        },
        {
          "id": "SitePage /page-02/",
          "children": []
        },
        {
          "id": "SitePage /page-02/child-page-of-02/",
          "children": []
        }
      ]
    }
  },
  "extensions": {}
}

如您所见，children 数组是空的。这不是我所期待的。 我期待这个输出：

        {
          "id": "SitePage /page-02/",
          "children": ["SitePage /page-02/child-page-of-02/"]
        },
        {
          "id": "SitePage /page-02/child-page-of-02/",
          "children": []
        }

有人搞定这个吗？如果是，如何？ 我已经在文档中进行了查找，但找不到任何有用的...

没有：Page Creation 和 Node Creation

Answer 1

好的，所以我最终自己制作了一个插件来满足我的需求，它被称为gatsby-plugin-better-page-tree 你可以在这里找到它：https://github.com/dream-bit-de/gatsby-plugin-better-page-tree。

---

简短的操作方法：

gatsby-plugin-better-page-tree 会生成这样的关系：/src/pages/subpages,

/src/pages/parentpage/index.js
/src/pages/parentpage/subpage/index.js

现在给你：

{
  "node": {
    "id": "PageTree-parentpage-id-8496bef7-3809-4fac-8f97-ab2b98b7f54d",
    "name": "Parentpage",
    "pathRaw": "/parentpage/",
    "pathNoTrail": "/parentpage",
    "isparentpage": true,
    "children": [
      {
        "id": "PageTree-parentpage/subpage-id-bc8cec01-3f85-47d2-aec9-2e3ddc76df32",
        "name": "Subpage",
        "pathRaw": "/parentpage/subpage/",
        "pathNoTrail": "/parentpage/subpage"
      }
    ]
  },
  "node": {
    "id": "PageTree-parentpage/subpage-id-bc8cec01-3f85-47d2-aec9-2e3ddc76df32",
    "name": "Subpage",
    "pathRaw": "/parentpage/subpage/",
    "pathNoTrail": "/parentpage/subpage",
    "isparentpage": false,
    "children": []
  }
}

只需使用npm install @dream-bit-de/gatsby-plugin-better-page-tree 或yarn install @dream-bit-de/gatsby-plugin-better-page-tree，这是您的选择。 之后你必须修改你的gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Your Super Gatsby Site!`,
    description: `I love Gatsby!`,
    author: `Community,`,
    siteUrl: `https://www.my-gatsby-site-yeeehaaaw.com/`
  },
  plugins: [
    // ... other plugins
    `@dream-bit-de/gatsby-plugin-better-page-tree`
  ]
};

例如，要在侧边栏中使用它，您必须像这样使用它：

sidebar.js:

import React from 'react';
import { Link, useStaticQuery, graphql } from 'gatsby';

function Sidebar() {
  const Pages = useStaticQuery(graphql`
    query {
      allPageTree {
        edges {
          node {
            id
            name
            pathRaw
            pathNoTrail
            isRootPage
            children {
              id
              ... on PageTree {
                id
                name
                pathRaw
                pathNoTrail
              }
            }
          }
        }
      }
    }
  `);
  const { nodes } = Pages.allSitePage;

return (
     {nodes.map((n) => (
     <ul key={`sidebar-${n.id}`}>
      <li>
       <Link to={n.pathRaw}>
        <span>{n.name}</span>
        {
         n.children && n.children.length > 0 ? (
         {nodes.map((n) => (
          <ul key={`sidebar-${n.id}`}>
            <li>
              <Link to={n.pathRaw}>
                <span>{n.name}</span> 
              </Link>
            </li>
          </ul>
         ) : null
        }
       </Link>
      </li>
     </ul>
     ))}
);

就是这样！

请注意，查询将首先为您提供所有页面！如果您需要，您必须确保没有重复项出现在您的侧边栏中。