国际化配置指南#

基本概念#

国际化（Internationalization，简称 i18n）是指让网站支持多种语言的能力。通过国际化配置，你的博客可以：

支持多语言内容
自动切换语言
提供更好的用户体验
扩大全球受众

配置文件位置#

1. 语言配置#

src/config/siteConfig.ts 中的 lang 字段：

1
export const siteConfig: SiteConfig = {
2
    // 网站语言
3
    lang: "zh_CN",
4
};

2. 语言文件#

语言文件通常位于：

src/locales/ 目录
每个语言一个文件，如 zh-CN.ts、en.ts 等

语言文件结构#

1. 基本结构#

1
export const zhCN = {
2
    common: {
3
        home: "首页",
4
        about: "关于",
5
        archive: "归档",
6
        search: "搜索",
7
        category: "分类",
8
        tag: "标签",
9
        comments: "评论",
10
        share: "分享",
11
        more: "更多",
12
        backToTop: "回到顶部",
13
    },
14

15
    nav: {
16
        home: "首页",
17
        about: "关于",
18
        archive: "归档",
19
        categories: "分类",
20
        tags: "标签",
21
        friends: "友链",
22
        sponsor: "赞助",
23
        guestbook: "留言板",
24
    },
25

26
    post: {
27
        published: "发布于",
28
        updated: "更新于",
29
        author: "作者",
30
        category: "分类",
31
        tags: "标签",
32
        readingTime: "阅读时间",
33
        wordCount: "字数",
34
        comments: "评论",
35
        share: "分享",
36
        relatedPosts: "相关文章",
37
        prevPost: "上一篇",
38
        nextPost: "下一篇",
39
    },
40
};

2. 英文语言文件#

1
export const en = {
2
    common: {
3
        home: "Home",
4
        about: "About",
5
        archive: "Archive",
6
        search: "Search",
7
        category: "Category",
8
        tag: "Tag",
9
        comments: "Comments",
10
        share: "Share",
11
        more: "More",
12
        backToTop: "Back to top",
13
    },
14

15
    nav: {
16
        home: "Home",
17
        about: "About",
18
        archive: "Archive",
19
        categories: "Categories",
20
        tags: "Tags",
21
        friends: "Friends",
22
        sponsor: "Sponsor",
23
        guestbook: "Guestbook",
24
    },
25

26
    post: {
27
        published: "Published on",
28
        updated: "Updated on",
29
        author: "Author",
30
        category: "Category",
31
        tags: "Tags",
32
        readingTime: "Reading time",
33
        wordCount: "Word count",
34
        comments: "Comments",
35
        share: "Share",
36
        relatedPosts: "Related posts",
37
        prevPost: "Previous post",
38
        nextPost: "Next post",
39
    },
40
};

启用多语言支持#

1. 配置语言选项#

在 src/config/i18nConfig.ts 中：

1
export const i18nConfig = {
2
    // 支持的语言列表
3
    languages: [
4
        {
5
            code: "zh-CN",
6
            name: "中文",
7
            default: true,
8
        },
9
        {
10
            code: "en",
11
            name: "English",
12
        },
13
    ],
14

15
    // 语言切换器配置
16
    switcher: {
17
        show: true,
18
        position: "navbar", // navbar, sidebar, footer
19
    },
20
};

2. 导入语言文件#

在需要使用翻译的组件中：

1
import { zhCN, en } from '@/locales';
2

3
// 根据当前语言选择翻译
4
const t = currentLang === 'zh-CN' ? zhCN : en;

翻译内容#

1. 静态内容翻译#

1
// 在组件中使用
2
<h1>{t.nav.home}</h1>
3
<p>{t.post.published}</p>

2. 动态内容翻译#

对于文章内容，通常有两种方式：

方法 A：多语言文件

为每种语言创建单独的文章文件
如 post-zh.md、post-en.md

方法 B：前端翻译

使用翻译函数动态翻译内容
适合简短的动态内容

3. 路由国际化#

为不同语言创建不同的路由：

中文：/posts/my-post/
英文：/en/posts/my-post/

语言切换#

1. 语言切换组件#

1
---
2
import { i18nConfig } from '@/config/i18nConfig';
3

4
const { languages } = i18nConfig;
5
---
6

7
<div class="language-switcher">
8
  {languages.map(lang => (
9
    <button
10
      key={lang.code}
11
      class={`lang-button ${lang.default ? 'active' : ''}`}
12
    >
13
      {lang.name}
14
    </button>
15
  ))}
