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
.