Javascript 我如何在不使用任何框架的情况下本地化一个简单的网站？

向大家致敬

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

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

---

做这些事情的最佳实践是什么？如果你愿意的话，你能给出一些代码示例吗？

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

---

例如，简单、文档丰富、IE6+兼容性

按照以下简单步骤将google translate小部件添加到您的网站

第1步： 当系统提示您登录时，请转到并登录您的Google帐户

第二步： 单击右侧的“立即添加到您的网站”按钮

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

在空的“网站URL”字段中输入网站的URL （例如：www.yourwebsite.com）

从下拉菜单中选择网站的原始语言

单击“下一步”按钮

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

完成这些选择后，单击“获取代码”

步骤5 在下一页中，您将看到需要插入网站的两个代码

第一个代码是元标记。要将其添加到JimdoPage，请复制代码，然后转到“设置”>“网站”>“编辑头部”，然后将整个代码粘贴到此处。确保点击保存

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

步骤6 你可以管理网站上的翻译，如果你想确保翻译正确，如果翻译不太正确，可以编辑。要执行此操作，请单击嵌入过程结束时的“管理翻译”按钮

---

您可以随时访问并登录您的Google帐户来访问此选项。

由于您明确表示没有框架或库，一个简单的方法就是构建一个包含您的翻译的对象，然后在用户选择语言后更新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];
    }
};