在侧边栏导航中列出子文件夹

Question

在我的config.js 文件中，我创建了这个侧边栏

    sidebar: {
        '/docs/': [
            '',
            'gettingStarted',
            'guides',
            'media'
        ],
        '/docs/gettingStarted/': [
            'creatingFirstApplication',
            'installing',
            'understanding'
        ],
        '/docs/gettingStarted/creatingFirstApplication': [
            'setup'
        ],
        '/docs/gettingStarted/installing': [
            'installation'
        ],
        '/docs/gettingStarted/understanding': [
            'why',
            'useCases',
            'coreConcepts',
            'architecture',
            'gettingHelp'
        ],
        '/docs/guides/': [
            'firstApplication'
        ],
        '/docs/media/': [
            'downloads',
            'onlineResources'
        ],
        '/docs/media/downloads': [
            'brochure'
        ],
        '/docs/media/onlineResources': [
            'articles',
            'videos'
        ]
    }

但我在构建页面时只能看到顶级降价文件。所以在这里你可以看到我的项目结构

在构建页面时，只有 README.md、gettingStarted.md、guides.md 和 media.md 会被渲染。

我该如何解决？

如果您需要更多信息，请告诉我！

---

所以这是当前状态

这是一个显示我想要实现的示例

---

我在这里找到了更多信息

https://vuepress.vuejs.org/theme/default-theme-config.html#multiple-sidebars

我试图反转我的配置

    sidebar: {
        '/docs/gettingStarted/creatingFirstApplication': [
            'setup'
        ],
        '/docs/gettingStarted/installing': [
            'installation'
        ],
        '/docs/gettingStarted/understanding': [
            'why',
            'useCases',
            'coreConcepts',
            'architecture',
            'gettingHelp'
        ],
        '/docs/gettingStarted/': [
            'creatingFirstApplication',
            'installing',
            'understanding'
        ],
        '/docs/guides/': [
            'firstApplication'
        ],
        '/docs/media/downloads': [
            'brochure'
        ],
        '/docs/media/onlineResources': [
            'articles',
            'videos'
        ],
        '/docs/media/': [
            'downloads',
            'onlineResources'
        ],
        '/docs/': [
            '',
            'gettingStarted',
            'guides',
            'media'
        ]
    }

但这没有帮助。

---

我创建了一个小型存储库，提供一个小型文档，每个目录有两页。

https://github.com/Garzec/VuePressTest

我希望这会有所帮助。

Answer 1

answer above 确实帮助了我们。我们正在运行 Vuepress 1.3.1，使用上面的 sidebar groups 示例代码遇到了一些问题。 （第三下）

我们最终得到了一个相当复杂的sidebar，并且必须相应地对其进行结构化。下面是我们的配置文件的缩写版本。 (whole config file)

module.exports = {
   // Removed other config options for readability 
   themeConfig: {
      // Removed other themeConfig options for readability 
      sidebar: [
         "/",      
         {
            title: 'AccuTerm',
            path: '/accuterm/',
            collapsable: true,
            children: [
               {
                  title: 'Mobile',
                  path: '/accuterm/mobile/',
                  collapsable: true,
                  children: [
                     ['/accuterm/mobile/quick-start/', 'Quick Start'],
                     ['/accuterm/mobile/colors-and-themes-settings/', 'Colors & Themes Settings'],       
                     ['/accuterm/mobile/connection-settings/', 'Connection Settings'],
                     ['/accuterm/mobile/keyboard-and-clipboard-settings/', 'Keyboard & Clipboard Settings'],
                     ['/accuterm/mobile/screen-settings/', 'Screen Settings'],
                     ['/accuterm/mobile/terminal-settings/', 'Terminal Settings'],
                     ['/accuterm/mobile/user-guide/', 'User Guide']
                  ]
               },
               {
                  title: 'Web',
                  path: '/accuterm/web/',
                  collapsable: true,
                  children: [
                     ['/accuterm/web/web-introduction/', 'Web Introduction'],
                     ['/accuterm/web/getting-started/', 'Getting Started'],
                     ['/accuterm/web/release-notes/', 'Release Notes'],
                     ['/accuterm/web/activating-accuterm-desktop-licensing/', 'Activating AccuTerm Desktop Licensing'],
                     ['/accuterm/web/batch-user-actions/', 'Batch User Actions'],
                     ['/accuterm/web/change-password/', 'Change AccuTerm.IO Password'],
                     ['/accuterm/web/clipboard-settings/', 'Clipboard Settings'],
                     ['/accuterm/web/connection-settings/', 'Connection Settings'],
                     ['/accuterm/web/creating-profiles/', 'Creating Profiles'],
                     ['/accuterm/web/creating-roles/', 'Creating Roles'],
                     ['/accuterm/web/creating-users/', 'Creating Users'],
                     ['/accuterm/web/font-and-character-settings/', 'Font & Character Settings'],
                     ['/accuterm/web/installing-accuterm-io-server/', 'Installing AccuTerm IO Server'],
                     ['/accuterm/web/keyboard-options/', 'Keyboard Options'],
                     ['/accuterm/web/mouse-settings/', 'Mouse Settings'],
                     ['/accuterm/web/sound-settings/', 'Sound Settings'],
                     ['/accuterm/web/terminal-screen-options/', 'Terminal Screen Options'],
                     ['/accuterm/web/terminal-settings/', 'Terminal Settings'],
                     ['/accuterm/web/web-profiles/', 'Web Profiles'],
                     ['/accuterm/web/rezume-session-resilience/', 'AccuTerm ReZume Session Resilience'],
                     ['/accuterm/web/phi-reports/', 'PHI Reports']             
                  ]
               }
            ]
         },
         ["/docs/jbase/", "jBASE"]
      ]
   }
};

