jekyll入门

翻我自己的blog,发现在三年前就搞了Jekyll,后面也有几次断续提到. 既然总是涉及到还是好好学学了.
Jekyll基于ruby/markdown/Liquid. 官网在这儿

安装

去Ruby官网下载安装ruby

安装后, 包管理工具gem应该可以运行. 先替换gem源:

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

敲入下面命令做jekyll入门安装:

gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

jekyll serve命令将打开127.0.0.1:4000端口.不过这个端口很多程序都喜欢占用. 除了将占用程序杀掉, 还可以更换端口,如换到8080:

jekyll serve -P 8080

上面使用Jekyll的new命令建立了整套blog, 使用了一个默认的theme. 然而jekyll最本质应用是转换Markdown+Liquid到Html, 所以是几乎可以应用到任何静态html的编写的. 当然其强项还是写blog. 后面教程就说这个.

标准项目结构

.
├── _config.yml
├── _data #放yml数据文件, 可以在其他html/md中通过liquid语法引用其中的数据{% site.data.ymlfilename  %}
│   └── members.yml
├── _drafts #未发布的posts，不会显示。
│   ├── begin-with-the-crazy-ideas.md
│   └── on-simplicity-in-technology.md
├── _includes # 放html、md文件, 其中的文件可以在layouts、posts的html和md文件中通过liquid include语法引用并插入{% include 文件名.后缀 %}
│   ├── footer.html
│   └── header.html
├── _layouts # 放html文件, 可以在posts和其他md/html文件中通过liquid语法设置 layout: xxfilename
│   ├── default.html
│   └── post.html
├── _posts # 放md文件. 文件名格式需要是下面这种. 内容可使用liquid语法.
│   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass # 放scss文件. 其中的样式在html中通过link引用, 注意文件目录编译后是/assets/css/, 后缀是编译后的.css <link rel="stylesheet" href="/assets/css/filename.css">
│   ├── _base.scss
│   └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid front matter

关于theme

theme解压缩后，要运行一次bundle install, 然后运行服务bundle exec jekyll serve就可以了。

关于自定义数据

最好放在_data/somefile.yml中，而不是放在_config.yml中。因为前者不需要重启服务，而后者需要重启服务才生效。
如在_data\info.yml中：

root_path: \pd\

在md文件中可以用{{site.data.info.root_path}}引用。
在当前页面的前导部分定义的变量如var1,可以用{{page.var1}}访问。最妙的是，{{page.var1}}可以写在_includes里面如public.md,这样, {{page.var1}}就像本地定义的局部变量, 插入的{% include public.md %}中可以使用这些局部变量,就像是传递了实参一样. 而_data/中的数据就像是全局变量/常量一样.
jekyll可以尽可能的共用内容, 而不是像普通写文档一样大段的复制粘贴, 并且实时刷新,写起来非常有愉悦感.

Liquid

Liquid官方文档
表达式 {{ }}
语句 {% %}

逻辑运算

大多数和js一样，比较符号：

== != < > <= >= true false

逻辑运算不太一样，分别是and和or

字符串运算

不是通过函数，而是通过语句：
包含:

{% if product.tags contains "Hello" %}
  This product has been tagged with "Hello".
{% endif %}

赋值

注意字符串用双引号

{% assign my_variable = false %}

{% assign my_variable = "foo" %}

{% capture my_variable %}I am being captured.{% endcapture %}

条件转向

{% if customer.name == "kevin" %}
  Hey Kevin!
{% elsif customer.name == "anonymous" %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}


{% unless product.title == "Awesome Shoes" %}
  These shoes are not awesome.
{% endunless %}

{% assign handle = "cake" %}
{% case handle %}
  {% when "cake" %}
     This is a cake
  {% when "cookie" %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

循环

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

更复杂一些的，包括可以使用continue、limit、看官网对iteration的说明

安装