jooy2/vitepress-sidebar

A way to add some banners to some titles, transform function for navbar items

Closed this issue · 7 comments

husayt commented

This is not a bug report, but acually a question to check if certain useful feature is available.

Sometimes is very useful to add extra banner or some info to the item in sidebar, would be great to be able to assign some kind of function as transform for title name.

Thanks

jooy2 commented

Hello, Thank you for using vitepress-sidebar.

Can you be more specific about the banner or additional information? If you mean images or any content, it is currently difficult to add anything to the sidebar in vitepress other than text and links.

I think the way to make this possible would be to configure a custom theme to change the default layout:
https://vitepress.dev/guide/extending-default-theme

Regards,

husayt commented

thank you for such a useful plugin

i mean something like this like elementplus has for adding badges

Screenshot_20231024_011635_Chrome.jpg

jooy2 commented

Hello,
I understand your request, this implementation is a feature that should be developed in parallel with custom styles, so i'll see if i can come up with a good solution.

I will not close the issue, but will keep it open until the feature is implemented. Thanks for the report!

  • 👍1
  • 🚀1
ppc-chen822 commented

thank you for such a useful plugin，
I would like to ask, if I put my article under the secondary directory, I will not be able to access it, how to solve this problem?
image
image
image

jooy2 commented

@ppc-chen822

Hello. Thank you for using our plugin.
The issue you created is unrelated to this issue, so if you have any new issues in the future, please create a new issue.

Your documentRootPath value should be /docs.
Your documentRootPath must specify the folder where your .vitepress directory is located.

Please refer to the documentation below:
https://github.com/jooy2/vitepress-sidebar?tab=readme-ov-file#documentrootpath

  • 👍1
  • 😄1
ppc-chen822 commented

Thanks a lot

jooy2 commented

Hello! I apologize for the delayed update.
Currently, there are a couple ways to work around this issue.

  1. enable the following option keepMarkdownSyntaxFromTitle: true.
  2. set the options useTitleFromFileHeading to true if you are fetching from the H1 tag in Markdown, and useTitleFromFrontmatter to true if you are fetching information via the title attribute in Frontmatter. (You cannot set both at the same time).
  3. You can create a badge with custom styling as shown in the example below:

For Frontmatter:

---
title: "Installation <span style='border: 1px solid blue; border-radius: 10px; padding: 2px 4px; color: blue; font-size: 0.9em'>badge</span>"
order: 1
---

For Markdown:

# Installation <span style='border: 1px solid blue; border-radius: 10px; padding: 2px 4px; color: blue; font-size: 0.9em'>badge</span>

Text...

Result:

image

Of course, with a custom theme, you can simplify by not using inline styles and using classes, or you can use more styles.
For more information, see VitePress's documentation: https://vitepress.dev/guide/custom-theme

I'll mark this issue as resolved, but if you run into a new issue, please create a new one.

Regards,