Jekyll（二）. Liquid 模板语言

Liquid是由Shopify创建并用Ruby编写的开源模板语言。它是 Shopify 主题的骨干，用于在页面上加载动态内容。
Jekyll内置模板语言Liquid，可用于html页面进行内容输出，引用外部内容，进行逻辑判断等，丰富了html页面的可用性，在编辑Jekyll页面时直接使用Liquid就可以。更加详细的Liquid的使用介绍可以参考Liquid中文网。

简介

Liquid 代码可分为对象（object）、标记（tag）和过滤器filter）。

1.对象
对象 告诉 Liquid 在页面的哪个位置展示内容。对象和变量名由双花括号标识：{{ 变量名}}。

// 例如输入:
{{ page.title }}

就会在页面输出page.title的内容

Introduction
//上述实例中，Liquid 输出 page.title 对象的内容，此对象保存的是文本 Introduction。

2.标记（tag）
标记（tag） 创造了模板的逻辑和控制流。他们由单括号加百分号标识：{% %}

标记（tag）并不产生任何可见的文本输出。这意味着你可以用他们为变量赋值、创建条件和循环逻辑，并且不在页面上显示出任何 Liquid 逻辑代码。

// 例如：
{% if user %}
  Hello {{ user.name }}!
{% endif %}

标记被分为三类：控制流，迭代，变量赋值。

3.过滤器
过滤器改变Liquid 对象的输出。他们被用在输出上，通过一个 | 符号分隔。

// 输入
{{ "/my/fancy/url" | append: ".html" }}

// 输出
/my/fancy/url.html

//多个过滤器可以共同作用于同一个输出，并按照从左到右的顺序执行。

// 输入
{{ "adam!" | capitalize | prepend: "Hello " }}

// 输出
Hello Adam!

控制流

Liquid的控制流需要一个声明语句表示控制逻辑结束。

1.if

{% if site.avatar != empty and site.avatar %}         
  <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
{% endif %}

2.unless:与if相对，条件不成立时执行

{% unless site.theme_mode %}
  <button class="mode-toggle btn" aria-label="Switch Mode">
    <i class="fas fa-adjust"></i>
  </button>
{% endunless %}

3.case/when

{% assign _lang = include.language | default: '' %}

{% case _lang %}
  {% when 'actionscript', 'as', 'as3' %}
    {{ 'ActionScript' }}
  {% when 'applescript' %}
    {{ 'AppleScript' }}
  {% when 'brightscript', 'bs', 'brs' %}
    {{ 'BrightScript' }}
  {% else %}
   {{ _lang | capitalize }}		
{% endcase %}

循环迭代

1.for

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

2.limit限定循环的次数

<!-- if array = [1,2,3,4,5,6] ,limit:2只执行2次-->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

输出原始内容

不会执行raw内的语法，直接输出。

{% raw %}
  In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}

<!-- 输出：In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.-->

变量

1.assign:创建新的变量

{% assign my_variable = false %}
{% if my_variable != true %}
  This statement is valid.
{% endif %}

2.capture: 将capture 开始与结束标记之间的字符串捕获之后赋值给一个变量。通过 {% raw %}{% capture %} {% endraw %}创建的变量都是字符串。

<!-- 将{{ site.avatar | relative_url }}输出的内容赋值给变量 avatar_url -->
{% if site.avatar != empty and site.avatar %}
   {% capture avatar_url %}
     {{ site.avatar | relative_url }}
   {% endcapture %}
   <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
{% endif %}

过滤器

过滤器将会对字符串，数组进行一个处理，用法：{% raw %}{{内容|关键词}}{% endraw %}，而且支持链式调用。
Liquid 内置很多过滤器可供使用，例如：

// 1.append
{{ "/my/fancy/url" | append: ".html" }}
// 输出：/my/fancy/url.html

// 2.concat 连接多个数组。生成的数组包含输入数组中的所有项。
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "carrots, turnips, potatoes" | split: ", " %}
{% assign everything = fruits | concat: vegetables %}
{% for item in everything %}
- {{ item }}
{% endfor %}
// 输出：
- apples
- oranges
- peaches
- carrots
- turnips
- potatoes

// 3.default 左侧的值为 nil、false 或空，default 将输出此默认值。
{{ product_price | default: 2.99 }}

// 4.date 将时间戳（timestamp）转换为另一种日期格式
{{ article.published_at | date: "%a, %b %d, %y" }}
// 输出：Fri, Jul 17, 15

// 5.relative_url 将配置文件中的baseurl值附加到输入，以将 URL 路径转换为相对 URL。
{{ "/assets/style.css" | relative_url }}
// 输出：/my-baseurl/assets/style.css

// 6.absolute_url 将url和baseurl值附加到输入，以将 URL 路径转换为绝对 URL。
{{ "/assets/style.css" | absolute_url }}
// 输出：http://example.com/my-baseurl/assets/style.css

更多Jekyll过滤器.