16
</div>

2. 语言切换逻辑#

1
// 切换语言
2
function switchLanguage(langCode) {
3
    // 保存语言偏好到 localStorage
4
    localStorage.setItem('language', langCode);
5

6
    // 重新加载页面
7
    window.location.reload();
8
}
9

10
// 获取当前语言
11
function getCurrentLanguage() {
12
    return localStorage.getItem('language') || 'zh-CN';
13
}

日期和时间国际化#

1. 日期格式化#

1
// 格式化日期
2
function formatDate(date, lang) {
3
    const options = {
4
        year: 'numeric',
5
        month: 'long',
6
        day: 'numeric'
7
    };
8
    return new Intl.DateTimeFormat(lang, options).format(date);
9
}

2. 时间格式化#

1
// 格式化时间
2
function formatTime(date, lang) {
3
    const options = {
4
        hour: '2-digit',
5
        minute: '2-digit'
6
    };
7
    return new Intl.DateTimeFormat(lang, options).format(date);
8
}

SEO 国际化#

1. 多语言 SEO 最佳实践#

hreflang 标签：在头部添加语言 alternate 链接
** canonical URLs**：为每个语言版本设置规范 URL
语言特定内容：为每种语言创建独特的内容
本地化关键词：使用语言特定的关键词

2. hreflang 标签#

1
<link rel="alternate" hreflang="zh-CN" href="https://your-blog.com/posts/my-post/" />
2
<link rel="alternate" hreflang="en" href="https://your-blog.com/en/posts/my-post/" />
3
<link rel="alternate" hreflang="x-default" href="https://your-blog.com/posts/my-post/" />

常见问题#

Q: 语言切换不生效？#

检查语言文件是否正确导入
确认 localStorage 是否正确设置
检查语言切换逻辑是否正确
清除浏览器缓存

Q: 翻译内容不显示？#

检查语言文件中的键是否正确
确认当前语言是否正确
检查翻译函数是否正确调用
清除浏览器缓存

Q: 日期格式不正确？#

检查 Intl.DateTimeFormat 配置
确认语言代码是否正确
测试不同浏览器的兼容性

Q: 如何添加新语言？#

创建新的语言文件（如 ja.ts）
在 i18nConfig.ts 中添加语言配置
翻译所有需要的内容
测试新语言是否正常显示

Q: 如何处理 RTL 语言？#

为 RTL 语言添加特殊样式
使用 CSS direction: rtl
调整布局和排版
测试 RTL 显示效果

最佳实践#

1. 内容管理#

保持一致性：确保所有语言版本的内容结构一致
专业翻译：使用专业的翻译服务，避免机器翻译
定期更新：确保所有语言版本同步更新
文化适配：考虑不同文化的差异

2. 技术实现#

使用标准：遵循 i18n 最佳实践和标准
性能优化：按需加载语言文件
缓存策略：缓存语言偏好设置
错误处理：处理语言文件加载失败的情况

3. 用户体验#

自动检测：根据浏览器设置自动选择语言
明确切换：提供清晰的语言切换选项
保存偏好：记住用户的语言选择
回退机制：当翻译不存在时使用默认语言

4. SEO 优化#

多语言站点地图：为每种语言创建单独的站点地图
语言特定 URL：使用语言代码作为 URL 前缀
本地化内容：为每种语言创建独特的元数据
结构化数据：使用语言特定的结构化数据

高级配置#

1. 自动翻译工具#

可以使用以下工具辅助翻译：

Google Translate API
DeepL API
i18next
react-i18next

2. 翻译管理系统#

对于大型博客，可以使用专业的翻译管理系统：

Lokalise
Crowdin
Transifex
POEditor

3. 动态内容翻译#

对于用户生成的内容，可以使用：

实时翻译：使用翻译 API 实时翻译
人工审核：结合机器翻译和人工审核
社区翻译：允许社区贡献翻译

4. 语言检测#

1
// 检测浏览器语言
2
function detectBrowserLanguage() {
3
    return navigator.language || navigator.userLanguage;
4
}
5

6
// 检测用户语言偏好
7
function detectUserLanguage() {
8
    return localStorage.getItem('language') || detectBrowserLanguage() || 'zh-CN';
9
}

通过合理配置国际化，可以使你的博客面向全球用户，提供更好的多语言体验！

音乐

音乐

16. 国际化配置指南