Jekyll 模板 简单语法 笔记
作者:
| 更新日期:使用 github 做静态网站后,发现想实现内容丰富的网站,需要先了解 Jekyll 的基本语法,于是找了一些资料看了看,并记录下来。
本文首发于公众号:天空的代码世界,微信号:tiankonguse
目录结构
一般建议在每个目下建一个 index 文件。
Jekyll 的标准目录结构如下。
├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
| └── index.html # => http://tiankonguse.github.io/about/
├── contact/
| └── index.html # => http://tiankonguse.github.io/contact/
└── index.html # => http://tiankonguse.github.io/
-
_config.yml Jekyll的配置文件
_includes文件夹中所放的文件是最终要放到模版中的一些代码片段。
-
_includes include 文件所在的文件夹
_layouts中放的一些模版,模版是用包含page或post内容的。Jekyll的模版使用HTML语法来写,并包含YAML Front Matter。
所有的模版都可用Liquid来与网站进行交互。
所的的模版都可以使用全局变量site和page
site变量包含该网站所有可以接触得到的内容和元数据(meta-data)
page变量包含的是当前渲染的page或post的所有可以接触得到的数据。
- _layouts 模版文件夹
-
_posts 自己要发布的内容
_post文件夹中放的是自己要发布的post文章。
post文件的命名规则为YEAR-MONTH-DATE-title.MARKUP,使用rake post会自动将post文件命名合适。
而对于page,所有放在根目录下或不以下划线开头的文件夹中有格式的文件都会被Jekyll处理成page。
这里说的有格式是指文件含有YAML Front Matter。
所有的post和page都要用markdown或者texile或者HTML语法来写,并可以包含Liquid模版的语法。
还要有 YAML Front Matter (Jekyll只处理具有YAML Front Matter的文件)。
YAML Front Matter必须放在文件的开头,一对—之间,用户可在这一对—间设置预先定义的变量或用户自己的数据
- _sites 预览时产生的文件都放在该文件夹中
全局变量
关于 jekyllrb 的变量文档,可以参考官方文档。
变量名 | 描述 |
---|---|
site | site 的信息 以及 _config.yml 文件中的配置信息 |
page | page 特定的信息, YAML 中的配置信息, 另外加上两个额外的变量值:url和content |
content | 在布局模板文件中,这里变量包含了页面的子视图。这个变量将会把渲染后的内容插入到模板文件中。这个变量不能在文章和页面文件中使用。 |
paginator | 一旦paginate配置选项被设置了,这个变量才能被使用。 |
Site 变量
site 下的变量 | 描述 |
---|---|
site.time | 当前的时间(当你运行Jekyll时的时间) |
site.pages | 所有页面的列表 |
site.posts | 一个按时间逆序的文章列表。 |
site.related_posts | 如果当前被处理的页面是一个文章文件,那这个变量是一个包含了最多10篇相关文章的列表。 |
site.static_files | 所有静态页面的列表,每个文件有三个属性:路径,修改时间,扩展名。 |
site.html_pages | 所有的html页面的列表 |
site.collections | A list of all the collections. |
site.data | A list containing the data loaded from the YAML files located in the _data directory. |
site.documents | A list of all the documents in every collection. |
site.categories.CATEGORY | 所有在CATEGORY分类中的文章列表 |
site.tags.TAG | 所有拥有TAG标签的文章的列表 |
site.[CONFIGURATION_DATA] | 截止0.5.2版本,所有在_config.yml中的数据都能够通过site变量调用。 |
Page 变量
Page 下的变量 | 描述 |
---|---|
page.content | 页面中未渲染的内容 |
page.title | 文章的标题 |
page.excerpt | The un-rendered excerpt of the Page. |
page.url | 除去域名以外的URL |
page.date | 指定每一篇文章的时间,这个选项能够覆盖一篇文章中前置数据设置的时间,它的格式是这样的:YYYY-MM-DD HH:MM:SS |
page.id | 每一篇文章的唯一标示符(在RSS中非常有用) |
page.categories | 这篇文章隶属的分类的一个列表,分类是通过在_post目录中的目录结构推导而来的。 |
page.tags | 这篇文章的标签的列表。这些数据能够在YAML前置数据中指定 |
page.path | 页面的源码地址 |
page.next | 按时间序的下一篇文章 |
page.previous | 按时间序的上一篇文章 |
Paginator 变量
分页只在 html 页面中[^1]有效,所以对于 index 页面尽量使用 html 后缀。
Page 下的变量 | 描述 |
---|---|
paginator.per_page | 每一个页面上文章的数量 |
paginator.posts | 当前页面上可用的文章 |
paginator.total_posts | 所有文章的数量 |
paginator.total_pages | 所有页面的数量 |
paginator.page | 当前页面的数量 |
paginator.previous_page | 前面的页面的数量 |
paginator.next_page | 接下来的的页面的数量 |
Collections
官方有这么一句话:
Collections support is unstable and may change
This is an experimental feature and that the API may likely change until the feature stabilizes.
Data Files
Jekyll 支持 从 _data 目录中加载 YAML, JSON, 和 CSV 格式的文件数据。
例如创建 _data/members.yml 文件。
- name: 袁小康
github: tiankonguse
oldnick : shen1000
nick : skyyuan
使用
<ul>
{% for member in site.data.members %}
<li>
<a href="https://github.com/{{ member.github }}">
{% assign nick = member.nick %}
{% assign name = member.name %}
{{ nick}} ( {{name}} )
</a>
</li>
{% endfor %}
</ul>
本文首发于公众号:天空的代码世界,微信号:tiankonguse
如果你想留言,可以在微信里面关注公众号进行留言。