通过示例国际化静态网站

Question

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

通常，当您将应用程序国际化时，您会使用某种 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 库来检测登录用户的语言环境，它会自动选择正确的语言文件来加载并绑定到 HTML 模板中的变量。我是在概括，可能有点过于简单化了，但这就是如何 i18n 应用程序的要点。

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

我想知道：

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

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

Answer 1

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

var lang = navigator.language || navigator.userLanguage;

然后使用语言环境字符串（例如en-US）使用 AJAX 打开相应的语言文件。

显然你也可以使用服务器端方法来检测语言环境，即Accept-Language HTTP 标头，如here 所示，但我对这种方法一无所知。