本サイトではアフィリエイト広告を利用しています
YAML array

Jekyll コード

YMAL のハッシュで Liquid から取り扱うコツ

2021年7月9日

最近は、テキストをmarkdownで記述することが多くなりました。
テキストが貯まってきたら、HTMLにしてみたくなる、適当な CMS を使うということになります。

CMS はお好きなものを使えばいいのですが、ここでは定番の Jekyll でやります。
Jekyll と Liquid でマークダウンを html 化できますが、さらに欲が出てきて、yml ファイルには配列を書いておき、それを markdown から liquid タグを使ってアクセスしたくなることがあります。

YAML で配列はどう作る

普通の配列はどうやる？

YAML で配列を書くときは次のようにします

 yaml
men:
- xman
- ywoman

行頭にマイナス記号をつけるだけです。
上の例では["xman", "ywoman"]という中身になります。

liquidで配列の値を引っ張ってくるには

上の配列を、Jekyllの_config.ymlに書き込んでおけば、

{{site.xman[0]}}

と記載することで、「xman」という値を引っ張ってこれます。

{{site.xman[1]}} とやれば「ywoman」という値になります。

順次処理したいなら、

 yaml
{% for v in site.men %}
  value = {{ v }}
{% endfor %}

とやります。

ハッシュ配列はどうやる？

 yaml
men:
 x: man
 y: woman

と書くと、中身は
{"men" => {"x" => "man", "y" => "woman"}} になります。
Jekyll の中、ruby plugin からは site.config['men']['x'] ととやると値を拾えます。

liquidでハッシュ値を引っ張ってくるには

上の例で「woman」という値を拾ってきたいなら、
{{ site.men.y }} とやればできます。

すべての値を拾うときは、

 yaml
{% for v in site.men %}
  key = {{ v[0] }}, value = {{ v[1] }}
{% endfor %}

と記載してやると、

 yaml
key x, value = man
key y, value = woman

と表示されます。

_dataの配列にはどうアクスする

今まで書いてきた程度の配列アクセスは、さほど困らないと思います。
問題は、Jekyll 使いがよくやる_dataフェルダ以下に置いた.yml ファイルから配列をとってくるときです。
このファイルに書き込んだ配列、よくアクセスの仕方を間違えて気づかずに作業し続けていることがあります。

例として、_data/menu.ymlというファイルに以下のような配列を書き込んだ場合の処理を考えます。

 yaml
navs:
  - href: /
    label: Home
  - href: /vaccines
    label: Vaccines

_dataの配列にはどうアクスする

まず、手始めに上の配列の１つ目/にアクセスするためには、

{{ site.data.menu.navs[0].href }]

とやります。出力は/になります。

次の「Home」を値として得たい場合は、
{{ site.data.menu.navs[0].label }]
と書きます。

出力はHomeになります。

_dataの配列を連続で回すには

一つ一つ、別個にアクセスすることより、連続して値を取り出したいことが多いと思います。
その場合は以下のようにします。

 yaml
{% for v in site.data.menu.navs %}
	key = {{ v.href }}, value = {{ v.label }}
{% endfor %}

これで、

key = /, value = Home key = /vaccines, value = Vaccines

と取り出せます。よくサイトのメニュー作成やパンくずリストに使うコードのコア部分ですね。

配列の中にハッシュを入れる

 yaml
cards:
  - card-image: "top.jpg"
    card-title: "タイトル"
    card-text:  "テキスト"
  - card-image: "first.jpg"
    card-title: "一番目？"
    card-text:  "まずはテキスト"
  - card-image: "second.png"
    card-title: "二番目タイトル"
    card-text:  "二番目テキスト"

この例は、cards配列の中にハッシュを入れた例です。
おそらく一番応用しやすい形だと思います。
Jekyllで使う場合は、コンテンツのヘッダー部分に上のコードを書いておきます。

上の例でcardsの配列にLiquidからアクセスするには

 yaml
{% for cd in page.cards %}
<h4> {{ cd.card-title }}</h4>
<figure class="align-center">
	<img src="{{ cd.card-image }}" alt="">
</figure>
{{ cd.card-text }}
{% endfor %}

普通にforで回しただけのサンプルですが、キーでアクセスできるので使いやすいですね。

私としては頻繁に Liquid を使うわけでもないので、時間とともに忘却することが確実なので、メモとして残しておきます。

-Jekyll, コード
-,