html - 带有 html 的多语言网站

Question

我最近开始前端 Web 开发，但对如何设置多语言网站有疑问。我已经将内容翻译成所需的语言(拉脱维亚语、英语、俄语)。我想通过图像 href(标志等)将用户引导至翻译后的网站。我的问题是是否可以仅使用 html 来执行此操作，还是我还需要一些后端知识？

Answer 1

总而言之，问题是如何实现客户端本地化。我假设 JavaScript 是允许的。

免责声明:

我已经回答了“我将如何使用这些限制来解决这个问题”这个问题，但是您需要回答“为什么我有这些限制？”这个问题。如果只是开始尝试学习一项新技术，我强烈建议您问“制作多语言网站的最佳方法是什么”，而不是“我如何利用我所拥有的技能制作多语言网站？” .您可能会发现，想出一个“hacky”解决方案与学习新技术和遵循多语言网站的最佳实践一样需要付出很多努力，而且效果不佳。

如果您正在寻找通用的、无限制的多语言网站最佳实践，我帮不了您 - 我所拥有的只是客户端本地化/多语言网站的可能解决方案。

要解决的关键问题:

• 记住用户的设置
• 根据用户设置更改语言

方法

• 文档加载完成后，检查语言设置是否已保存
  • 如果有，使用那个，否则使用默认值
• 当用户更改语言设置时:
  1. 存储在 cookie 中 - JS how to cache a variable
  2. 更新用户界面
• 要为新语言更新 UI，请使用像 polyglot 这样的库:https://github.com/airbnb/polyglot.js
  • 跟踪三种语言中每一种的短语和翻译列表
  • 根据用户输入提供正确的短语列表以进行多语言学习
  • 使用html data attribute将短语名称存储在 html 中
  • 在 html 中硬编码默认翻译
  • 遍历每个设置了 data 属性的元素，并用相应的短语更新 innerHtml

例子

index.html

<!-- parts omitted --> 
<h1 data-phrase='title'>My Cool Website</h1>
<script src="js/polyglot.js"></script>
<script src="js/translation_helper.js">
<script>
  TranslationHelper.Init();
</script>

tranlation_helper.js(使用 revealing module pattern )

var TranslationHelper = (function () {
  // add other logic as described above for storing and retrieving language setting from cookie
  function Init() {
    // initialize polyglot with the set of phrases
    Translate()
  }
  function Translate() {
    $("[data-phrase]").each(function () {
      $(this).html(polyglot.t(this.dataset.phrase))
    });
  }
  return {
    Init: Init,
    Translate: Translate
  };
}());

问题与评论

加载文件时，它会显示默认语言，直到 JavaScript 运行，这不是很好。您可以做一些诡计，在 JavaScript 运行之前不显示任何内容，但是在 JavaScript 运行之前您将拥有一个空白(或无文本页面)，这可能不会更好。

一个关键的事情是，如果 JavaScript 被禁用，它就可以工作——所以在我看来，将默认文本放入开始很重要。