Using sidebar with different locales
Closed this issue · 1 comments
dragomano commented
Hello. I am trying to use your plugin with multiple languages. Root (english) files stored in src dir. Each additional language stored in src/{lang_code} dir. The titles display normally, according to the plugin settings, but there is no language code in the link addresses. How can this be fixed?
project view
- src
-
- ** english md files and dirs
-
- ru (dir)
-
- el (dir)
Expected behavior
I want the addresses of links in the sidebar to change when switching languages.
config.mjs
import { defineConfig } from 'vitepress';
import { generateSidebar } from 'vitepress-sidebar';
export default defineConfig({
srcDir: './src',
themeConfig: {
search: {
provider: 'local',
},
sidebar: generateSidebar({
documentRootPath: 'src',
useTitleFromFileHeading: true,
useTitleFromFrontmatter: true,
useFolderTitleFromIndexFile: true,
sortMenusByFrontmatterOrder: true,
excludeFolders: ['ru', 'el'],
}),
},
locales: {
root: {
label: 'English',
lang: 'en',
},
ru: {
label: 'Русский',
lang: 'ru',
themeConfig: {
sidebar: generateSidebar({
documentRootPath: 'src/ru',
useTitleFromFileHeading: true,
useTitleFromFrontmatter: true,
useFolderTitleFromIndexFile: true,
sortMenusByFrontmatterOrder: true,
}),
},
},
el: {
label: 'Ελληνικά',
lang: 'el',
themeConfig: {
sidebar: generateSidebar({
documentRootPath: 'src/el',
useTitleFromFileHeading: true,
useTitleFromFrontmatter: true,
useFolderTitleFromIndexFile: true,
sortMenusByFrontmatterOrder: true,
}),
},
},
},
});
dragomano commented
I solved this problem by using the resolvePath
parameter and passing an array instead of an object to generateSidebar:
import { defineConfig } from 'vitepress';
import { generateSidebar } from 'vitepress-sidebar';
import locales from './locales';
const sidebar = {
documentRootPath: 'src',
useTitleFromFileHeading: true,
useTitleFromFrontmatter: true,
useFolderTitleFromIndexFile: true,
sortMenusByFrontmatterOrder: true,
};
const languages = Object.keys(locales).filter((locale) => locale !== 'root');
languages.forEach((lang) => {
locales[lang].themeConfig = {
...locales[lang].themeConfig,
sidebar: generateSidebar([
{
...sidebar,
documentRootPath: `src/${lang}`,
resolvePath: `/${lang}/`,
},
]),
};
});
export default defineConfig({
srcDir: './src',
themeConfig: {
search: {
provider: 'local',
},
sidebar: generateSidebar({
...sidebar,
excludeFolders: languages,
}),
},
locales,
});