1分钟为任意网站添加100+语言¶

特色¶

此方案为目前发现的最简便的网站国际化、本地化方法，无需改动页面、无语言配置文件、无需提前准备多语言译文，使用和配置超简单。

适用于任何网站，特别适合跨境电商站点、多语言产品站点、多语言技术博客、对隐私保密有要求的内网站点或管理系统等。

效果预览¶

拿本站来举例，点击导航栏上方的直接体验。

⚠️ MkDocs 有一些插件或主题也有类似功能，但达不到这个效果，而且用起来复杂：

mkdocs-static-i18n

Material 主题内置的 Changing the language

翻译组件¶

使用 translate.js，两行 JS 实现 html 全自动翻译，这里有详细的功能介绍和使用说明：

使用极其简单，加入几行 JS 即刻拥有上百种语言切换能力，无需前置配置，无需改造页面本身，也不需要配置各种语种的语言文件；
扩展极其灵活，可自定义翻译术语、可指定只翻译某些区域的元素、可指定不翻译某些元素；
极速翻译能力，内置三层缓存，预加载机制，毫秒级瞬间翻译能力；
搜索引擎友好，不会对网站进行任何元素改动，完全不影响网站本身的搜索引擎收录；

使用方法¶

2 步即可：

在项目或网页中引入 translate.js（可选择任意 CDN 链接）
然后设置 translate 的执行逻辑

<script src="https://cdnjs.cloudflare.com/ajax/libs/translate.js/3.18.0/translate.min.js"></script>
<script>
translate.ignore.class.push('md-select');       // 设置不翻译的元素
translate.language.setLocal('chinese_simplified'); // 设置本地语种（如果不设置，会自动识别当前网页的文本语种）
translate.setAutoDiscriminateLocalLanguage();   // 设置首次使用时自动识别语种进行切换
translate.selectLanguageTag.show = false;       // 不使用内置的语言选择框
translate.service.use('client.edge');           // 设置机器翻译服务通道
translate.execute();    
</script>

添加语言选择框¶

普通站点：建议自定义语言选择框（translate.js 内置的太丑了）

MkDocs 站点：可共用 Material 主题自带的语言选择 UI 组件，直接在 mkdocs.yml 中配置 alternate 即可自动生成：

extra:
  alternate:
    - name: 🇨🇳 中文
      lang: zh
    - name: 🇺🇸 English
      lang: en
    - name: 🇩🇪 Deutsch
      lang: de
    - name: 🇷🇺 Русский
      lang: ru
    - name: 🇯🇵 日本語
      lang: ja
    - name: 🇳🇱 Dutch
      lang: nl
    - name: 🇫🇷 Français
      lang: fr
    - name: 🇪🇸 Español
      lang: es
    - name: 🇧🇷 Português
      lang: pt
    - name: 🇸🇦 العربية
      lang: ar
    - name: 🇰🇷 한국어
      lang: ko

自定义语言选择的 UI 入口后，可以在 JS 函数中统一处理选中后的动作，比如这样：

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.md-select__link').forEach(link => {
        link.addEventListener('click', function(event) {
            // 阻止默认跳转或 href 执行
            event.preventDefault();

            // 获取选中的语言
            const langCode = this.getAttribute('hreflang');
            const targetLang = translate.util.browserLanguage[langCode];
            if (!targetLang) {
                console.warn('不支持语言码:', langCode);
                return;
            }

            // 更新翻译
            if (window.translate && typeof translate.changeLanguage === 'function') {
                translate.changeLanguage(targetLang);
            }
        });
    });
});

添加更多可选语言¶

只需要在语言选择框中新增语言行即可，其它的都不需要动。MkDocs 站点只需在 mkdocs.yml 的 alternate 中新增语言行即可。