Jekyll 2.0 の新機能を触ってみた
Jekyll 2.0 が正式リリースされたので触ってみた。特に気になった機能3つについてざっくりと。以下 2.0.2 で確認。
- Collections
- Sass/SCSS と CoffeeScript サポート
- 追加フィルター
where
/group_by
Collections
従来の post
や page
に加え、文書タイプをユーザが定義できるようになった。例として clip
という文書を定義してみる。
_config.yml
collections: clip: output: true example: This is an example!!
_config.yml
で設定したデータは site.collections.clip
から、YAML front-matterの情報は従来通り page
から利用できる。
_clip/new-clip.md
--- title: 今日のクリップ date: 2014-05-07 20:00 --- ## {{ page.title }}({{ page.date }}) * [Jekyll turns 2.0.0](http://jekyllrb.com/news/2014/05/06/jekyll-turns-2-0-0/) * {{ site.collections.clip.example }}
関係するファイルの部分的なツリー。
jekyll_project ├── _clip │ └── new-clip.md └── _config.yml
この例では _config.yml
で output: true
と設定したので _site/clip/new-clip.html
として出力される。
output: false
(デフォルト)の場合、ページは生成されない。他のページの部品として使うことを想定しているのだろう。複数の著者がいるサイトで各著者の紹介文を Collection として作っておき、ポストのメタデータで対応させて取り込むようなケースなど。
なお Collections は実験的機能で、今後 API 変更の可能性があるそうなので注意。
参照 http://jekyllrb.com/docs/collections/
Sass/SCSS サポート
Sass/SCSS のビルドがサポートされた。例えば css/main.scss
というファイルを作ると jekyll build
の際に _site/css/main.css
に自動変換される。ただし *.scss
には空の YAML front-matter (ハイフン*3を2行)を入れる必要がある。
今のところ通常ディレクトリでは *.sass
(インデント記法で書けるもの)が CSS に レンダリングされない(そのままコピーされてしまう。後述の _sass/
配下では使える)。
css/main.scss
--- --- body { background: hsla(0, 50%, 50%, 1); }
これとは別に _sass/part.sass
を作成すると、さきほどの main.scss
からインポートできるようになる。こちらに ハイフンのヘッダを書くとエラーになる。
_sass/part.sass
p color: red
css/main.scss
--- --- @import "part" body { background: hsla(0, 50%, 50%, 1); }
_config.yml
で sass オプションを指定できる。 sass_dir
でインポート用のファイルを置くディレクトリ名を指定(デフォルトは _sass
)、style
で出力スタイル指定など。
sass: sass_dir: _your_sass_dir style: compressed
関係するファイルの部分的なツリー。
jekyll_project ├── _sass │ └── part.sass └── css └── main.scss
参照 http://jekyllrb.com/docs/assets/
CoffeeScript サポート
CoffeeScript のビルドもサポートされた。こちらもハイフンのヘッダを入れる必要がある。
js/main.coffee
--- --- main = -> console.log 'ready.' main()
Liquid フィルター where
と group_by
Liquid 出力タグ(Output tags)のフィルターとして where
と group_by
が追加された。site
を Root とするツリーオブジェクトのメンバーをフィルタするもの。
まず where
から。例えば {{ site.posts | where:"author":"cu39" }}
とすると、YAML front-matter に author: cu39
と書いてあるポストだけを抽出できる。
ただしこの例は Jekyll::Post オブジェクトの配列が返ってくることになる。これを自前のフィルタでさらに加工する。
_plugins/my_filter.rb
module Jekyll module MyFilter def list_titles(posts) posts.map do |post| %(<li><a href="#{post.url}">#{post.title}</a></li>\n) end end end end Liquid::Template.register_filter(Jekyll::MyFilter)
そして、特定の著者の記事だけを並べるページ cu39.html
を用意したりして
<h3>cu39 が書いた記事</h3> <ul> {{ site.posts | where:"author":"cu39" | list_titles }} </ul>
みたいな使い方ができそう。
group_by
のほうは、{{ site.posts | group_by:"author" }}
とすると以下のような構造が返ってくる。
[ { "author" => "cu39", "items" => [...] }, { "author" => "someone", "items" => [...] } ]
こちらは1枚のページに著者ごとにポストを並べるような用途に使えそう。
Liquid をあまり使いこんでないので、もっといい使いどころがあったら教えてください。