Hugoでwebサイト構築(11) タグ

written: kengo
tag:

(※2015/11/11 間違いの修正 ×tags.html -> ◯tag.html)

1. ブログにおけるタグをHugoでつくる

Hugoではブログ様のサイトを構築することができます。ブログでよく使われる機能であるタグも実装することができます。

2. タグの設定

2-1. インデックス処理の追加(config.toml)

config.tomlに[Indexes]という項目を作ります。その項目の下に「tag = “tags”」を追加してください。 Hugoは[Indexes]にある項目で値を持つ記事をピックアップして目次情報を作ってくれるようになります。

config.toml

MetadataFormat	= "toml"
BaseURL			= "http://wdkk.co.jp"
Title			= "渡辺電気株式会社"

[Indexes]
tag				= "tags"

この時、公式ページでは 「単数形 = “複数形”」のような定義にするようになっていますので、これに倣うことにします。

これで、パラメータにtagsをもつ記事をピックアップできるようになりました。

2-2. Front Matterの追加(各記事.md)

次に、各記事のFront Matterにtagsパラメータを追加します。 以下で、記事をためているpostフォルダ内にsample.mdという記事を作ることにします。

post/sample.md

+++
date		= "2015-10-30"
title		= "Hugoゴーゴー"
tags		= [ "hugo", "web" ]
author		= "kengo"
+++

~~記事の本文~~

タグを追加するには、tags = [ “タグ名1”, “タグ名2”, … ] と定義するようにします。 [ ]で包んだ値はTOMLにおける配列表記で、tagsの中に複数の値をもつことを示します。

上記の例ではhugowebの2つのタグを記事に付与しました。Hugoを走らせるとhugoタググループと webタググループに所属するよう処理してくれます。この段階では目には見えませんがデータは保持してくれています。

3. タグ用のリストの作成

3-1. インデックスリストのレイアウト

各タグの目次情報が集められると、同じタグの記事群をリストアップできるようになります。 layoutsフォルダ内にindexesフォルダを用意し、tag.htmlを作ります。ファイル名は単数形で動作します (tags.htmlではリストの生成に失敗しました)。


3-2. tag.htmlを作る

タグのインデックスを用いて自由にリストのレイアウトを作ることができます。 作り方はセクションのリストを作った時と同じ要領でPaginator機能を用いて作成できます。

/layouts/indexes/tag.html

{{ partial "site_head.html" . }}

{{ .Title }}

{{ range (.Paginator 10).Pages }} {{ .Render "list_tag" }} {{ end }} {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
{{ end }}
{{ partial "site_foot.html" . }}

comfig.tomlで[Indexes]にtagを定義しているため、indexesフォルダ内のtag.htmlを使って 自動的にリストが作られるようになります。リストの対象はFront Matterにtags = [ “タグ名” ]をもつ記事で、 タグごとにリストが作られます。

ページ上部にある{{ .Render (.Paginator 10).Pages }}が本体で該当するタグの記事を10件抜き出します。 抜き出したページをそれぞれlist_tag.htmlのレイアウトを使って記事を1つずつ書き出していきます(list_tag.htmlについては後述)

その後、記事を10件に絞っているので11件目以降を表示するためのページネータを作成しています。 見た目/書式をのぞき、.Paginator.Prev.URLで前ページ、**.Paginator.Next.URLで次ページとなるので これを利用して自由にデザインしてください。

次に1記事ごとをどのように出力するかを決めるlist_tag.htmlです。 このファイルはlayouts/_defaultフォルダ内におきます。

/layouts/_default/list_tag.html

{{ .Title }}
{{ .Summary }}

list_tag.htmlはHTMLの一部分にすぎないので1記事の表示部分に該当する内容のみです。 この例では記事冒頭部分のサマリを表示し、記事全文を読むにはタイトルのリンクを押す形をとります。 抽出した記事のタイトルは{{ .Title }}で取れます。リンクも同様に{{ .Permalink }}です。 記事冒頭部分は{{ .Summary }}で抜き出します。

全文を表示したい場合は{{ .Content }}を指定します。

3-3. 出力されるpublicの結果

上記でタグ機能とタグリストの実装は完了です。この状態ですとHugoはpublicに以下のようなフォルダを出力します。


tagsフォルダと、直下にタグ名ノフォルダが自動的に生成され、 その中にタグごとの記事サマリが10件ずつ出力されています。 ページネータで出力されたものはpageフォルダ内に連番で出力されていくようです。

References