模板语言 Liquid

Liquid 出自 Shopify 团队,和 Jekyll 一样,都是 Ruby 写成的。

Liquid 是 Jekyll 内置的模板语言,有了它,我们可以在 HTML 文件中添加控制逻辑或者引用外部数据,为原本枯燥乏味的 HTML 代码增添了一丝灵动。

因为 Liquid 与 Jekyll 是「捆绑销售」,所以拿来就用,无需额外操作。

基础语法

---
---
<!DOCTYPE html>

上述 HTML 文件顶部的两行 ---Front Matter ,下一篇博文会介绍到,它的作用是告诉 Jekyll 这是一个需要预处理的文件,Jekyll 会解析文件中出现的 Liquid 代码。

Liquid 代码本身支持两种标签类型:

  • {{ content }} - 输出内容到页面
  • {% if condition == true %} - 控制逻辑

需要注意,逻辑控制的代码块结束之后必须要跟一个表示结束的声明(statement),例如:

{% endif %}, {% endfor %}

除了内容输出和逻辑控制,还可以进行变量赋值:

{% assign myVariableName = Content of my variable; %}

关于变量的用法,下一篇要介绍的 Front Matter 提供了更强大的用法,但 Liquid 变量并不会被取代,仍然有它的可用之处。

过滤器

过滤器(filter)的作用对象是字符串(文本)以及数组(列表),用法很简单:左边内容,右边关键词,中间用 | 隔开。支持链式调用。

Liquid 内置了很多过滤器,这里我们只挑几个常用的介绍一下。

大小写转换

  • {{ "uppercase" | upcase }} = UPPERCASE
  • {{ "LOWERCASE" | downcase }} = lowercase

字符串长度计算

{{ "How long am I?" | size}} = 14

文本合并

{{ "Copyright " | append: "My Blog" }} = Copyright My Blog

这里的 append 带了一个参数(argument)

日期格式化

{{ "2021-01-01T00:00:00Z" | date_to_long_string }} = 01 January 2021

条件

使用条件语句可以轻松控制页面内容的输出,为此,Liquid 提供了许多逻辑操作符:

操作符 意义
== 等于
!= 不等
> 大于
< 小于
>= 大于等于
<= 小于等于
and
or

最常用的条件语句是 if,用法如下:

{% assign title = "home" %}
{% if title == "home" %}
  <h1>Welcome to my homepage!</h1>
{% endif %}

同时也支持配套的 elsifelse

{% assign title = "home" %}
{% if title == "home" %}
  <h1>This is the homepage</h1>
{% elsif title == "about" %}
  <h1>This is the about page</h1>
{% else %}
  <h1>Welcome!</h1>
{% endif %}

循环

循环语句的语法也很简单:

for <variable> in <list of items>

它让数组操作变得更加便捷。

{% assign languages = "rust,go,python,dart,javascript" | split: "," %}
<ul>
  {% for lang in languages %}
    <li>{{ lang }}</li>
  {% endfor %}
</ul>
  • 上面代码的第一行用到了过滤器 split,用 "," 把一个字符串分割成了数组,然后把数组赋值给变量 languages
  • 因为有了 for 循环,我们可以随意更改字符串,而不用修改控制内容输出的逻辑。
  • 当然,for 语句里面还可以内嵌 if 语句。

下一篇将介绍功能十分强大的 front matter。

更新时间: