javascript - 国际化静态网站示例

Question

我有一个简单的静态 HTML 网站(到处使用一些 JS 库，但没有像 React、Angular、Node 等真正的 JS 框架)，通过 nginx 提供服务。我想将其国际化，并想知道用于区域设置检测和语言文件绑定(bind)的一些方法代码是什么。

通常，当您国际化应用程序时，您会使用某种 i18n 库，并将所有面向用户的文本提取到我所说的“语言文件”中。这些文件可能是 JSON，也可能是 YAML，甚至可能是键值对的属性文件。但其想法是，每种受支持的语言都有一个文件，并且每个文件都包含相同的键，但每个键都有不同的值，具体取决于它所实现的语言。

例如，您可能有一个 en_US.properties(美国英语)语言文件，如下所示:

greeting=Hello!
initial.display=Welcome to internet

但是您可能还有一个 fr_FR.properties(法语)语言文件，如下所示:

greeting=Bonjour!
initial.display=Bienvenue sur internet

然后，您可以执行以下操作，而不是将面向用户的文本放入 HTML 中:

<h1>${greeting}</h1>
${initial.display}

然后在运行时，您使用 i18n 库来检测登录用户的区域设置，它会自动选择正确的语言文件来加载并绑定(bind)到 HTML 模板中的变量。我只是一概而论，可能有点过于简单化了，但这就是如何国际化应用程序的要点。

但在这里，我们有一个没有用户的静态 HTML 网站:每个人都是匿名的。

我想知道:

• 用于检测/推断首选区域设置的常用策略有哪些？我想知道是否有我可以寻找的普遍接受的甚至标准化的浏览器 cookie(例如“preferredLocale”)，或者可能使用顶级域(.com、.fr、.ru) )等。或者可能是引用者 IP 地址并将其映射回地理位置？；和
• 想知道什么简单(不希望使用 Node、React 等重量级框架)库可以帮助我进行语言文件绑定(bind)(一旦我能够弄清楚如何确定用户的首选语言环境) )

有什么想法吗？提前致谢!

Answer 1

这段代码很好(客户端)，但我不知道它在跨浏览器上有多成功(无论如何在 Firefox 上都可以正常工作):

var lang = navigator.language ||导航器.userLanguage；

然后使用区域设置字符串(例如 en-US)通过 AJAX 打开相应的语言文件。

显然，您还可以使用服务器端方法来检测区域设置，即 Accept-Language HTTP header ，如 here 所示。 ，但我对这个方法一无所知。