Список подпапок в боковой панели навигации

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. Вы можете добавить любой путь, но лучше следовать Соглашению о структуре каталогов .

---

В вашем случае есть некоторые соображения.

Во-первых ...

Для маршрутов подпапок необходимо создать README.md (воспринимайте это как index.html). Итак, вам нужна Маршрутизация страниц по умолчанию . Маршрутизатор ожидает, что окончание /{page}/ имеет /{page}/README.md

Попробуйте переименовать ваши индексные страницы в подпапку, например, «{name} /README.md».

Например media.md -> media/README.md.

Во-вторых ...

В вашей конфигурации есть некоторые ошибки дерева.

Я заметил, что вы используете sidebar: {} (как объект). Он предназначен для создания нескольких боковых панелей (разных страниц / разделов), как в документации 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 ..., не по файловой структуре.

НО ... Вы можете организовать разделы боковой панели, сгруппировав их . Например:

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: Не запускается локально, но должно соответствовать структуре / синтаксису. Опять проверь и прокомментируй,