如何在不使用任何框架的情况下本地化一个简单的网站？ [关闭]

Question

向大家致敬。

我有一个非常轻量级的网站，其中包含一些 js 和一些 html。我想添加这样的功能：用户只需按一个按钮，网站就会更改其语言。

这个网站最多包含 100 个字符串，所以我不想使用任何框架或库。

做这些事情的最佳做法是什么？可以给个代码示例吗？

Answer 1

由于您明确表示没有框架或库，因此最简单的方法是构建一个包含您的翻译的对象，然后在用户选择语言后更新 DOM。

您的 HTML 可能如下所示：

<span data-l10n="hello">hello</span>

你的脚本是这样的（假设你有一个用于选择语言的 元素）：

var l10n = {
    "en" : {
        "hello" : "hello"
    },
    "fr" : {
        "hello" : "bonjour"
    }
};

document.getElementById('#language-selector').onchange = function() {
    var language = this.options[this.selectedIndex].value,
        nodes = document.querySelectorAll('[data-l10n]'),
        i = nodes.length,
        key;
    while (i--) {
        var key = nodes[i].getAttribute('data-l10n');
        nodes[i].innerHTML = l10n[language][key];
    }
};

未经测试，但您应该能够理解。就像我说的那样，这几乎是您所能获得的基本知识，因此可能不是最佳实践（因为 Google 只会索引默认语言等）。

Answer 2

我会建议你使用一些小的独立本地化库，而不是重新发明轮子，这肯定会为你节省很多时间和头痛。

例如webL10n，简单，有据可查，IE6+兼容性

Answer 3

按照以下简单步骤将谷歌翻译小部件添加到您的网站。

第 1 步： 转到 https://translate.google.com/manager/website/ 并在系统提示时登录您的 Google 帐户。

第 2 步： 点击右侧的“立即添加到您的网站”按钮。

第 3 步： 在下一页，您将需要完成两个部分：

1. 在空白的“网站 URL”字段中输入您网站的 URL （例如：www.yourwebsite.com）。
2. 从下拉菜单中选择您网站的原始语言。

点击下一步按钮。

第 4 步 在此页面上，您将选择是希望能够翻译成所有可用的语言，还是只翻译您选择的语言。您还将选择翻译小部件在您的网站上的外观以及高级功能。

完成这些选择后，点击获取代码。

第 5 步 在下一页上，您将看到两个代码，您需要将它们插入您的网站。

第一个代码是元标记。要将其添加到您的 JimdoPage，请复制代码并转到设置 > 网站 > 编辑头并将整个代码粘贴到那里。确保点击保存！

第二个代码是您的小部件代码。选择您希望翻译器下拉菜单在您的网站上显示的位置（我们建议将其添加到侧边栏），将小部件/HTML 元素添加到页面的该部分，然后将小部件代码粘贴到新元素中。

第 6 步 您可以管理在您的网站上进行的翻译，以确保它们正确完成并在翻译不完全正确时对其进行编辑。为此，请在嵌入过程结束时单击“管理翻译”按钮。

您可以随时访问此选项，方法是转到 https://translate.google.com/manager/website/suggestions 并登录您的 Google 帐户。