【问题标题】:How to localise a static website?如何本地化静态网站?
【发布时间】:2010-11-29 18:56:10
【问题描述】:

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

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

重复的 HTML 页面
优点:简单,SEO 友好
缺点:如果我决定改变任何东西会很痛苦,我总是不得不做两次

Dreamweaver 模板
优点:SEO 友好,更新友好
缺点:添加区域的地方太多,HTML 大小会翻倍,代码混乱

JST:javascript 模板
优点:更新友好,代码友好
缺点:搜索引擎优化?,不是为此而生的?

关于当前列表的任何其他想法或进一步建议?

【问题讨论】:

标签: localization web static


【解决方案1】:

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

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

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

如果需要替换图像,请通过三列使您的 JSON 数据更加健壮:元素 ID、属性名称(用于切换“src”或“InnerHTML”等)和内容(对于图像, 将是一个本地化的 src,对于 DIV,是替换文本)。

【讨论】:

  • 谢谢。我会睡在上面,在法国已经很晚了。我在您的解决方案中看到的缺点是我必须添加的 ID 数量,以及非英语语言的 SEO,但我仍然喜欢它。我没有要本地化的图像,我选择了@font-face。
  • 混合了静态和动态文本,我对此进行了调查,请在此处查看我的问题答案:stackoverflow.com/a/11119472/198048
【解决方案2】:

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

【讨论】:

  • 我也喜欢这个主意。谢谢。
【解决方案3】:

我一直是第一个选项(重复的 HTML 文件)的粉丝,因为它往往是最简单和最适合 SEO 的,同时不需要使用任何 JavaScript,但是必须将您的修改复制到多个文件中可以真的很烦人。我的解决方法是使用静态站点生成器。创建布局并使用从本地化文件中检索到的文本填充它们可以消除该问题。这里有几个不同的选项应该可以解决问题。

Jekyll (with the multiple languages plugin)

Jekyll 可能是想到静态站点生成器时首先想到的,因为它是迄今为止最受欢迎的。使用多语言插件,您可以使用博客框架构建多语言网站。

优点:它是 Jekyll,因此您可能会找到大量支持。

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

Nikola

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

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

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

Hugo

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

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

缺点:与 Nikola 不同,Hugo 在构建时并未考虑本地化。实现它更多的是在配置文件中使用的技巧。

Ampersand

尽管我不喜欢自我推销,但我一直在研究静态网站生成器,主要关注点是静态构建多语言网站。如果您选择使用它,我认为它可能会帮助您解决问题。

优点:从头开始构建时考虑了本地化。 Ampersand 不是博客框架,因此几乎可以在任何 Web 开发项目中使用它,而无需大量调整和查找模板文件。

缺点:仍处于开发初期,经常出现向后不兼容的更新。

如果有人知道我上面没有提到的另一个可以用来构建多语言网站的静态网站生成器,我鼓励你在 cmets 中注明。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-02-22
    • 2010-12-04
    • 2017-08-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-21
    • 2023-03-07
    相关资源
    最近更新 更多