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

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

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

请记住，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（不同的 pages/sections），就像在导航栏中看到的 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
}

希望对您有所帮助。 :)

Note: Maybe I missed some route, so check it your self.

Note 2: Not run in local, but should be fine the structure/syntax. Again, check it and comment,

Answer 2

上面的 really helped us. We're running Vuepress 1.3.1 and ran into some issues using the sidebar groups示例代码。（第三名）

我们最终得到了一个相当复杂的 sidebar and had to structure it accordingly. Below is an abbreviated version of our config file. (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

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

List subfolders in sidebar navigation

vue.js

vuepress