jooy2/vitepress-sidebar

Option to capitalise menu names

Closed this issue ยท 4 comments

husayt commented

This sidebar generator is really coming to shape now. There is an option called hyphenToSpace. Will be great to add capitaliseFilenames and capitaliseFolders which will make first letter capital and that will be a nice touch.

Thank you

husayt commented

there is a very handy library, which can help and provide many options for this:

https://github.com/blakeembrey/change-case

jooy2 commented

Hello! Thank you for using vitepress-sidebar.

The feature you requested can be configured via the capitalizeFirst option, which already exists, and the capitalizeEachWords option, which is new in version 1.18.0.

Currently, i do not distinguish between options for each of the possible files and folders. For files, you can use, for example, Markdown's h1 heading or Frontmatter's title tag to get the division.

If you have any new issues with the feature, please open a new issue. I'll close this one in a few days.

Regards,

husayt commented

@jooy2 this was really what I needed. It works great for me.

Thank you

PS: one question I have is if in case I need to override for files, I can always add title info into frontmatter and with useTitleFromFrontmatter that will work. Is there similar way to do it for folders?

jooy2 commented

@husayt

Yes, due to the nature of the folder structure, you can't customize the title as easily as you can a file, but there is one way: Use the useFolderTitleFromIndexFile option.

The useFolderTitleFromIndexFile option will find the index.md file in that folder and get the title of that file. It uses the title information from the Frontmatter or Markdown h1 tag in the index.md file.

The index.md file can be hidden from the menu list if the includeFolderIndexFile option is false (default is false).

In the example below, the actual menu display title of the Folder is Index-md Title.


Folder structure:

Folder
โ”œโ”€ file-a
โ””โ”€ index.md

vitepress-sidebar options:

generateSidebar({
  documentRootPath: 'example',
  useTitleFromFileHeading: true,
  useFolderTitleFromIndexFile: true // <<------- Add this
});

index.md:

# Index-md Title

`index.md` file's content...

Results:

[
  {
    text: 'Index-md Title',
    items: [
      {
        text: 'File A', // `file-a` title
        link: '/file-a'
      }
    ]
  },

Regards,