Internationalization

URL-Based I18n Solution

To leverage multi-language support in Saber, you first need to use the following file structure in your pages folder:

pages/
├─ index.md
├─ foo.md
├─ nested
│  └─ index.md
├─ cn
│  ├─ index.md
│  ├─ foo.md
│  └─ nested
│     └─ index.md
└─ fr
   ├─ index.md
   ├─ foo.md
   └─ nested
      └─ index.md

In this way, the cn (Chinese) version of your site is available under the path /cn, the fr (French) version of your site is available under the path /fr.

Then, specify the locales option in your saber-config.yml:

siteConfig:
  lang: en
  title: My Site

locales:
  /cn:
    siteConfig:
      lang: zh
      title: 我的网站
  /fr:
    siteConfig:
      lang: fr
      title: Mon Site

The siteConfig.lang option is used to set the lang attribute for <html> element.

The locales option is used to override siteConfig and themeConfig for specific paths. For example, when you visit the homepage / or /about page, this.$siteConfig.title in your component will be My Site, while if you visit /cn or /cn/about, it will be 我的网站 instead.

Access Locale Path in the Component

Use this.$localePath in your component to find out the locale for current page, with the saber-config.yml we used above, this.$localePath will be '/fr' when you visit page /fr/about, or '/' when you visit /about.

← Page Transition Working with Webpack →

Edit This Page on GitHub

# URL-Based I18n Solution

# Access Locale Path in the Component

URL-Based I18n Solution

Access Locale Path in the Component