Jekyll 页面 liquid 语法介绍|谢先斌的博客

发布时间： Apr 19, 2014 更新时间： Apr 19, 2014 总字数：2151 阅读时间：5m 作者： 谢先斌 分享

介绍在编写gitpage 写blog时，使用jekyll 页面 liquid 语法使用方法。

Liquid的语法介绍

Liquid有两种标记类型，Output 和 Tag：

Output标记，用于输出文本，格式采用：

{% highlight html %}
{% raw %}
{{ 两个尖括号包围 }}
{% endraw %}
{% endhighlight %}

Tag标记，用于执行命令或者处理格式:

{% highlight html %}
{% raw %}
{% 一对尖括号内一对百分号 %}
{% endraw %}
{% endhighlight %}

这种语法类比jsp格式，Output相当于 <%=variable>，即输出变量值;Tag相当于<% int i=2 ;%>,一种数据处理,但不做输出效果.

Output 标记

Output 示例

例子:

{% highlight html %}
{% raw %}
Hello {{ name }}
Hello {{ user.name }}
Hello {{ ‘tobi’ }}
{% endraw %}
{% endhighlight %}

高级Output: Filters//过滤器

Filters过滤器，数据处理的操作方法。过滤器的第一个参数，往往是过滤器运算符’|‘左边的Output，而过滤器的返回值，是通过过滤运算符右边的操作所得到的，过滤器可以叠加操作，最终得到该Output所要输出的值。

如下：

{% highlight html %}
{% raw %}
Hello {{ ‘tobi’ | upcase }}
Hello tobi has {{ ‘tobi’ | size }} letters!
Hello {{ ‘now’ | date: «%Y %h» }}
{% endraw %}
{% endhighlight %}

标准过滤器

{% highlight html %}
{% raw %}
date - 格式化时间
capitalize - 输出字符串，字符串（句子）首字母大写 e.g. 假设tb为»hello world»{{ tb|capitalize }} #=> ‘Hello world’
downcase - 转换小写
upcase - 转换大写
first - 获取数组的第一个元素
last - 获取数组的最后一个元素
join - 用指定的字符拼接数组元素
sort - 排序数组
map - map/collect an array on a given property
size - 返回数组大小
escape - 转移字符串
escape_once - returns an escaped version of html without affecting existing escaped entities
strip_html - 除去字符串中的html标签?
strip_newlines - 除去字符串中的回车?
newline_to_br - 将所有的回车»\n» 转换成»
»?
replace - 替换所有匹配内容 e.g.{{ ‘forfor’ | replace:‘for’, ‘bar’ }} #=> ‘barbar’
replace_first - 替换第一个匹配内容 e.g.{{ ‘forfor’ | replace_first:‘for’, ‘bar’ }} #=> ‘barfor’
remove - 移除所有匹配内容 e.g.{{ ‘forbarforbar’ | remove:‘for’}} #=> ‘barbar’
remove_first - 移除第一个匹配内容 e.g.{{ ‘forbarforbar’ | remove_first:‘for’ }} #=> ‘barforbar’
truncate - truncate a string down to x characters
truncatewords - truncate a string down to x words
prepend - 在字符串前面加上内容 e.g.{{‘bar’|prepend:‘far’ }} #=> ‘farbar’
append - 字符串后面加上内容 e.g.{{‘bar’|append: ‘foo’ }}#=> ‘barfoo’
minus - 减法 e.g. {{ 4|minus:2 }} #=>2
plus - 加法 e.g. {{ 4|plus:2 }} #=> 6
times - 乘法 e.g. {{ 10|times:2 }} #=> 20
divided_by - 除法 e.g. {{ 10 | divided_by:2 }} #=> 5
split - 分割字符串 e.g.{{ «a~b» | split:’~’ }} #=> [‘a’,‘b’]
modulo - 取余 e.g. {{ 3 | modulo:2 }} #=> 1
{% endraw %}
{% endhighlight %}

Tag标记

Tag在模板中起到处理逻辑的作用。

下面是目前支持的Tag:

{% highlight html %}
{% raw %}
assign - 定义变量 e.g. {% assign tt = 1 %} 定义了变量tt数值为1
capture - Block tag为变量赋值 e.g.{% capture dont %}{{ tt }}{% endcapture %} 将tt的值赋给 dont
case - Block tag its the standard case…when block
comment - Block tag 注释
cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
for - for循环block
if - 判断block
include - 引入模板
raw - 转义内容tag e.g.{\% raw \%}{{ this }}{\% endraw \%} #=> ‘{{ this }}’
unless - Mirror of if statement
{% endraw %}
{% endhighlight %}

Comments

注释隐藏

{% highlight html %}
{% raw %}
We made 1 million dollars {% comment %} in losses {% endcomment %} this year
{% endraw %}
{% endhighlight %}

Raw

当包裹内容出现冲突语法时，不会执行其处理。

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

if/else

{% highlight html %}
{% raw %}
{% if user %}
Hello {{ user.name }}
{% endif %}

# Same as above
{% if user != null %}
  Hello {{ user.name }}
{% endif %}

{% if user.name == 'tobi' %}
  Hello tobi
{% elsif user.name == 'bob' %}
  Hello bob
{% endif %}

