❖ 一篇文章了解Liquid Template Engine 模版引擎 (Jekyll模版)

学习制作Jekyll模版,其实主要是学习Liquid语法。

参考:Liquid官方文档。

就像PHP、ASP、Python等一切网络动态语言一样,Liquid也相当于一种独立的动态语言,没什么大差别,基本功能都有。
说白了就是动态生成HTML,可以输出变量,操作数组,调用外部数据,设置IF ELSE判断,FOR循环等,这些都能达到。

开始讲语法前,大概说明一下运行流程:

常用变量及属性

参考:Jekyll 语法简单笔记

site对象

site对象是全站都能调用的变量,全部都在_config.yml文件中定义。
常用变量如下:

  • site.pages: 所有`_
  • site.posts: 所有文章
  • site.categories: 所有的 categories
  • site.tags: 所有的 tags
  • site.related_posts: 从LSI Keywords提取出来最相关最新的10篇文章
  • site.collections: 所有集合(与posts逻辑很大不同,一般用来放members等特殊数据)
  • site.documents: 所有 collections 里面的文档
  • site.data: _data 目录下的数据
  • site.[abc]: 自定义的变量(手动在_config.yml中指定)

page对象

  • page.content: 页面的内容
  • page.title: 标题 (手动在Front Matters中指定)
  • page.excerpt: 摘要
  • page.url: 链接
  • page.date: 时间
  • page.id: 唯一标示
  • page.categories: 分类(手动在Front Matters中指定)
  • page.tags: 标签(手动在Front Matters中指定)
  • page.path: 源代码位置
  • page.next: 下一篇文章
  • page.previous: 上一篇文章

categories对象

site.categories列表中循环得到的是一个一个的category,其中包括这些属性:

  • cat[0]: 返回cat的名称
  • cat[0].size: 返回这个分类里的文章数量
  • cat[1]: 返回一个post_list列表,包含这个category里所有的post对象。
  • cat[1].size: 返回这个post_list列表中的对象数量。

tag对象

site.tags列表中循环得到的是一个一个的tag,其中包括这些属性:

  • tag[0]: 返回tag的名称
  • tag[0].size: 返回这个tags里的文章数量
  • tag[1]: 返回一个post_list列表,包含这个tags里所有的post对象。
  • tag[1].size: 返回这个post_list列表中的对象数量。

paginator对象

  • paginator.per_page: 每一页的数量
  • paginator.posts: 这一页的数量
  • paginator.total_posts: 所有文章的数量
  • paginator.total_pages: 总的页数
  • paginator.page: 当前页数
  • paginator.previous_page: 上一页的页数
  • paginator.previous_page_path: 上一页的路径
  • paginator.next_page: 下一页的页数
  • paginator.next_page_path: 下一页的路径

列表读取(各种归档页面用)

循环读取Posts

读取全站所有的posts:

{% for post in site.posts %}
    <h2> {{ post.title }} </h2>
    <h2> {{ post.url }} </h2>
    <h2> {{ post.category }} </h2> 
    <h2> {{ post.excerpt }} </h2>  ︎ 文章摘要,自动生成的
{% endfor %}

只读取_posts/文件夹中某个category中的posts,
例如_posts/tech文件夹中放的是一些category为tech的文章,那么读取方式是:

{% for post in site.categories.tech %}
    <h2> {{ post.title }} </h2>
{% endfor %}

注意,在_posts中nested文件夹里的文章,也必须在Front matter中指定分类,要不然读不出来。

循环读取categories

读取全站所有的分类:

{% for cat in site.categories %}
    <h2> {{ cat[0] }} </h2>
{% endfor %}

读取所有分类下的所有文章:

{% for cat in site.categories %}
    {% for post in cat[1] %}
        <h2> {{ post.title }} </h2>
    {% endfor %}
{% endfor %}

读取某个分类下所有的文章:

{% for post in site.categories.blog %}
    <h2> {{ post.title }} </h2>
{% endfor %}

循环读取tags

读取全站所有的tags:

{% for tag in site.tags %}
    <h1> {{ tag[0] }} </h1>
{% endfor %}

读取所有tags下的所有文章:

{% for tag in site.tags %}
    {% for post in cat[1] %}
        <h2> {{ post.title }} </h2>
    {% endfor %}
{% endfor %}

读取某个tag下所有的文章:

{% for post in site.tags.math %}
    <h2> {{ post.title }} </h2>
{% endfor %}

读取某category下所有文章并按tag分组读取

{% for post in site.categories.Tech %}   ︎ 先读取某分类下所有的文章
     {% assign tags = tags |concat: post.tags |uniq %}   ︎ 把每篇文章的tags存到列表里,并删除重复项
{% endfor %}

{% for tag in tags %}
    <h2> {{ tag }} </h2>   ︎ 循环输出这个category中的所有tags
    {% for post in site.categories.calculus %}
        {% if post.tags contains tag %}      ︎ 循环判断如果文章属于此tag则显示出来
            <h4> {{ post.title }} </h4>
        {% endif %}
    {% endfor %}
{% endfor %}

Post读取

需要在MD文档里指定layout才能调用。比如文档里指定了layout: post,那么系统就找到_layouts/post.html这个文件;如果文档指定了layout: blog,那么系统就会找到_layout/blog.html这个文件。
在layout里面读取post数据很简单,不需要for循环,不需要if判断,直接用post这个对象就行。因为系统已经把文章的数据传过来了。

假如我们在_posts/xx.md文章的头信息中,定义了这些数据:

---
layout: post
title: I'm a post
category: 'blog'
tags: ['jekyll', 'wordpress', 'blog']
---

(注:tags列表等,在yaml中可以用- tag['tag']表示,一样的 )

以下就是这个post.html文件读取post数据的方式:

<h2> {{ post.title }} </h2>
<h2> {{ post.category }} </h2>

<h2> {{ post.content }} </h2>

{% for tag in post.tags %}
    <h2> {{ tag }} </h2>
{% endfor %}

group_by 分组和where_exp条件筛选

官方的group_by做到了复杂查询的功能,比如查找某个category下的全部文章并按tag分组显示。
相对自己写for/if实现来说,虽然官方提供了这个功能,但是你仔细阅读文档就会发现,这个group_by必须配合单独的静态的额外的文档才能实现。
也就是说,你必须手动写个mygroup.doc文件,一个一个指定每篇文章的分组、分类、顺序等。
那实在太麻烦了。

参考官方:Navigation

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,188评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,464评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,562评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,893评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,917评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,708评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,430评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,342评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,801评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,976评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,115评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,804评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,458评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,008评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,135评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,365评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,055评论 2 355

推荐阅读更多精彩内容