带有html的多语言网站

我最近开始了前端web开发，在理解如何建立多语言网站方面遇到了问题。我已经将内容翻译成所需的语言（拉脱维亚语、英语、俄语）。我想通过图片href（flag等）将用户引导到翻译后的网站。我的问题是，是否可以只使用html来实现这一点，还是我还需要一些后端知识？

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

免责声明： 我已经回答了“我将如何解决这些限制”的问题，但您需要回答“为什么我有这些限制？”。如果这只是一个开始并尝试学习新技术的问题，我强烈建议你问“制作一个多语言网站的最佳方式是什么”，而不是“如何用我的技能制作一个多语言网站？”。你可能会发现，想出一个“黑客”解决方案需要付出与学习新技术和遵循多语言网站的最佳实践同样多的努力，但效果并不理想

如果您正在寻找通用的、无限制的多语言网站最佳实践，我无法帮助您实现这一点——我所能做的就是为仅客户端本地化/多语言网站提供一个可能的解决方案

需要解决的关键问题：

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

方法

• 加载文档后，检查语言设置是否已保存
  • 如果有，则使用该选项，否则使用默认值
• 当用户更改语言设置时：
• 储存在饼干里-
• 更新用户界面
• 要更新新语言的UI，请使用类似polyglot的库：
  • 记录三种语言的短语和翻译列表
  • 根据用户输入，向polyglot提供正确的短语列表
  • 使用将短语名称存储在html中
  • 硬编码html中的默认翻译
  • 循环遍历设置了数据属性的每个元素，并用相应的短语更新innerHtml

例子 index.html 问题与评论 加载文件时，它将显示默认语言，直到JavaScript运行，这不是很好。你可以做一些诡计，在JavaScript运行之前什么也不显示，但是在JavaScript运行之前，你会有一个空白（或无文本页面），这可能不会更好

---

关键的一点是，如果禁用JavaScript，它就可以工作——因此，在我看来，将默认文本放在开始位置是很重要的

你的问题有点误导人。在一个网站上支持多种语言与HTML无关

HTML用于网站的标记，即放置什么元素的位置。标记不会随语言而更改

---

通常，支持多语言内容的解决方案是不在HTML文件中使用硬编码字符串，而是基于该语言从单独的文件中获取数据。这可以通过使用Javascript或从服务器上完成。这取决于您的方法。

解决方案是否涉及JavaScript？当然。到目前为止，关于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>

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
  };
}());