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