Help with multiple sidebar

[javinba]

Hello!

First of all thanks for your time.

I am trying to autogenerate a structure like the following:

sidebar: {
          "/en/topic/": [
            {
              text: 'A topic',
              collapsed: false,
              items: [
                { text: 'chocolate title', link: './chocolate' },
                { text: 'cacao title', link: './cacao' },
              ],
            },
            {
              text: 'Other topic',
              collapsed: false,
              items: [
                { text: 'foo, link: './foo_file },
              ],
            },
          ],
          "/en/topic2/": [
            {
              text: 'Last topic,
              items: [
                { text: 'Bar title', link: './bar' },
                { text: 'Bar title 2', link: './bar-count'2 }

}

In a project with a structure like:
docs/en/topic/documents

I have achieved something similar to what I expected by creating subfolders for each of the topics but I can't find a way to choose the name for each text: topic`.

Also, I can't get useIndexFileForFolderMenuInfo to work properly.

Any ideas?

Thanks in advance

[jooy2]

Hello, sorry for late response.

I couldn't figure out what this means. Can you explain a little more?

" but I can't find a way to choose the name for each text: topic`. "

For the useIndexFileForFolderMenuInfo option, the name and link of the folder is set based on the existence of an index.md file within each folder. However, if the index.md file does not exist within the folder, the information from the original folder is used and no link is created.

If you could elaborate on the issue you're experiencing, I think we can help troubleshoot it.

Regards,

[javinba]

Thanks for your answer and sorry if I haven't explained myself well enough.

Basically I want to create a structure like the one in the image::

My current configuration (without using your plugin) is like this:

"/en/tutorial/": {
            base: "/en/tutorial/",
            items:
              [
                {
                  text: 'Set up your account',
                  collapsed: false,
                  items: [
                    { text: 'Log in', link: 'login' },
                    { text: 'Account creation and login', link: 'account-creation' },
                    { text: 'Organisation and membership', link: 'organisation' },
                    { text: 'Settings menu', link: 'settings-menu' },
                  ],
                },
                {
                  text: 'My first residential project',
                  collapsed: false,
                  items: [
                    { text: 'Step 1. Creating a new project', link: 'step-1' },],},},}

I am trying to recreate it in this way:

generateSidebar([
          {
            documentRootPath: 'docs/',
            rootGroupText: '',
            scanStartPath: 'en/tutorial/',
            resolvePath: '/en/tutorial/',
            useTitleFromFileHeading: true,
            collapsed: false,
            useIndexFileForFolderMenuInfo: true,
          },
          {
              Other page
          },
        ]),

In principle I get a solution very similar to the one I am looking for but:

• The section letters are not in bold.
• When I click on the section name I enter the index file and I would like to avoid this.

[jooy2]

Hello, Thank you for your response.

The section letters are not in bold.

I recently released version 1.14.0 with a fix for this issue.
The rootGroupText, rootGroupLink, and rootGroupCollapsed options are deprecated in the new version. If you remove these options and run it, you should see the correct section for each subdirectory (e.g., each directory name will be bolded, starting with the top level).

When I click on the section name I enter the index file and I would like to avoid this.

The useIndexFileForFolderMenuInfo option replaces the folder name with the index.md file name and creates a link to the index.md file if it exists inside the directory. If the index.md file does not exist, it is ignored.

So if you want to add the index.md file to the menu but don't want to replace it with a folder, you should use the includeFolderIndexFile option instead of this option.

---

I'd appreciate it if you could share if the issue is resolved after upgrading to the new version, and let me know if you encounter any other issues.

Thanks.

[javinba]

Thank you very much for your time.

I miss the rootGroupText parameter as I could use it to define the name of the FAQ section. This name appeared in bold, with the new update I am not able to replicate it. Now if I enter the FAQ section I get the index.md which is fine but I am unable to get it:

The issue is almost solved for our use, the only thing I can't reach is to avoid entering the index.md file for each section.

I really only use that file to extract the name of the subsections without having to modify the name of the folders.

The operation I would need is the same as you get when there is no index.md file inside each section but being able to name the section in some way. It occurs to me that if the index.md file only contains an H1 it would work in the way I indicated and otherwise in the current way but I don't know how complicated it would be to develop that.

I do this in the configuration above by modifying the text value as in text: 'Set up your account'.

In any case thank you very much for everything!

[javinba]

In addition, in the "Tutorial" the link to the next and previous page loops as follows:

• If you are inside the articles it works correctly
• Being in the index.md file of each section there is only one link to the next page being always the link to the index.md of the first section and causing a kind of loop. I think this may have something to do with how the paths are defined, here is the next issue I made in Vitepress:

vuejs/vitepress#2961

Best regards!

[jooy2]

Hello, many hanks for sharing your additional issue.

I just released a new vitepress-sidebar version 1.15.0, here are the changes:

• After review, i decided that it was better to keep the code related to rootGroup, so i have restored the rootGroupText, rootGroupLink and rootGroupCollapsed options to be available again in the new version. I apologize for the confusion.
• I fixed it for multiple sidebars by adding a base property (the property value is the same as the value of resolvePath) to allow correct navigation.

However, the issue of the bottom navigation bar looping for index.md links persisted despite adding the base attribute. This doesn't seem to be an issue with vitepress-sidebar, perhaps a routing issue with index.html that causes the current menu to not be found.

Side note: If you use debugPrint among the sidebar options, you can see the full output (for multiple sidebars, just put it in a random object and it will show all menus).

Regards,

[javinba]

Thank you very much for your time.

It works very well, I've only found one issue that I'm not sure if it's my mistake or not.

With the following configuration:

            documentRootPath: 'docs/',
            scanStartPath: 'en/tutorial/',
            resolvePath: '/en/tutorial/',
            useTitleFromFileHeading: true,
            collapsed: false,
            useIndexFileForFolderMenuInfo: true,
            debugPrint: true,

I get something like:

  "/en/tutorial/": {
    "base":"/en/tutorial/",
    "items": [
      {
        "text": "My first residential project",
        "link": "en/tutorial/first-project/index",
        "items": [
          {
            "text": "Step 1. Creating a new project",
            "link": "en/tutorial/first-proyect/step-1"
          },
          {
            "text": "Step 2. 3D design of the installation",
            "link": "en/tutorial/first-project/step-2"
          },] ,}

Is there a way to avoid link: "en/tutorial/first-project/index", ? It turns out that with my current setup when I click on each section I go to 404 PAGE NOT FOUND.

Thank you very much, best regards!

[jooy2]

Hello, Thank you for reporting the issue.

I just released a new version, 1.16.0, where i split the option into two so that you can selectively get either the name or the link for the index file, instead of the old option that got both the name and the link.

• The useIndexFileForFolderMenuInfo option is deprecated.
• To get the title information of index.md in the folder, use useFolderTitleFromIndexFile (the name defaults to index. I recommend using the useTitleFromFileHeading or useTitleFromFrontmatter options to get the title of the index.md file).
• Use useFolderLinkFromIndexFile if you want to be able to navigate to a link in index.md when clicking on the folder menu.
• Both of the above options will use the default folder information if the index.md file does not exist.
• The index.md file can be hidden or shown by the includeFolderIndexFile option.

Thanks to you reporting the issues, I've been able to make a lot of improvements to the plugin, so thank you again for your feedback. 😄

[javinba]

Hello!

Thanks to you for the excellent work you are doing, it is a very useful plugin, especially for cases where the structure is going to be multilingual.

I think I have found one more issue and that is that with the following configuration:

{
            documentRootPath: 'docs/',
            scanStartPath: 'en/tutorial/',
            resolvePath: '/en/tutorial/',
            useTitleFromFileHeading: true,
            collapsed: false,
            useFolderTitleFromIndexFile: true,
            debugPrint: true,
          },

I get something like:

  "/en/tutorial/": {
    "base": "/en/tutorial/",
    "items": [
      {
        "text": "My first residential project",
        "items": [
          {
            "text": "Step 1. Creating a new project",
            "link": "en/tutorial/first-project/step-1"
          },
          {
            "text": "Step 2. 3D design of the installation",
            "link": "en/tutorial/first-project/step-2"
          },

Where the link generated for example for Step1 is http://localhost:5173/en/tutorial/en/tutorial/first-proyect/step-1 which seems incorrect to me. I think that with the base you would only have to add the section folder to the article and it would look something like link: first-project/step-2.

If it is not my mistake please let me know.

Thank you so much for all your time 😊!

[jooy2]

Hello,

This issue appears to be the same as the issue below:
#94

I have just released version 1.16.5 which fixes the above issue.
I would appreciate it if you could check if the issue is resolved after upgrading the module.

Regards,

[javinba]

Perfect, everything works great.

Congratulations for the plugin, I think it is especially useful for internalisation cases where the structure has this form:

./
├── en/
│ ├─── directory_1/
│ │ ├─── foo.md
│ ├├── directory_2/
│ │ │ ├─── subdirectory_1/
│ │ ├──── subdirectory_2/
│ │ ├─── ├── subdirectory_3/
│ │ └└─── index.md
│ └─── index.md
├── en/
│ ├─── directory_1/
│ │ ├─── foo.md
│ ├├── directory_2/
│ │ │ ├─── subdirectory_1/
│ │ ├──── subdirectory_2/
│ │ ├─── ├── subdirectory_3/
│ │ └└─── index.md
│ └─── index.md

Since in these cases the constant modification of the config.ts file can become painful.

Thanks for everything, hugs 🤗 !

[jooy2]

Thank you for confirming that the issue has been resolved.

I'll look into creating an easy menu per route for multiple sidebars in the future.
And i'll close this issue now, but if you run into any new issues, please open a new one.

Regards,