vue.js - 在侧边栏导航中列出子文件夹

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

我希望这有帮助。

score 17 · Accepted Answer

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

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

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

首先...

对于子文件夹路由，您需要创建一个README.md（把它当作一个index.html）。因此，您需要一个Default Page Routing。路由器期望结尾/{page}/有一个/{page}/README.md

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

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

第二...

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

我注意到您使用sidebar: {}（作为对象）。这旨在制作多个侧边栏Guide | Config Reference | Plugin |etc（不同的页面/部分），就像您在其导航栏中看到的VuePress 文档中一样。如果这是您的目标，例如，您必须将所有子项放在“/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... 组成，而不是文件结构。

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

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：不在本地运行，但结构/语法应该没问题。再次检查并发表评论，

score 6 · Accepted Answer

上面的答案对我们很有帮助。我们正在运行 Vuepress 1.3.1，并在使用上面的侧边栏组示例代码时遇到了一些问题。（第三下）

我们最终得到了一个相当复杂的侧边栏，并且必须相应地对其进行结构化。下面是我们的配置文件的缩写版本。（整个配置文件）

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 配置文件
 Vuepress 目录结构

vue.js - 在侧边栏导航中列出子文件夹

2 回答 2

Related

Reference