vuepress / ecosystem

Official plugins and themes for VuePress2
https://ecosystem.vuejs.press
MIT License
20 stars 26 forks source link

[Feature request] Automatically prepend all paths in `navbar` and `sidebar` with root path of locale #124

Closed lifehackerhansol closed 1 month ago

lifehackerhansol commented 1 month ago

Clear and concise description of the problem

As per #110, all paths in the theme configuration must be hardcoded. This makes it slightly difficult to manage several translated locales as all of them must be manually handled by the end user.

Suggested solution

Since the i18n page on VuePress and default theme locale documentation both suggest that a static path has to be passed anyway, I feel that it would make sense if the configurations themselves do not need to have the locale path hardcoded for navbar and sidebar, and be automatically prepended, reducing complexity on the user side.

For instance, if a user defines:

    sidebar: {
        '/get-started.html': [
            ...

then it can be interpreted as /zh_CN/get-started.html.

Alternative

At the moment, it is also impossible to use a variable for items in sidebar for some reason, i.e. this isn't possible and throws some error:

const locale = 'zh_CN';
sidebar: {
    `/${locale}/get-started.html`: [
        ...

It would be nice if this was supported, as it would be easier to enable languages by just changing $locale somewhere.

Additional context

No response

Mister-Hope commented 1 month ago

CHATGPT or google is a good thing.

To use variable on property, you need a square bracket around it.

const key = "class"
const value = "dark"

const attr = {
  [key]: value
}

Also, zh_CN is not in any standard format, while a standard one is zh-CN

Mister-Hope commented 1 month ago

Obviously, I have no responsibility to teach you JavaScript basics here. So closing this one.

Mister-Hope commented 1 month ago

By the way, If you write the grammar well, your alternative is our recommended approach about reusing navbar and sidebar across the locates. You can create a generator function for your navbar and sidebar , and reuse it.

E.g.:

const getNavbar = (locales: string) => [
  `${locales}`,
  `${locales}guide/`,
  `${locales}about`,
]