静的サイトジェネレータHugoを使ったサイト構築(リスト編)

こんにちは、tamaoki (@t0shiya) です。

今回は、静的サイトジェネレータ Hugo のリストページと並び順について。

リストページ

レイアウト編1でご紹介したように Hugo では Homepage や List テンプレートで全コンテンツや任意の section/type、taxonomy のリストページを作ることができます。

例えば、Homepage (サイトのトップページ) では .Data.Pages という変数にすべてのコンテンツの情報が格納されています。これを表示するにはテンプレートで range を使用して以下のように記述します。

{{ range .Data.Pages }}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>
{{ end }}

range から end がループで、その間はループの現在値(ページの値)に . で直接アクセスできます。

section のリストページでは .Data.Pages に該当する section のコンテンツのみが格納されます。section のリストページとしてどのレイアウトが使用されるかはレイアウト編3を参照ください。

並び順

Hugo はデフォルト(前述の例)でコンテンツのソートに weightdate という2つのパラメータを使用します。
どちらもフロントマターで指定します。必須ではありません。

まず weight でソートして、その後 date の新しいものから順に並べます。 weight は値が大きいほど後ろに追加(日付が古い方)へ追加されます。weight が指定されていない場合は weight=0 と同じです。weightdate のどちらも指定されていない場合は、順序は保証されません。

コンテンツの並び順を変更したい場合は、コンテンツ格納している配列(.Data.Pages)に並び順を指定することでソートします。

weight -> date (デフォルト)

{{ range .Data.Pages }}
{{ end }}

dateのみ(weightを無視する)

{{ range .Data.Pages.ByDate }}
{{ end }}

title

{{ range .Data.Pages.ByPublishDate }}
{{ end }}

他にも .ByPublishDate, .ByLastMod, .ByLength, .ByLinkTitle, .Reverse 等が利用できます。

グルーピング

並び順だけではなく、date や任意のページ変数、ページパラメータ等でコンテンツをグルーピングすることもできます。

date

年月でグルーピングする場合

{{ range .Data.Pages.GroupByDate "2006-01" }}
{{ end }}

年月日でグルーピングする場合

{{ range .Data.Pages.GroupByDate "2006-01-02" }}
{{ end }}

ページ変数

sectionの部分が変数名です。

{{ range .Data.Pages.GroupBy "Section" }}
{{ end }}

ページパラメータ

{{ range .Data.Pages.GroupByParam "param_key" }}
{{ end }}

フィルタリング

件数を制限したり、特定の条件で絞り込むこともできます。

件数制限

{{ range first 10 .Data.Pages }}
{{ end }}

絞り込み

{{ range where .Data.Pages "Section" "post" }}
{{ end }}

組み合わせ

{{ range first 5 (where .Data.Pages "Section" "post") }}
{{ end }}

range の扱いは難しいところもありますが、他にも細かな設定が可能ですので是非お試しください。

http://gohugo.io/templates/list/


feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。

このエントリーをはてなブックマークに追加