PansLabyrinth 记录软件开发和生活中的日常

Jekyll模板介绍

2017-06-03
Pan

根据Jekyll的文档,知道其是使用Liquid作为模板引擎,并且添加了一些自定义的变量和方法, 因此在此测试一下,毕竟,Leaning by doing嘛!

前言

上周端午节在家比较闲,就将从前的博客改版了一下。主要是将前端从Jekyll-Clean替换成了国人做的HYG,视觉效果有了很大提升。 另外也藉此机会,将从前匆匆学习的Jekyll又仔细翻阅了一下,将HYG的模板进行了不少个性化的增改。在此将最近了解的内容整理总结一下, 权且当作是巩固学习吧。

Liquid简介

Liquid模板引擎和大部分HTML模板类似,包括三个分类,分别是对象(objects)标签(tags)过滤器(filters)

对象(objects)

Liquid中的对象是一个用{{}}包起来的变量,用来展现页面中的动态内容。

  • {{ page.date }} :2017-06-03 00:00:00 +0800
  • {{ page.categories }} :tech

标签(tags)

标签一般用来在页面中创建逻辑和控制流,用{%%}进行表示。如:

{% if false %}
    hello
{% else %}
    world
{% endif %}

输出为:

    world

标签一般可以分类为三种,分别是逻辑控制循环变量赋值。详见Liquid Tags

过滤器(filters)

过滤器可以改变模板变量的输出方式,也可以进行额外的操作, 以|号在变量内进行作用,例如:

  • {{ 7 | times: 7 }} :49
  • {{ 20 | divided_by: 7.0 }} :2.857142857142857
  • {{ "/about/index" | append: ".html" }} : /about/index.html
  • {{ page.date | date: "%Y-%m-%d %H:%M" }} :2017-06-03 00:00

过滤器也可以同时使用多个,作用顺序为从左到右边,如:

  • {{ "world!" | capitalize | prepend: "Hello " }} : Hello World!

常用的filters有append,prepend,size,uniq等,详见Liquid Filters

Jekyll相关

由于Jekyll使用的也是Liquid的模板,因此Liquid标准的对象,标签和过滤器都可以在Jekyll中使用。除此之外, Jekyll还定义了许多有用的对象,标签和过滤器。

Jekyll对象

在Jeklly中,一共默认有4个全局变量(即对象,下同),分别是site,page,layoutcontent, 某些插件可能也会提供对应的全局变量,如分页插件就提供了paginator变量。下面是一些变量渲染的例子: 其中site对象是全站维度的变量加上配置文件_config.yml里设置的变量,page是包含当前页面相关变量的对象, layout是布局相关的信息,content则是在布局文件_layouts\xxx.html中使用的包含文章或者页面的内容信息, 并且只能在layout文件中使用,在文章和页面文件中不包含此变量。

site对象为例,可以用标准的对象打印方法打印在_config.yml中配置的一些变量:

  • {{ site.title }} :PansLabyrinth
  • {{ site.url }} :https://evilpan.com
  • {{ page.title }} :Jekyll模板介绍
  • {{ page.id }} :/2017/06/03/jekyll-template-test

关于Jekyll相关的全局变量完整内容,请参考Jeklly变量

Jekyll过滤器

地址相关

以Jekyll根目录下的images/sitewide/poor-owl.png为例:

  • {{ "/images/sitewide/poor-owl.png" | relative_url }} : /images/sitewide/poor-owl.png
  • {{ "/images/sitewide/poor-owl.png" | absolute_url }} : https://evilpan.com/images/sitewide/poor-owl.png

其中xxx | relative_url相当于xxx | prepend baseurl, xxx | absolute_url相当于xxx | prepend baseurl | prepend url

日期相关

Jekyll中包含了将日期转换为常用格式显示的过滤器,如下例子所示:

  • {{ site.time }} : 2019-01-12 14:39:40 +0800
  • {{ site.time | date_to_xmlschema }} : 2019-01-12T14:39:40+08:00
  • {{ site.time | date_to_rfc822 }} : Sat, 12 Jan 2019 14:39:40 +0800
  • {{ site.time | date_to_string }} : 12 Jan 2019
  • {{ site.time | date_to_long_string }} : 12 January 2019

其他

除了上述过滤器,Jekyll还提供了where,group_by等条件过滤器和xml_escape,uri_escape等安全相关的过滤器,详见Jekyll Filters

Jekyll标签

link标签用来生成指向文章、页面或者文件目标的连接,link标签的好处是会自动生成正确的永久连接(permalink), 比如我当前文章的永久连接格式是/年/月/日/标题/,以后即便改变了permalink的格式,生成的连接也会随之改变。

  • {% link _posts/2015-10-31-p2p-over-middle-box.md %} : /2015/10/31/p2p-over-middle-box/
  • {% link images/sitewide/poor-owl.png %} : /images/sitewide/poor-owl.png
  • {% link /css/main.scss %} : /css/main.css

link标签生成的信息是不包含baseurlurl的。

链接到文章(post_url)

post标签也可以用来生成指向目标文章的字符串,和link不同的是其不用指定文件后缀,如下:

  • {% post_url 2016-07-30-bypass-av %} : /2016/07/30/bypass-av/
  • {% post_url 2016-07-17-about-unicode %} : /2016/07/17/about-unicode/

post_url标签生成的信息不包含baseurlurl



上一篇(较旧) 关系型数据库设计小结

下一篇(较新) Nginx日志分析

评论

目录