Question

向所有人致敬。

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

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

做这些事情的最佳做法是什么？如果您愿意，可以提供任何代码示例吗？

Answer 1

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

例如webL10n，简单，文档齐全，IE6 +兼容性

Answer 2

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

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

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

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

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

单击“下一步”按钮。

第4步 在此页面上，您将选择是否要翻译成所有可用语言，或仅翻译您选择的语言。您还将选择翻译小部件在您的网站上的外观和高级功能。

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

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

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

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

第6步 您可以管理在您的网站上进行的翻译，以防您确保正确完成翻译并在翻译不正确时进行编辑。要执行此操作，请单击嵌入过程结束时的“管理翻译”按钮。

您可以随时转到https://translate.google.com/manager/website/suggestions并登录Google帐户来随时使用此选项。

Answer 3

由于您没有明确表示没有框架或库，因此只需构建包含翻译的对象，然后在用户选择语言后更新DOM。

您的HTML可能看起来像这样：

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

和你的脚本一样（假设你有一个＆lt; select＆gt;元素来选择语言）：

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];
    }
};

未经测试，但你应该能够理解。就像我说的，这是基本的，因为你可以得到所以可能不是最佳实践（因为谷歌只会索引默认语言等）。

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

3 个答案: