制作简单的静态网站多语言的选项都有哪些?

Posted

技术标签:

【中文标题】制作简单的静态网站多语言的选项都有哪些?【英文标题】:What are the options for making a simple static website multilingual?制作简单的静态网站多语言的选项有哪些? 【发布时间】:2019-08-19 19:43:46 【问题描述】:

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

我找不到不同选项的全面概述(例如,服务器端加载与前端加载与使用不同文件夹。每个选项的优势是什么(例如,对于 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 - 很简单,但适用于 rails 吗? i18n - 在 npm 上最受欢迎,但有构建状态 i18n-2 - 以上更新版本

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

【问题讨论】:

使用您需要的任何套件。我用node-polyglot i18n 很好,是的。 【参考方案1】:

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

总结主题:

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

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

2) 多页

这是最容易设置的,但维护却是一场噩梦。不推荐

3) 服务器端(例如node-i18n)

因为它避免了前面提到的前端的缺点,所以一般推荐用于大型项目

4) 使用 npm 脚本或 gulp 等构建工具(例如 static-i18n)

使用构建脚本为每种语言生成单独的目录 初始设置但易于维护和扩展 由于只生成静态html页面,html代码可以安全地嵌入到翻译json文件中。

解决方案

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

【讨论】:

静态i18n处理后的语言路由有什么有用的提示或链接吗?【参考方案2】:

如果您所做的只是文本翻译,我认为您根本不需要担心图书馆。您需要做的就是编写一个简单的函数,它可以在两个(或多个)json 语言文件之间切换,并提供一种机制来从选定的 json 文件中显示正确的字符串。

【讨论】:

这是一个有限的解决方案。适用于 js 文件,但您对 html 文件有何建议?静态预处理器更好地解决了这种 tet 翻译的问题。不仅适用于正文内容,还适用于元标记。

以上是关于制作简单的静态网站多语言的选项都有哪些?的主要内容,如果未能解决你的问题,请参考以下文章

静态网页是啥

为什么要网页静态化?HTML静态化处理带给网站哪些好处?

静态 Html 网站 - Bootstrap - 多语言支持

如何在多语言 asp.net MVC 网站的 URL 中支持有语言和无语言的路由

求教用C#实现多语言的程序

谷歌如何知道我的网页链接,因为我想创建一个多语言的网站,但SEO阻碍了我的方式