html - 制作一个简单的静态网站多语言有哪些选择?

标签 html localization internationalization multilingual i18next

我正在建立一个静态网站,我想以两种语言显示。

我找不到不同选项的全面概述(例如,服务器端加载与前端加载与使用不同的文件夹。每个选项的优点是什么(例如对于 SEO、可维护性、可扩展性等)?

理想情况下,翻译将存储在单独的 json 文件中。我最关心的是翻译——不太关心 i18n 和 l10n 的其他方面。

例如,我该如何翻译:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Here's a website</p>
    <p>Here's a <a href="https://www.google.com/">Link</a> to language specific Google</p>
    <button>Click here</button>
  </body>
</html>

到目前为止我遇到的许多选项中的一些:
  • i18next - 最标准的选项。支持大量框架,但不清楚哪一个适合大多数基本用法。 i18nextify ? jquery-i18next ?
  • i18js - 简单,但对于导轨?
  • i18n - 在 npm 上最受欢迎,但具有构建状态
  • i18n-2 - 上面的更新版本

  • 我觉得 i18next 是最标准的方式,但它适合简单的网站吗?

    最佳答案

    对于环顾四周的其他人,我找到了有关此 Reddit thread 的概述.我还将在下面解释我选择的选项。

    总结一下这个话题:

    1)前端JS(例如jquery.i18n)

  • 通常相当容易实现
  • 它们会对 SEO 产生负面影响
  • 可以增加页面权重
  • 网站对不运行 JS 的人不起作用
  • 不推荐,但对于非常小的项目还可以

  • 2) 多页
  • 这是最容易设置的,但维护变成了一场噩梦。不推荐

  • 3)服务器端(例如 node-i18n )
  • 因为它避免了前面提到的前端的缺点,所以一般比较大的项目推荐使用这个

  • 4) 使用像 npm scripts 或 gulp 这样的构建工具(例如 static-i18n )
  • 使用构建脚本为每种语言生成单独的目录
  • 一些初始设置但易于维护和扩展
  • 由于只生成静态 html 页面,因此可以安全地将 html 代码嵌入到翻译 json 文件中。

  • 解决方案

    最后,我使用 static-i18n 选择了选项 4 .虽然需要一些设置,但它适用于 SEO,适用于静态站点,易于维护,可扩展,并且避免了前端动态语言加载的困惑。

    关于html - 制作一个简单的静态网站多语言有哪些选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55407729/

    相关文章:

    javascript - clndr.js 月份的本地化

    internationalization - wsdl 是否为 :documentation tag support the xml:lang attribute?

    angular - i18n Translate.instant 带参数

    javascript - 如何防止我的文本在更改背景后褪色? CSS\HTML

    localization - 复合 C1 表单渲染器本地化

    localization - DNN 中的模块本地化

    javascript - 无法生成 django javascript i18n 目录

    javascript - 如果 HTML5 不可用,SoundManager2 能否使用 Flash 作为相同声音的备份?

    html - 内联样式不在 IE7、8、9 中呈现

    jquery - 使用 jQuery 滑动 3 里元素