在您的网站中添加多语言的最简单方法

GenAI LIVE! | 2025年6月4日

如果您想扩展您的网站，那么在您的网站中添加多种语言支持将是一个非常好的主意，这样语言就不会成为障碍。

这听起来可能非常困难和复杂，但tolgee.io让它变得非常简单。你真的可以在 10 分钟内创建一个多语言网站。而且它独立于框架。因此，你可以将它与React、Vue JS或任何你想要的框架一起使用。但在本文中，我们将了解如何将它与原生 JavaScript 项目一起使用。

因此，让我向您展示如何通过 10 个简单步骤做到这一点：
1）首先，您必须在tolgee.io上创建一个帐户

2）然后点击“前往应用程序”，然后点击“添加”

3) 然后，您需要输入项目/网站的名称。并选择您想要添加到网站的语言。

4) 点击您的项目。添加您想要以这些语言显示的文本。您可以随意使用谷歌翻译。您的键名应该像变量一样命名。

5) 然后点击“集成”，选择你的框架（在本例中为 JS），并创建一个 API 密钥。记得复制它，我们稍后会用到它。

6) 现在我们终于可以开始编写代码了。创建一个index.html 文件，并在其中添加https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js链接。这是 Tolgee SDK 的 CDN。

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>
</body>
<script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js"></script>
</script src="main.js"></script>
</html>

注意，我们有一些奇怪的语法。%-%welcome_message%-%和%-%msg_long%-%是什么？其实，这些只是我们定义的键。它们会与我们定义的实际文本相符。

7）现在我们需要在main.js中初始化我们的 tolgee 应用程序

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "The_API_key_You_coped",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run()

这里的inputPrefix和inputSuffix基本上就是我们键所包裹的字符。在 Vue JS 中，我们在花括号上使用两次 set，而在 React 中则使用一次 set。我们在这里做了类似的事情，只是数据来自 tolgee。
现在，如果你用实时服务器打开index.html，你会看到你获得了我们之前在 tolgee 项目中定义的文本。

8) 但你会注意到，有时我们会看到这些表达式未编译。我们不希望用户也看到这种情况。因此，你可以实现一个全屏加载器来隐藏它们。

    <div class="loader" style="height: 100vh">Loading</>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run().then(() => {
    //Hide the loader after tolgee has ran
    document.querySelector(".loader").style.display = "none"
})

9) 现在我们希望用户能够从下拉列表中选择一种语言，并且网页的语言也会随之改变。为此，我们首先在HTML文档中创建一个选择框

    <select class="lang-select">
        <option value="en">Englis</option>
        <option value="hi">Hindi</option>
        <option value="zh-Hans">Chienese (Simplified.)</option>
    </select>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>

10) 现在，最后在 javascript 中，当用户选择任何语言时，我们都希望相应地翻译我们的内容。

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
})
tg.run()

let langs = document.querySelector(".lang-select")
langs.addEventListener("change", (e) => {
    //Changing the language of our page
    tg.lang = e.target.value
})