Hugoでwebサイト構築(8) Sectionのリスト

written: kengo
tag:

1. Sectionのリストをつくる

Hugoではリストを自動的に作る機能があります。前回紹介したセクション単位でリストを作ることができるので、これを例にリスト作成を行ってみます。

まず前回の例を参考に、以下のようなフォルダ構成を想定します。



content内の「Food」と「Photo」は前回同様の構成ですが、layoutsに新しい要素を追加しています(太字)。

2. layouts/sectionのレイアウトファイル

layoutsフォルダ内に「Section」フォルダを作ると、その中にあるファイルがセクションでつくられるリスト用のレイアウトを作ることができます。Foodセクションのリストに使うレイアウトであればFood.html、Photoセクションのリストに使うレイアウトであればPhoto.htmlとすれば、Hugoでサイトをビルドしたとき、自動的にこれらのレイアウトが適用されたリストが作られます。

セクションリストのレイアウトのシンプルな例を以下に示します。

layouts/section/Food.html

{{ partial "site_header.html" . }}

    {{ range (.Paginator 10).Pages }} {{ .Render "list" }} {{ end }}
{{ partial "site_footer.html" . }}

ここでのポイントは{{ range … }}から{{ end }}までの部分となります。

2-1. range文

rangeは{{ range ~~~ }}の~~~で指定された内容物(複数)を1つずつ順に繰り返して処理をしていく文法です。この記述をGo Templateといいます(rangeを含めた文法の詳しい使い方はまた別記事で紹介したいと思います)。今回は簡単のため、range文は指定されたものを1つずつ繰り返して処理する、とご理解ください。

今回の例では (.Paginator 10).Pagesという内容に含まれる項目を順に処理していくことになります。次に.Paginatorと.Pagesの説明です。

2-2. .Paginatorと件数設定

.Paginatorはリスト処理の時のみ使用できる値で、リストに含まれるべき記事を自動で管理してくれます。今回の場合、各セクションに含まれる記事が対象となります。Food.htmlであれば、—.mdと###.mdの内容が.Paginatorに管理されます。

今回この.Paginatorに10をつけていますが、これは全リスト対象から最大10件までを抽出するという命令です。

	{{ range (.Paginator 10).Pages }}
		...1件ずつ行う処理...
	{{ end }}

例ではFoodセクション、Photoセクション共に2件しか記事がありませんので10の指定は機能しませんが、もっと記事が増えた時リスト1ページあたりに表示する件数を制御できます。何も指定しなければ全件が処理対象になります。

.Paginator自体はさらにいろいろな使い方ができますが、今回はリスト対象の件数抽出する紹介にとどめておきます。

2-3. .Pagesとページの内容

(.Paginator 10)で10件以内に絞られた内容からPage情報群を取得するのが.Pagesです。今回は10件ですので.Pagesには10件以下のPage情報が入ることになります。 .Pagesが複数の記事情報をもつので、2-1のrange文で記事情報を1件ずつ分解して処理していくことになります。

2-4. .Renderと”list”

.RengerはPage情報の処理命令の1つで「この見た目で表示します」という指示です。見た目の指定はlayouts/_default以下に配置したレイアウトHTMLを用います。layouts/_default/list.htmlを用いるので.Renderの指定は“list”とします。

	{{ .Render "list" }}

次に指定したlist.htmlにPageデータ1件ごとに表示したいHTMLレイアウトを書きます。

layouts/_default/list.html

  • {{ .Title }}
    {{ .Summary }}
  • list.htmlにある.Permalink, .Title, .SummaryはいずれもPage情報がもつパラメータです。これをlist.html側に記述しておき.Renderで用いると、各Pageのパラメータが内挿されて出力されます。なお主なパラメータ情報を以下で紹介します。

    .Dateを使う場合{{ .Data.Format … }}を指定して用いるのが良いと思います。

    2-5. リストの出力先

    セクションで作られるリストには記事を用意する必要はありません。 セクションが作られる段階で決まった場所にリストが出力される形になります。今回の例では以下に示す場所に出力されます。



    原則的にpublic内各セクションフォルダの直下のindex.htmlに出力されます。

    .Paginatorで指定された記事数より記事が増えた場合、pageフォルダ内にリストの各ページが生成されます。.Paginatorの説明を取り扱うときにあらためて紹介できればと思います。

    3. まとめ

    2の各項の内容をまとめます。

    以上になります。

    References