jooy2/vitepress-sidebar

Using sidebar with different locales

Closed this issue · 1 comments

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,
        }),
      },
    },
  },
});

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,
});