Multi-language Website

创作时间:

作者:

@小白创作中心

Multi-language Website

引用

来源

https://docs.pingcode.com/baike/2250029

在前端开发中，多语言支持是一个常见的需求。本文将介绍三种实现前端HTML页面多语言切换的方法：使用JSON文件存储翻译数据、利用JavaScript动态更新页面文本、使用i18n库进行国际化管理。

使用JSON文件存储翻译数据

设计翻译文件

首先，我们需要为每一种语言创建一个JSON文件，并将每种语言的翻译文本存储在这些文件中。例如，我们可以创建en.json和zh.json文件，分别存储英文和中文的翻译文本。

en.json:

{
    "title": "Welcome",
    "description": "This is a multi-language website."
}

zh.json:

{
    "title": "欢迎",
    "description": "这是一个多语言网站。"
}

加载翻译数据

然后，我们需要编写JavaScript代码来动态加载这些翻译文件，并根据用户选择的语言更新页面文本。我们可以使用fetch API 来加载JSON文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-language Website</title>
</head>
<body>
    <h1 id="title"></h1>
    <p id="description"></p>
    <select id="language-selector">
        <option value="en">English</option>
        <option value="zh">中文</option>
    </select>
    <script>
        const translations = {
            en: 'en.json',
            zh: 'zh.json'
        };
        document.getElementById('language-selector').addEventListener('change', function() {
            const selectedLanguage = this.value;
            fetch(translations[selectedLanguage])
                .then(response => response.json())
                .then(data => {
                    document.getElementById('title').innerText = data.title;
                    document.getElementById('description').innerText = data.description;
                });
        });
        // Default language
        document.getElementById('language-selector').value = 'en';
        document.getElementById('language-selector').dispatchEvent(new Event('change'));
    </script>
</body>
</html>

利用JavaScript动态更新页面文本

直接在JavaScript中定义翻译数据

我们可以直接在JavaScript代码中定义翻译数据，而不需要单独的JSON文件。虽然这种方法在处理少量翻译文本时比较方便，但当项目规模变大时会变得难以维护。

<script>
    const translations = {
        en: {
            title: "Welcome",
            description: "This is a multi-language website."
        },
        zh: {
            title: "欢迎",
            description: "这是一个多语言网站。"
        }
    };
    document.getElementById('language-selector').addEventListener('change', function() {
        const selectedLanguage = this.value;
        const data = translations[selectedLanguage];
        document.getElementById('title').innerText = data.title;
        document.getElementById('description').innerText = data.description;
    });
    // Default language
    document.getElementById('language-selector').value = 'en';
    document.getElementById('language-selector').dispatchEvent(new Event('change'));
</script>

使用i18n库进行国际化管理

引入i18n库

i18n库（如i18next）可以帮助我们更方便地管理多语言切换。首先，我们需要引入i18n库。

<script src="https://unpkg.com/i18next@latest/i18next.min.js"></script>

初始化i18n

然后，我们需要初始化i18n并加载翻译数据。我们可以将翻译数据存储在JavaScript对象中或通过远程加载。

<script>
    i18next.init({
        lng: 'en',
        resources: {
            en: {
                translation: {
                    "title": "Welcome",
                    "description": "This is a multi-language website."
                }
            },
            zh: {
                translation: {
                    "title": "欢迎",
                    "description": "这是一个多语言网站。"
                }
            }
        }
    }, function(err, t) {
        updateContent();
    });
    function updateContent() {
        document.getElementById('title').innerText = i18next.t('title');
        document.getElementById('description').innerText = i18next.t('description');
    }
    document.getElementById('language-selector').addEventListener('change', function() {
        const selectedLanguage = this.value;
        i18next.changeLanguage(selectedLanguage, updateContent);
    });
</script>