Island.js provides a set of out-of-the-box internationalization solutions. Next, we will introduce how to integrate it in your project.
We recommend that you place documents in different languages in different subdirectories. For example:
docs
├── en
│ ├── guide
│ │ ├── basic.md
│ │ ├── sidebar.md
│ │ └── theme.md
│ └── index.md
└── zh
├── guide
│ ├── basic.md
│ ├── sidebar.md
│ └── theme.md
└── index.md
index.md
generally represents the Home page.
In the config file, you need to add the themeConfig.locales
field to configure various parts for different languages. for example:
import { defineConfig } from 'islandjs';
export default defineConfig({
themeConfig: {
locales: {
'/zh/': {
lang: 'zh-CN',
title: 'Island.js',
description: 'Island.js 是一个基于 Vue 3 的文档生成工具'
},
'/en/': {
lang: 'en-US',
title: 'Island.js',
description: 'Island.js is a documentation generator based on Vue 3'
}
}
}
});
The key of locales is the route prefix of the corresponding language, and the value is LocaleConfig
. There is the type of LocaleConfig
:
export interface LocaleConfig {
// language name
lang?: string;
// HTML title
title?: string;
// HTML description
description?: string;
// Display text in corresponding language
label: string;
// Navbar config, of the same type as `themeConfig.nav`
nav?: NavItem[];
// Sidebar config, of the same type as `themeConfig.sidebar`
sidebar?: Sidebar;
// Outline title
outlineTitle?: string;
// The text of the last updated time
lastUpdatedText?: string;
// The text of the edit link
editLink?: EditLink;
// The text of the prev page
prevPageText?: string;
// The text of the next page
nextPageText?: string;
}
As you see, there are many fields in themeConfig
that can be also configured in LocaleConfig
, including:
But the LocaleConfig
has higher priority.So it will override the corresponding field in themeConfig
.