Hugoでwebサイト構築(12) タグの列挙

written: kengo
tag:

1. サイト内にはどんなタグがあるのか

前回、記事にタグをつける方法を紹介しました。今回はサイト内に存在するタグに どんなものがあるのかを列挙する方法を説明します。

2. タグの設定(前回と同じ内容)

タグを用意する各種設定は前回のものをそのまま使いまわします。概略は以下の通りです。前回の作業が終わっている方は 読み飛ばしていただいて問題ありません。まずはconfig.tomlです。

config.toml

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

[Indexes]
tag				= "tags"

次にサンプル記事としてFront matterには”hugo”と”web”の二つのタグを用意します。

post/sample.md

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

...

3. タグを列挙する

ブログなどではタグを左右のメニューバーの中にズラリと列挙しています。 今回はそれに倣ってサイドメニュー用のpartialにタグを列挙するコードを示します。

layouts/partials/sidemenu.html

タグ一覧

$.Site.Taxonomies.tagsがサイト内に存在するタグのリストを持っています。 これをrange処理で繰り返し1つずつ抽出し、リストを作り上げていきます。 range処理で得られた値を$nameに代入しながら処理していきます。 $nameにはタグ名そのものが入ります。今回の場合、”hugo”タグと”web”タグがありますから、 rangeは2回繰り返し処理を行って、”hugo”と”web”という値を$nameの中に入れてくれます。 この文字列を{{ $name }}を用いて、画面に表示するようにしています。

さらにこの文字列に対して{{ $.Site.BaseURL }}/tags/{{ $name }}/へのリンクをつければ、 前回紹介したタグ一覧へ飛ぶリストが出来上がります。

余談ですが、.Countはそのタグが使われた記事の数が取れます。記事の数を出したい時に便利です。

References