{% if user.name == 'tobi' or user.name == 'bob' %}
  Hello tobi or bob
{% endif %}

{% if user.name == 'bob' and user.age > 45 %}
  Hello old bob
{% endif %}

{% if user.name != 'tobi' %}
  Hello non-tobi
{% endif %}

# Same as above
{% unless user.name == 'tobi' %}
  Hello non-tobi
{% endunless %}

# Check for the size of an array
{% if user.payments == empty %}
   you never paid !
{% endif %}

{% if user.payments.size > 0  %}
   you paid !
{% endif %}

{% if user.age > 18 %}
   Login here
{% else %}
   Sorry, you are too young
{% endif %}

# array = 1,2,3
{% if array contains 2 %}
   array includes 2
{% endif %}

# string = 'hello world'
{% if string contains 'hello' %}
   string includes 'hello'
{% endif %}

{% endraw %}
{% endhighlight %}

Case Statement

多条件

{% highlight html %}
{% raw %}
{% case condition %}
{% when 1 %}
hit 1
{% when 2 or 3 %}
hit 2 or 3
{% else %}
… else …
{% endcase %}

{% case template %}

{% when 'label' %}
     // {{ label.title }}
{% when 'product' %}
     // {{ product.vendor | link_to_vendor }} / {{ product.title }}
{% else %}
     // {{ page_title }}
{% endcase %}

{% endraw %}
{% endhighlight %}

Cycle

循环列举

{% highlight html %}
{% raw %}
{% cycle ‘one’, ‘two’, ‘three’ %}
{% cycle ‘one’, ‘two’, ‘three’ %}
{% cycle ‘one’, ‘two’, ‘three’ %}
{% cycle ‘one’, ‘two’, ‘three’ %}
{% endraw %}
{% endhighlight %}

结果：

one
two
three
one

可以通过命名分组：

{% highlight html %}
{% raw %}
{% cycle ‘group 1’: ‘one’, ‘two’, ‘three’ %}
{% cycle ‘group 1’: ‘one’, ‘two’, ‘three’ %}
{% cycle ‘group 2’: ‘one’, ‘two’, ‘three’ %}
{% cycle ‘group 2’: ‘one’, ‘two’, ‘three’ %}
{% endraw %}
{% endhighlight %}

结果：

one
two
one
two

for 循环

循环集合：

{% highlight html %}
{% raw %}
{% for item in array %}
{{ item }}
{% endfor %}
{% endraw %}
{% endhighlight %}

遍历hash时：item[0]包含键，item[1]包含值

{% highlight html %}
{% raw %}
{% for item in hash %}
{{ item[0] }}: {{ item[1] }}
{% endfor %}
{% endraw %}
{% endhighlight %}

for循环时，下列变量可以辅助使用：

forloop.length      # => length of the entire for loop
forloop.index       # => index of the current iteration
forloop.index0      # => index of the current iteration (zero based)
forloop.rindex      # => how many items are still left?
forloop.rindex0     # => how many items are still left? (zero based)
forloop.first       # => is this the first iteration?
forloop.last        # => is this the last iteration?

还有一些变量可以用来处理循环时选择性处理：

limit:int - 限制遍历个数

offset:int - 从第n个数开始遍历

{% highlight html %}
{% raw %}
# array = [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
{{ item }}
{% endfor %}
# results in 3,4
{% endraw %}
{% endhighlight %}

反序遍历：

{% highlight html %}
{% raw %}
{% for item in collection reversed %}
{{ item }}
{% endfor %}
{% endraw %}
{% endhighlight %}

除了遍历集合，还可以定义一个范围的数字来遍历：

{% highlight html %}
{% raw %}
# if item.quantity is 4…
{% for i in (1..item.quantity) %}
{{ i }}
{% endfor %}
# results in 1,2,3,4
{% endraw %}
{% endhighlight %}

变量赋值

赋值变量：

{% highlight html %}
{% raw %}
{% assign name = ‘freestyle’ %}

{% for t in collections.tags %}
  {% if t == name %}
    <p>Freestyle!</p>
  {% endif %}
{% endfor %}

{% endraw %}
{% endhighlight %}

还可以赋值布尔值：

{% highlight html %}
{% raw %}
{% assign freestyle = false %}

{% for t in collections.tags %}
  {% if t == 'freestyle' %}
    {% assign freestyle = true %}
  {% endif %}
{% endfor %}

{% if freestyle %}
  <p>Freestyle!</p>
{% endif %}

{% endraw %}
{% endhighlight %}

赋值处理过的数据：可以用capture

{% highlight html %}
{% raw %}
{% capture attribute_name %}
{{ item.title | handleize }}-{{ i }}-color{% endcapture %}

  <label for="{{ attribute_name }}">Color:</label>
  <select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>

{% endraw %}
{% endhighlight %}

使用技巧

剔除空格

In Liquid, you can include a hyphen in your tag syntax {% raw %}{{-, -}}{% endraw %}, {% raw %}{%-, and -%}{% endraw %} to strip whitespace from the left or right side of a rendered tag.

ref：https://shopify.github.io/liquid/basics/whitespace/

参考

上一页：解决Maven报Plugin execution not covered by lifecycle configuration
下一页：Ubuntu/Debian安装vsftp软件

相关文章

最近更新

最新评论

加载中...