编程

Jekyll 多语言站点:从逻辑语句到表驱动方法

科技工程模块 科技工程模块 关注 Jun 19, 2019 · 预计阅读 5 分钟
Jekyll 多语言站点:从逻辑语句到表驱动方法

上篇文章中,我们指出静态站点主要由三部分组成。在本文中,我们将进一步讨论在通过使用内置的 Liquid 语言来构建国际化站点过程中,逻辑语句和表驱动方法不同的使用场景。

Github pages 使用 Jekyll 构建静态站点,官方没有提供多语言支持。虽然对于本地化生成 Jekyll 站点我们有很多方案,比如使用插件等方式,然而由于 Github pages 限定了使用的插件种类,因此一种可行的方案是通过修改 html 文件来为用户提供不同的界面。在这一方面,Anthony GrangerDJ Walker 已经给出了很好的指导,建议你仔细阅读。针对他们在文中给出的页面和文章不同处理方案这一点,我认为有必要继续进一步讨论。

1. 多语言静态站点的逻辑

由于缺乏数据库,所以静态站点的多语言只能通过不同的页面来提供,这就要求我们提供(至少)两套页面。而不同的网页在客户端体现为不同的 URL 地址,因此多语言的核心逻辑就是用户通过点击页面上的语言按钮跳转到对应语言的内容页面。以本站为例,要求至少做到以下两点:

  1. 页面,即存在其他语言的页面,如:https://bianwenbo.com/index.html -> https://bianwenbo.com/zh/index.html
  2. 内容,即页面内容本地化,如:https://bianwenbo.com/jekyll-i18n in index.html -> https://bianwenbo.com/zh/jekyll-i18n in zh/index.html

当然我们可以手工撰写所有页面,不过这么古老的方案基本上已经没人使用了。我们现在的目标是通过 Jekyll 自动化的完成这个任务:

1.1 页面

对于第一点,我们通过在根目录建立新的文件夹提供一套语言页面。简单的回顾下我们在静态网站的基本结构中讲述的内容:

Jekyll 中的 HTML 页面可以粗略的分为四类:文章、基本页面、布局、组件,其中文章和基本页面直接在用户终端展示。我们通过不同的布局(1.1)引用来区分前两者,文章属于日常更新的用户内容(1.3),而基本页面(1.1)组成了网站的基本结构。此外,任何页面(包括其他组件)都可以引用组件(1.1)。(备注:1.1-HTML/CSS/JS; 1.2-配置文件; 1.3-用户内容.)。

因此,在新建立的文件夹中,我们需要给出文章和基本页面的该语言副本,以便为用户提供不同URL地址的页面。而对于不会直接展示给客户端的布局和组件,我们通常不再创建多语言副本。

最后,我们需要在每个文章和基本页面中新设定两个元数据:本页面语言(如 lang: zh)、本页面内容(如 i18n-link: jekyll-i18n),以便于 Liquid 语言进行处理。

1.2 内容

在获得多语言页面以后,我们就可以进行内容本地化,包括展示内容、文本与链接两部分。

  • 展示内容:即页面中仅展示本语言的文章;
  • 文本和链接:即本语言文本,并且其链接也指向本语言页面。

目前有两种修正方式,一种是手工修改(仅适用于存在副本的页面,即文章和基本页面),另一种是适用于所有页面的Liquid语言自动设定。前者我们就不再多说,下面重点谈一下如何使用Liquid语言自动设定相关内容。

2. 逻辑语言和表驱动

Liquid 语言1具有多种语法,在限定页面展示内容时我们通常使用循环语句。由于多语言站点中文本和链接主要涉及不同选项,因此下面我们主要说选择语句:

“if…else…”逻辑语言:

# HTML

{% if page.lang == "en" %}
    The page language is English.
{% else %}
    The page language is Chinese.
{% endif %}

表驱动:

# HTML

The page language is {{ site.translate['lang'][page.lang] }}.

# _config.yml
translate:
  lang:
    en: "English"
    zh: "Chinese"

在这两种情况下,我们得到的结果都是 The page language is Chinese. 。可以看到,简单的情景下使用逻辑语言更方便,而表驱动的优点在于分离了逻辑和数据,从而使日后的修改更方便。

3. 总结

总体来看,建立一个多语言的 Jekyll 站点的方式为:

  1. 创建语言文件夹,其中包含文章和基本页面的副本;
  2. 在上述页面中添加元数据:页面语言代码、页面内容代码;
  3. 文章页面:手工本地化用户内容;
  4. 基本页面、布局、组件:优先选择使用 Liquid 表驱动(而非“if…else…”逻辑语句)本地化;
  5. 对于展示内容等,使用 Liquid 逻辑语句处理。

以上,我们给出了建立 Jekyll 国际化站点的操作建议。

  1. Liquid 基本语法参见:https://jekyllrb.com/docs/liquid/ 

边文博 - 订阅
通过电子邮件订阅最新博文,获取我关于智能时代的思考。
科技工程模块
本文作者:科技工程模块 关注
自律、执行!什么是工具?