読者です 読者をやめる 読者になる 読者になる

Jekyll 2.0 の新機能を触ってみた

Jekyll 2.0 が正式リリースされたので触ってみた。特に気になった機能3つについてざっくりと。以下 2.0.2 で確認。

  1. Collections
  2. Sass/SCSS と CoffeeScript サポート
  3. 追加フィルター where/group_by

Collections

従来の postpage に加え、文書タイプをユーザが定義できるようになった。例として 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.ymloutput: 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 フィルター wheregroup_by

Liquid 出力タグ(Output tags)のフィルターとして wheregroup_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 をあまり使いこんでないので、もっといい使いどころがあったら教えてください。

参照 http://jekyllrb.com/docs/templates/