国际化

为您的 shadcn-nuxt-docs 设置国际化 (i18n) 的指南

配置国际化

添加 `i18n` 配置

首先，您需要将 i18n 配置添加到您的 Nuxt.js 项目中. 打开您的 nuxt.config.ts 文件并添加以下配置:

nuxt.config.ts

export default defineNuxtConfig({
  // Other nuxt configurations ...
  i18n: {
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        name: 'English',
        language: 'en-US',
      },
      {
        code: 'xx', // 语言的两字符代码 (例如 'fr')
        name: 'Xxxxx', // 语言名称 (例如 'Français')
        language: 'xx-XX', // 语言 ISO 代码 (例如 'fr-FR')
      },
    ],
  },
});

整理您的 Content 文件

要支持多种语言，您需要将 Content 文件夹内的文件组织在特定的目录结构中。请按照以下文件树结构进行操作：

content/
- index.md
- xx/
  index.md

content 目录包含您的默认语言内容文件.
content 文件夹中的 xx 目录包含你的内容文件的翻译, 其中 xx 是语言代码 (例如 fr/index.md 表示法语).

Note

如果您使用的语言代码不是两位字母 (例如 zh-CN 和 en-US), 您的内容文件夹名称应为小写.

或者, 你可以在 nuxt.config.ts 中设置 content.respectPathCase: true 来使用与语言代码相同的大小写.

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    respectPathCase: true,
  },
});

创建 `i18n/i18n.config.ts`

接下来, 创建一个名为 i18n/i18n.config.ts 的新文件. 此文件将包含用于翻译的 i18n 消息的配置. 将以下代码添加到文件中:

i18n/i18n.config.ts

import { defineI18nConfig } from '@nuxtjs/i18n';

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // 在此处添加 app.config.ts 中定义的所有英文字符串, 例如 header.nav 或 toc.title 中的标题
      // 默认的用户界面字符串开箱即用已翻译

      shiki: 'shiki', // 例如: 网站标题
    },
    xx: {
      // 在此添加所有翻译.

      shiki: '式', // 例如: 网站标题
    },
  },
}));