Island.js 提供了一套简单可配置的国际化方案，接下来我们将介绍如何在你的项目中接入。
我们推荐你将不同语言的文档放在不同的子目录中，例如：
docs
├── en
│ ├── guide
│ │ ├── basic.md
│ │ ├── sidebar.md
│ │ └── theme.md
│ └── index.md
└── zh
├── guide
│ ├── basic.md
│ ├── sidebar.md
│ └── theme.md
└── index.md
其中
index.md一般代表 Home 页面。
在配置文件中，你需要添加 themeConfig.locales 字段，用于配置不同语言的各项参数。比如：
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'
}
}
}
});
其中 locales 的 key 为对应语言的路由前缀，value 为 LocaleConfig，通过 LocaleConfig 可以配置对应语言的各项参数，其类型定义如下：
export interface LocaleConfig {
// 语言名称
lang?: string;
// HTML 标题，优先于 `themeConfig.title`
title?: string;
// HTML 描述，优先于 `themeConfig.description`
description?: string;
// 对应语言的显示文本
label: string;
// 导航栏配置
nav?: NavItem[];
// 侧边栏配置
sidebar?: Sidebar;
// 右侧大纲标题
outlineTitle?: string;
// 展示上次更新时间的文本
lastUpdatedText?: string;
// 编辑链接
editLink?: EditLink;
// 上一页文本
prevPageText?: string;
// 下一页文本
nextPageText?: string;
}
因此你能看到，LocaleConfig 中包含许多与 ThemeConfig 中相同的配置项，包括:
但是 LocaleConfig 的优先级更高。所以它会覆盖 themeConfig 中的相应字段。