Jekyll With Liquid

头像
Chinaxiang
    阅读 9 分钟

    博客原文：http://huangyanxiang.com/2017/09/20/jekyll-with-liquid.html

    Jekyll的模板中可以使用Liquid语法进行取值，计算和数据处理，如果仅仅只为了使用Jekyll撰写博客文章，你可以不需要了解liquid, 但是如果你需要定制Jekyll的主题，灵活的控制你的站点，你确实有必要了解一些liquid相关的语法。

    Liquid和大多数模板语言类似，也是比较简单的。

    官方网址：

    概览

    Liquid可以分为objects, tags, and filters.

    使用英文双大括号对objects进行取值。

    获取页面的标题:

    {{ page.title }}

    标签，例如：条件控制，循环，都是包裹在{% 和 %}中的。

    如果user不为空，则输出user.name:

    {% if user %}
  Hello {{ user.name }}!
{% endif %}

    对于filter, 你可以理解为提供了一系列常用的方法，并且支持管道操作。

    对url地址添加.html后缀：

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

    输出：

    /my/fancy/url.html

    首字母大写，然后在前面添加Hello :

    {{ "adam!" | capitalize | prepend: "Hello " }}

    输出：

    Hello Adam!

    是不是很easy?

    操作符

    Liquid包含如下操作符：

    == equals
    != does not equal
    > greater than
    < less than
    >= greater than or equal to
    <= less than or equal to
    or logical or
    and logical and

    举个栗子，你一看就懂得。

    {% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

    另外还有一个操作符：contains, 它可以判断字符串的包含，还可以判断数组中的字符串包含关系（如果数组中是非字符串的，是不能判断出来的）。

    {% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

{% if product.tags contains 'Hello' %}
  This product has been tagged with 'Hello'.
{% endif %}

    数据类型

    和大多数语言一样，Liquid也有常用的数据类型。

    Boolean

    true or false

    {% assign foo = true %}
{% assign bar = false %}

    Number

    统一都叫数字，不分整型，浮点型了

    {% assign my_int = 25 %}
{% assign my_float = 39.756 %}

    String

    使用单引号或双引号包裹的字符串。

    {% assign my_string = "Hello World!" %}

    Nil

    类似js的undefined.

    Array

    Liquid中无法单独定义出数组，不过你可以使用filter处理得到数组。

    数组的取值采用普遍接受的索引取值方式：

    {{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}

    对于数组比较常用的还有遍历操作：

    {% for user in site.users %}
  {{ user }}
{% endfor %}

    Truthy and Falsy

    这两个不叫数据类型，但是是条件判断的依据，他们叫：真 和 假。什么时候是真？什么时候是假？很简单，你只需要记着：Nil 和 false 是假，其他的都是真就对了，包括0，空字符串都是真。

      truthy falsy
    true •  
    false   •
    nil   •
    string •  
    empty string •  
    0 •  
    integer •  
    float •  
    array •  
    empty array •  
    page •  
    EmptyDrop •  

    Tags

    Tags你可以理解为Liquid的关键词，如条件判断if, 循环语句for, Tag是 {% 和 %} 包裹起来的。

    注释

    注释是不会被Liquid引擎处理的。Liquid的注释既可以作用于单行，又可以作用于多行。

    {% comment %} line comment {% endcomment %}
{% comment %}
block comment
{% endcomment %}

    条件流程控制

    直接看例子吧。

    {% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}

equals

{% if product.title != 'Awesome Shoes' %}
  These shoes are not awesome.
{% endif %}

{% if customer.name == 'kevin' %}
  Hey Kevin!
{% elsif customer.name == 'anonymous' %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

    循环遍历

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

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

limit

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

1 2

offset

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

3 4 5 6

range

{% for i in (3..5) %}
  {{ i }}
{% endfor %}

{% assign num = 4 %}
{% for i in (1..num) %}
  {{ i }}
{% endfor %}

3 4 5
1 2 3 4

reversed

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

6 5 4 3 2 1

    cycle, 周期循环的意思。

    {% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

one
two
three
one

    tablerow, 快速构建表格的行。

    <table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

{% tablerow product in collection.products cols:2 %}
  {{ product.title }}
{% endtablerow %}

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      Batman Poster
    </td>
    <td class="col2">
      Bullseye Shirt
    </td>
  </tr>
  <tr class="row3">
    <td class="col1">
      Another Classic Vinyl
    </td>
    <td class="col2">
      Awesome Jeans
    </td>
  </tr>
</table>

{% tablerow product in collection.products cols:2 limit:3 %}
  {{ product.title }}
{% endtablerow %}

{% tablerow product in collection.products cols:2 offset:3 %}
  {{ product.title }}
{% endtablerow %}

<!--variable number example-->

{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
  {{ i }}
{% endtablerow %}
</table>

<!--literal number example-->

<table>
{% tablerow i in (3..5) %}
  {{ i }}
{% endtablerow %}
</table>

    变量

    Liquid, 支持变量的定义和计算。

    assign

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

{% assign foo = "bar" %}
{{ foo }}

capture

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

I am being captured.

{% assign favorite_food = 'pizza' %}
{% assign age = 35 %}

{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}

{{ about_me }}

I am 35 and my favourite food is pizza.

Creates a new number variable, and increases its value by one every time it is called. 
The initial value is 0.

{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

0
1
2

Variables created through the increment tag are independent from variables created through assign or capture.

{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}

0
1
2
10

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

-1
-2
-3

    Filters

    Liquid提供了一些常用的过滤器（方法）。

    abs

    {{ -17 | abs }}
17

{{ "-19.86" | abs }}
19.86

    append, prepend

    {% assign filename = "/index.html" %}
{{ "website.com" | append: filename }}
website.com/index.html

    capitalize

    首字母大写。

    {{ "title" | capitalize }}
Title
{{ "my great title" | capitalize }}
My great title

    date

    {{ article.published_at | date: "%a, %b %d, %y" }}
Fri, Jul 17, 15
{{ article.published_at | date: "%Y" }}
2015
{{ "March 14, 2016" | date: "%b %d, %y" }}
Mar 14, 16

To get the current time, pass the special word "now" (or "today") to date:
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
This page was last updated at 2017-06-29 14:45.

    default

    {{ product_price | default: 2.99 }}
2.99
{% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
4.99
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
2.99

    lstrip, rstrip, strip

    去除句子首部的空白字符。

    {{ "          So much room for activities!          " | lstrip }}
So much room for activities!

    去除句子尾部的空白字符。

    {{ "          So much room for activities!          " | rstrip }}
          So much room for activities!

    去除首尾的空白字符。

    {{ "          So much room for activities!          " | strip }}
So much room for activities!

    plus, minus, times, divided_by

    加，减，乘，除运算。

    {{ 16 | divided_by: 4 }}
4
{{ 5 | divided_by: 3 }}
1
{{ 20 | divided_by: 7.0 }}
2.857142857142857
{% assign my_integer = 7 %}
{% assign my_float = my_integer | times: 1.0 %}
{{ 20 | divided_by: my_float }}
2.857142857142857

    remove, remove_first

    {{ "I strained to see the train through the rain" | remove: "rain" }}
I sted to see the t through the 
{{ "I strained to see the train through the rain" | remove_first: "rain" }}
I sted to see the train through the rain

    replace, replace_first

    {{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
Take your protein pills and put your helmet on
{% assign my_string = "Take my protein pills and put my helmet on" %}
{{ my_string | replace_first: "my", "your" }}
Take your protein pills and put my helmet on

    slice

    Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned.

    截取指定长度的字符串，第二个表示长度，第一个表示索引，从0开始，如果为负数，从后面往前数，从-1开始。

    {{ "Liquid" | slice: 0 }}
L
{{ "Liquid" | slice: 2 }}
q
{{ "Liquid" | slice: 2, 5 }}
quid
{{ "Liquid" | slice: -3, 2 }}
ui

    split

    Divides an input string into an array using the argument as a separator. split is commonly used to convert comma-separated items from a string to an array.

    分割字符串组成一个数组。

    {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

{% for member in beatles %}
  {{ member }}
{% endfor %}


  John

  Paul

  George

  Ringo

    当然这里没有列举完所有的filter, 这些是相对比较常用的，记着这些，如果满足不了需求，再去官方文档上翻阅翻阅。

    博客原文：http://huangyanxiang.com/2017/09/20/jekyll-with-liquid.html

    github-pagesjekyll
    Chinaxiang
    2.1k 声望52 粉丝

    这个人很懒，什么也没有留下。

    « 上一篇
    Welcome To Jekyll
    下一篇 »
    Jekyll With Usefule Plugins

    引用和评论

    推荐阅读
    头像
    Java P7架构师应具备什么能力？超全学习路线规划奉上（不卖课，纯分享），适合自检和学习规划，高薪必备

    Chinaxiang阅读 358

    头像
    使用代码将github仓库里某个issue同步到CSDN博客上

    注销阅读 2.2k

    头像
    开发一个简单的工具，导出github仓库所有issue列表

    注销阅读 2.2k

    头像
    一个简单的例子学会github repository的webhook

    注销阅读 1.6k

    0 条评论
    得票最新