如何本地化静态网站？

Question

对于我正在做的网站，我只使用静态内容，例如 HTML、javascript、CSS、图像（没有 PHP 或服务器端语言）。

我希望能够进行英语和法语本地化，但我不确定什么是一个好的解决方案。 以下是我目前想到的解决方案：

重复的 HTML 页面
优点：简单，SEO 友好
缺点：如果我决定更改任何内容，我会很痛苦，我总是需要做两次

Dreamweaver 模板
优点：SEO 友好，更新友好
缺点：添加区域的地方太多，导致 HTML 大小加倍，代码混乱

JST：javascript 模板
优点：更新友好，代码友好
缺点：SEO？不是为此而生的吗？

对当前列表还有其他想法或进一步的建议吗？

Answer 1

使用一点 PHP 来复制您这边的页面。将 HTML 页面视为 PHP 文件，本地化 PHP 文件，然后使用 Web 服务器将 PHP 编译为静态网页（使用 file_get_contents）。只需将 HTML 编译到语言目录中，并将英语作为默认根目录即可。即使您的生产服务器无法安装 PHP，您也可以通过使用 PHP 来节省一些时间。

Answer 2

混合解决方案可能适合您：

• 开发主要 HTML 内容，全部在带 ID 的 DIV 中，用英语（至少对英语来说是 SEO 友好的）。
• 在页面上创建链接以切换到另一种语言
• 当用户单击链接时，不要加载更多静态文件，而是运行一些 JavaScript 来加载 ID 和翻译语言的静态 JSON 数组，循环遍历该数组并替换 DIV 的 InnerHTML 。
• 作为奖励，让该代码还可以更改页面上的所有内部链接，以向所有链接添加 #language-en 或其他内容。然后，当页面加载时，让 Javascript 检查 URL 中的语言参数并自动加载首选语言。

使用 JQuery 处理所有混乱的 ID 选择和 AJAX 调用来加载语言文件。

如果需要替换图像，请通过包含三列来使 JSON 数据更加健壮：元素 ID、属性名称（用于切换“src”或“InnerHTML”或其他内容）和内容（对于图像来说，内容是本地化的 src，对于 DIV，是替换文本）。

Answer 3

我一直很喜欢第一个选项（重复的 HTML 文件），因为它往往是最简单、最有利于 SEO 的，同时不需要使用任何 JavaScript，但必须将修改复制到多个文件可能真的很烦人。我的解决方法是使用静态站点生成器。创建布局并使用从本地化文件检索的文本填充它们可以消除该问题。这里有一些不同的选项可以达到目的。

Jekyll（带有多语言插件）

Jekyll 可能是第一个当想到静态站点生成器时，我会想到这一点，因为它是迄今为止最受欢迎的。使用多语言插件，您可以通过博客框架构建多语言网站。

优点：它是 Jekyll，所以您可能会找到相当多的支持。

缺点：Jekyll 是一个博客框架，因此如果您不构建博客，它可能不是最佳选择。

Nikola

在最近在 Google 上挖掘它之前，我并不知道这个，但它可能有希望支持开箱即用地构建本地化网站。

优点：正在积极开发中，支持近 40 种开箱即用的语言，无需任何插件。它还具有许多其他有用的功能，例如增量重建、多种格式、友好的 CLI 和内容管理系统。

缺点：没有 Jekyll 那么多的支持，也可能不那么合适，具体取决于您正在构建的内容。

Hugo

Hugo 还可以用于构建多语言网站。

优点：Hugo 也是一个非常流行的静态站点生成器，因此您也可以期待那里的大量支持。然而，与 Jekyll 不同的是，您可以使用 Hugo 构建多语言网站，而无需使用任何插件。

缺点：与 Nikola 不同，Hugo 的构建并没有考虑到本地化。实现它更多的是配置文件中使用的技巧。

与号

尽管我不喜欢自我推销，但我一直在开发一个静态网站生成器主要重点是静态构建多语言网站。我认为如果您选择使用它可能会对您的问题有所帮助。

优点：从头开始构建，考虑到本地化。 & 不是一个博客框架，因此它几乎可以在任何 Web 开发项目中使用，而无需进行大量调整和追踪模板文件。

缺点：仍处于开发早期，经常出现向后不兼容的更新。

如果有人知道另一个可用于构建我上面未提及的多语言网站的静态站点生成器，我鼓励您在评论中注明。