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的说明