I18n

Island.js provides a set of out-of-the-box internationalization solutions. Next, we will introduce how to integrate it in your project.

Project Structure

We recommend that you place documents in different languages in different subdirectories. For example:

bash
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.

locales config

In the config file, you need to add the themeConfig.locales field to configure various parts for different languages. for example:

js
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:

ts
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.