Liquidタグ(Jekyll, Octopress)でYAMLのハッシュを取り扱う方法

OctopressではYAMLで書かれた_confit.ymlや 各ページの上部に書いておくYAMLブロックの要素を参照して ページに色々と代入することが出来ます。

この時に Liquid タグを使いますが、この中ではそれほど複雑なことは出来ないんですが、 ハッシュの配列みたいな物も渡せることが出来たのでそのメモ。

• YAML
• Liquidで値を取る方法
• あとがき

YAML

YAMLは構造化されたデータの記法の一つですが、 Markdownのように読みやすさと下記やすさを充填に作られています。

YAMLで-を前につけると配列になります。

1
2

- a
- b

なら["a", "b"]に。

また、a: 1みたいにすればaがキー、1を値のハッシュを作れます。

1

a: 1

なら{"a" => "1"}に。

また、インデントすると配列やハッシュのまとまりとして認識されます。

組み合わせて

1
2
3

a:
  b: 2
  c: 3

みたいにすると {"a" => {"b" => "2", "c" => "3"}} になります。

よく使うのはこの形で、 Rubyで作るプラグインの中ではsite.config['a']['b]みたいに 値を取ってこれます。

Liquidで値を取る方法

Octopress/Jekyllではsiteという変数に_config.ymlの設定、 pageにページ上部に書いてるYAMLブロックにある設定が入ってます。

1

a: 1

の値を取ってきたければ

1

{{site.a}}

としておけば1が表示されます。

ここでハッシュの入れ子になっているような場合、取ってくる方法はないと思ってましたが、 実は単に

1
2
3

a:
  b: 2
  c: 3

なら

1

{{site.a.b}}

としておけば2が表示されます。

一方、配列を扱うとき、a[0]みたいな他の言語の様なアクセスが出来ます。

1
2
3

a:
  - b
  - c

なら

1

{{site.a[0]}}

でbが出ます。

また、配列はforで回すことが出来て、

1
2
3

{% for x in site.a %}
  value = {{ x }}
{% endfor %}

とすれば

value = b

value = c

みたいなアウトプットになります。

ここで、ハッシュに関して 中にある全てのキーと値を両方表示させたい様な場合、

1
2
3

a:
  b: 2
  c: 3

1
2
3

{% for x in site.a %}
  key = {{ x[0] }}, value = {{ x[1] }}
{% endfor %}

で、

key b, value = 2

key c, value = 3

とすることが出来ます。

ハッシュに関して、[key, value]みたいな配列として捉えて 0番目と1番目でアクセス出来る、ということ。

あとがき

Liquidタグだと簡単なアクセスしか出来ないので 配列のネストしたものとかはアクセス出来ないと思ってたんですが 実は簡単に出来ました。

もともと、ちょっと探した時に下のページを見つけました。

jekyll - Iterate over hashes in liquid templates - Stack Overflow

ここでは、

1
2
3

a:
  - b: 2
  - c: 3

という形の物を取ってきたい、と言うことで、正解は

1
2
3
4
5

{% for x in site.a %}
  {% for y in x %}
    key = {{ y[0] }}, value = {{ y[1] }}
  {% endfor %}
{% endfor %}

と、2重でfor文を回す形になります。

これは上のYAMLだと {"a" => [{"b" => "2"}, {"c" => "3"}]}という形になるからで、 最初のループは配列関して回し、 2回目は各(要素が一つの)ハッシュの中を回す事になります。

ただ、もう一つの正解が上のページの下に書いてある方で、 上に書いてあることですが、YAMLの方を

1
2
3

a:
  b: 2
  c: 3

と、下の-を外してあげれれば [ {"a" => {"b" => "2", "c" => "3"}}という形になるからで、 aは2つの要素を持つハッシュ一つを持つことになって、 ループを一つ回せば両方にアクセス出来ます。

ちなみに配列のネストは

1
2
3
4
5
6

a:
  - b: 2
  - c: 3
  -
    - d: 4
    - e: 5

みたいにすると {"a" => [{"b" => "2"}, {"c" => "3"}, [{"d" => "4"}, {"e" => "5"}]]} となります。

配列の途中でネストするには一度-を一つ置いてインデントして続けます。 cの下に直接インデントして書いてしまうとcの値の一部として3と一緒に3 - d:4 -e:5みたいな値になってしまいます。

このような配列のネストは ちなみにsgte.a[2][0]みたいなアクセスも出来ました。

なので配列もハッシュもネストしてアクセスすることは可能です。 for文と組み合わせれば色々アクセスできます。

YAMLについてあまり知らないまま使ってましたが、 -での配列、:がハッシュを作る、インデントがまとまりを作る、 この辺りを結構曖昧につかっていたな、と。

Rubyist Magazine - プログラマーのための YAML 入門 (初級編)

ここを参考にさせてもらいましたが、全然良くわかってなかったなという感じ。

一方、Liquidに関してはそもそもドキュメントが余り無いな、という感じで、

Liquid for Designers · Shopify/liquid Wiki

この辺とか見ても上の.をネストできることや[0]みたいなアクセスが 出来ることは書いてません。

[0]は今回上のStackOverflowのページで初めて見ました。 .のネストは今回色々いじってて出来るか？と思ったら出来た、というもの。

ハッシュを回してキーと値の両方を取れる、ということが出来ると 大分色々やれることが増えるので、Octopressもちょこちょこ便利に出来るかもしれません。

取り敢えず、このブログの上部にあるArhives とかのリンクに関して、_config.ymlで、

1
2
3
4
5
6

nav_links:
  /blog/archives/ : Archives
  /share-checker.html/ : Share Checker
  /windows/ : Windows
  /mac/ : Mac
  /en/ : English Blog

と書いておいて、source/_includes/navigation.htmlに

1
2
3
4
5
6
7

{% if site.nav_links.size %}
<p class="nav-links">
  {% for link in site.nav_links %}
    <span><a href="{{ link[0] }}" class="link_btn" >{{ link[1] }}</a></span>
  {% endfor %}
</p>
{% endif %}

とすれば、

1
2
3
4
5
6
7
8
9
10
11
12
13

<p class="nav-links">

    <span><a href="/blog/archives/" class="link_btn" >Archives</a></span>

    <span><a href="/share-checker.html/" class="link_btn" >Share Checker</a></span>

    <span><a href="/windows/" class="link_btn" >Windows</a></span>

    <span><a href="/mac/" class="link_btn" >Mac</a></span>

    <span><a href="/en/" class="link_btn" >English Blog</a></span>

</p>

と出来る様になりました。

この方が簡単に足したり消したりできるのでだいぶ便利かな、と思います。