介绍在编写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/
参考
- https://github.com/shopify/liquid/wiki/liquid-for-designers
- http://blog.csdn.net/dont27/article/details/38097581
- 上一页:Java的final
- 下一页:Tunnel 协议
专栏文章
- 使用Jekyll在Github上搭建博客 -- 环境安装
- 使用Jekyll在Github上搭建博客 -- 如何将博客上传至github
- 使用Jekyll在Github上搭建博客 -- 分页实现
- 使用Jekyll在Github上搭建博客 -- 子菜单的实现
- Jekyll 页面 liquid 语法介绍(当前)
- 采用Docker和解决Github Pages禁止百度爬虫的问题
- jekyll Web服务器列目录漏洞
- Jekyll发布文章时字符乱码解决办法 -- invalid byte sequence in GBK
最近更新
最新评论