目录结构

希望看到此示例将有助于澄清侧边栏组。要查看整个侧边栏和目录结构，请在 github 上查看：
Vuepress config file
Vuepress directory structure

Answer 2

这...有点令人困惑，但据我了解，您需要子文件夹...

请记住，VuePress 侧边栏用于按特定顺序组织用户查看项目的方式。来源与名称或 .md 文件的位置无关。您可以从任何路径添加，但最好遵循Directory structure convention。

---

您的情况有一些注意事项。

首先...

对于子文件夹路由，您需要创建一个README.md（将其视为index.html）。所以，你需要一个Default Page Routing。路由器期望结尾/{page}/ 有一个/{page}/README.md

尝试将您的索引页面重命名为其子文件夹，例如“{name}/README.md”。

例如media.md --> media/README.md。

其次...

您的配置中有一些树错误。

我注意到您使用sidebar: {}（作为对象）。这是为了制作multiple sidebars（不同的页面/部分），就像您在导航栏中看到的VuePress文档Guide | Config Reference | Plugin |etc一样。如果这是您的目标，例如，您必须将所有子项放在“/docs/”中并创建一个后备：

sidebar: {
    '/docs/': [
        '', // this is your docs/README.md
        // all sub-items here (I explain later)
    ],
    '/': [ // Your fallback (this is your landing page)
        '' // this is your README.md (main)
    ]       
}

第三...

正如我之前介绍的，您需要将所有项目放在该主目录下。

不用为每个页面创建不同的路由，您可以（在我之前提到的重命名之后）您需要记住侧边栏（至少在默认主题中）只有 1 个路由级别。它们的层次结构级别由 H2、h3、h4...、 不是按文件结构。

但是...您可以通过grouping it 组织您的侧边栏部分。例如：

sidebar: {
  '/docs/': [
    '', // this is your docs/README.md

    {
      title: 'Getting Started',
      collapsable: false,
      children: [
        'gettingStarted/', // 'docs/gettingStarted/README.md' if you renamed before
        'gettingStarted/creatingFirstApplication',
        'gettingStarted/creatingFirstApplication/setup', // maybe better to move content to `creatingFirstApplication.md`
        'gettingStarted/installing/installation',

        // Maybe group all this in another another group if is much extense (instead of Getting Started)
        // or join into one file and use headers (to organize secions)
        'gettingStarted/understanding/why', 
        'gettingStarted/understanding/useCases',
        'gettingStarted/understanding/coreConcepts',
        'gettingStarted/understanding/architecture',
        'gettingStarted/understanding/gettingHelp',
      ]
    },
    {
      title: 'Guides',
      collapsable: false,
      children: [
        'guides/', // 'docs/guides/README.md' if you renamed before
        'guides/firstApplication',              
      ]
    },
    {
      title: 'Media',
      collapsable: false,
      children: [
        'media/', // 'docs/media/README.md' if you renamed before
        'media/downloads/brochure',
        'media/onlineResources/articles',
        'media/onlineResources/videos', 
      ]
    }
  ],

  '/': [ // Your fallback (this is your landing page)
    '' // this is your README.md (main)
  ]       
}

如果您需要更多拆分，请考虑其他部分（而不是使用“/docs/”将每个部分作为新的导航栏项目（如 Guide | Config Reference | Plugin |etc））。

如果不是，也可以将选项sidebarDepth设置为2：

themeConfig: {
  sidebar: {
    // . . . 
  },
  sidebarDepth: 2
}

---

我希望这对你有帮助。 :)

注意：也许我错过了一些路线，所以你自己检查一下。

注意 2：不在本地运行，但结构/语法应该没问题。再次检查并发表评论，