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'
        ]
    }

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

仅在构建页面时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：不能在本地运行，但应使用适当的结构/语法。再次检查并发表评论，

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

2 个答案: