Jekyll 速查表

本文根据 Devhints / Jekyll 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2018-08-25。

安装

# Install the gems
gem install jekyll bundler

# Create a new site at `./myblog`
jekyll new myblog
cd myblog

# Optional: if you're targeting github-pages,
# use this Gemfile instead.
cat > Gemfile <<-END
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
END

bundle exec jekyll serve

参见： Jekyll 快速入门
参见： github/pages-gem

目录

./
├── _config.yml
│
├── _data/
│   └── ...
│
├── _drafts/
│   └── ...
│
├── _posts/
│   └── 2014-01-01-hello.md
│
├── _layouts/
│   ├── default.html
│   └── post.html
│
├── _includes/             - partials
│   ├── header.html
│   └── footer.html
│
└── _site/
    └── ...

Front-matter（元数据区）

基础 Front-matter

---
layout: post
title: Hello
---
Hello! this is my post.

通过在页面的 top 处添加元数据，即可将其关联至该页面；元数据需使用特定分隔符包裹。 ---。参见： Front-matter（元数据区）

其他 Front-matter 相关内容

permalink: '/hello'
published: false
category: apple
categories: ['html', 'css']
tags: ['html', 'css']

配置

在 _config.yml:

source: .
destination: _site
exclude:
- Gemfile
- Gemfile.lock
include: ['.htaccess']

所有配置键均为可选。参见： 配置

标记语言 (Markup)

页面变量

<title>
  {{ page.title }}
</title>

过滤器

<p>
  {{ page.description | truncate_words: 20 }}
</p>

循环

{% for post in site.posts %}
  <a href="{{ post.url }}">
    <h2>{{ post.title }}</h2>
    <p>{{ post.date | date_to_string }}</p>
  </a>
{% endfor %}

日期

{{ page.date | date: "%b %d, %Y" }}

条件判断

{% if page.image.feature %}
  ...
{% elsif xyz %}
  ...
{% else %}
  ...
{% endif %}

{% if page.category == 'React' %}
{% if page.category == 'React' or page.featured %}
{% if page.tags contains 'Featured' %}

大小写 (Case)

{% case shipping.title %}
  {% when 'international' %}
     Arriving in 2-3 weeks
  {% when 'Domestic' %}
     Arriving in 2-3 days
  {% else %}
     Thank you for your order!
{% endcase %}

包含 (Includes/partials)

{% include header.html %}

<!-- Including local vars -->
{% include header.html page=page %}

注释

{% comment %}
  This is a comment!
{% endcomment %}

变量

顶层变量

参见： 变量

站点 (Site)

{{ site.time }}

页面

{{ page.content }}  - un-rendered content
{{ page.title }}
{{ page.excerpt }}  - un-rendered excerpt
{{ page.url }}
{{ page.date }}
{{ page.id }}       - unique id for RSS feeds
{{ page.categories }}
{{ page.tags }}
{{ page.path }}
{{ page.dir }}
{{ page.excerpt | remove: '<p>' | remove: '</p>' }}
{{ page.excerpt | strip_html }}

<!-- blog pagination: -->
{{ page.next }}
{{ page.previous }}

过滤器

日期

{{ site.time | date: "%Y %m %d" }}

预处理器

{{ page.description | markdownify }}

数组过滤器

{{ site.pages | where: "year", "2014" }}

字符串过滤器

{{ page.title | default: "xxx" }}

参见： 字符串过滤器

字符串过滤器（仅限 Jekyll）

{{ page.excerpt | number_of_words }}

数字

{{ site.posts.size | minus: 2 }}

分页器 (Paginator)

分页器设置

将其添加到 _config.yml:

paginate: 5
paginate_path: "blog/:num"

参见： 分页器 (Paginator)

数字

{{ paginator.page }}         - page number
{{ paginator.total_posts }}
{{ paginator.total_pages }}
{{ paginator.per_page }}

遍历文章

{% for post in paginator.posts %} ... {% endfor %}

“上一页”按钮

{% if paginator.total_pages > 1 %}
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}">Previous</a>
  {% else %}
  {% endif %}
{% endif %}

{{ paginator.next_page }}     - page number
{{ paginator.next_page_path }}

博客功能

路径

_posts/YEAR-MONTH-DAY-title.md

参见： 博客功能

图片路径

![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)

参见： 图片路径

草稿

vi _drafts/a-draft-post.md
jekyll build --drafts

文章（Posts） _drafts 仅在开发环境中显示，不会出现在生产环境中。请参阅： 草稿

定义摘要

---
title: My blog post
excerpt: This post is about cats
---

Hello, let's talk about cats. (···)

添加一个键（key） excerpt 到元数据（frontmatter）中。请参阅： 摘要

显示摘要

{{ post.excerpt }}

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
{{ post.excerpt | strip_html }}

摘要分隔符

---
excerpt_separator: <!--more-->
---

Excerpt here
<!--more-->
More post body here

或者，您也可以通过定义相关内容，将摘要直接嵌入到文章正文中 excerpt_separator.

永久链接（Permalinks）

# _config.yml
permalink: date   # /:categories/:year/:month/:day/:title.html
permalink: pretty # /:categories/:year/:month/:day/:title/
permalink: none   # /:categories/:title.html
permalink: "/:title"

参见： 永久链接（Permalinks）

更多功能

数据

_data/members.yml

{% for member in site.data.members %}
  ...
{% endfor %}

参见： 数据

集合（Collections）

# _config.yml
collections:
  - authors

# _/authors/a-n-roquelaire.md
---
name: A. N. Roquelaire
real_name: Anne Rice
---

{% for author in site.authors %}

参见： 集合（Collections）

代码高亮

{% highlight ruby linenos %}
def show
  ...
end
{% endhighlight %}

集成

Bundler

在 _plugins/bundler.rb:

require "bunder/setup"
Bundler.require :default

Compass

• Compass
• 资源流水线（Asset pipeline）

另请参阅

• Jekyll 文档 jekyllrb.com
• CloudCannon Jekyll 速查表 cloudcannon.com
• Jekyll：模板 jekyllrb.com
• Liquid：输出 shopify.com
• Liquid：逻辑 shopify.com
• Liquid：过滤器 shopify.com
• 面向设计师的 Liquid github.com/Shopify