jekyll中自定义custom_css属性
有如下 jekyll layout 模板：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>{{ page.title }} | {{ site.title }}</title> <meta name="author" content="{{ site.author }}" />{% if page.description %} <meta name="description" content="{{ page.description }}" />{% endif %} {{page.custom_css}} {% if page.jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>{% endif %} </head> <body> {{ content }} </body> </html>
此时需要将 page 中的自定义样式通过 page.custom_css 传递到 layout 中，如果是link css只需在page YAML头中定义：
--- layout: demo title: DEMO列表 custom_css: <link href="hehe.css" type="text/css" /> ---
YAML头中定义内容块变量
如果custom_css为一个大段 <style>...</style> 页内样式，按照YAML规范则应该写成
--- layout: demo title: DEMO列表 custom_css: | <style> body{line-height:1.8;font-size:14px;} .description{color:#666;font-size:12px;} </style> ---
需要注意的是：
- | 分隔符前面有一个空格，按照规范所有:符号声明后必须有一个空格；
- 新起一行的代码块，至少必须有一个缩进符，且缩进符为空格，不能为tab制表符等其他空白
尤其是以上第二点，建议各位为了项目与规范需要，开启各自编辑器的tab键转空格输出的功能，sublime text2参考这里，npp参考这里。
YAML头定义的几种方式
YAML头用于定义文档的全局变量给模板引用，除上文提到的内容块定义以外，最常见的还包括序列与映射的定义，可以理解成JS中的数组和对象。由于YAML规范的制定参考了JSON规范，所以在定义最小变量单元的时候可以直接使用JS中数组和对象的字面量定义方法，如下所示：
--- layout: demo title: YAML头定义的几种方法 custom_css: | 这里是块内容的定义 可以是多行文本 custom_prop1: {a: 1, b: 2} custom_prop2: [1, 2, 3] custom_prop3: a: 1 b: 2 custom_prop4: #序列的 - 分隔符，类似JS数组的逗号分隔符 - 1 - 2 - 3 --- {{page.custom_prop1.a}} <!-- 输出 1 --> {{page.custom_prop2[0]}} <!-- 输出 1 --> {{page.custom_prop3}} <!-- 输出 {"a"=>1, "b"=>2} --> {{page.custom_prop4}} <!-- 输出数组项 123 -->
由于规范没有要求使用严格的JSON定义方法，所以属性和属性值不强制要求使用引号括起来。
参考资料
- http://www.yaml.org/spec/1.2/spec.html#id2759963
- http://stackoverflow.com/questions/6734955/jekyll-liquid-how-to-add-large-blocks-of-text-to-yaml-front-matter
