Hugoで記事毎のMarkdownファイルに定義したメタ情報をテンプレートで参照する方法
目次
スポンサードリンク
Hugo は、Markdown 形式で記述された原稿を元に、静的なホームページやブログサイトなどの HTML ファイルを生成するジェネレータです。
Markdown ファイルの先頭には、記事のメタ情報を定義することができます。以下はメタ情報の記述例です。記事の作成日時、タイトル、概要、カテゴリなどを記述できます。
+++
date = '2025-03-06T10:37:28+09:00'
draft = false
title = '【記事のタイトル】'
description = '【記事の概要】'
articleCategory = 'テクノロジー'
articleTags = ['Go', 'Hugo', '静的サイトジェネレータ']
+++
これらのメタ情報を Hugo のテンプレート内で参照したり、if 文などの条件分岐に利用する方法を説明します。
YAML形式でメタ情報を記述する場合は以下のようになります。
date: '2025-03-06T10:37:28+09:00'
draft: false
title: '【記事のタイトル】'
description: '【記事の概要】'
articleCategory: 'テクノロジー'
articleTags:
- 'Go'
- 'Hugo'
- '静的サイトジェネレータ'
テンプレートでメタ情報を参照する方法
テンプレート内でメタ情報を参照するには、二重中括弧 {{ }} を使用します。
基本的なメタデータ
記事のタイトル (title) や概要 (description) など、Hugo がデフォルトで認識しているメタデータは、ドット . に続けて項目名を指定することで取得できます。
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
なお、基本的なメタデータに含まれる情報は公式ドキュメントの「Front Matter」のセクションに記載されています。
https://gohugo.io/content-management/front-matter/
カスタムメタデータ
自分で定義したメタデータ（上記の例では category や tags）を参照する場合は、ドット . の後に Params を指定し、その後に定義した項目名を記述します。
{{ .Params.articleCategory }}
{{ range .Params.articleTags }}
<span class="tag">{{ . }}</span>
{{ end }}
上記の例では、{{ .Params.Category }} で category の値を取得し、{{ range .Params.Tags }} で tags に定義した複数のタグをループ処理しています。
メタ情報で条件分岐する方法
メタデータの内容に応じて HTML タグを出し分けたい場合は、if 文などの条件分岐を利用できます。以下の例では、category の値が “カテゴリA” であるかどうかで表示する内容を変えています。
{{ if eq .Params.Category "カテゴリA" }}
<span class="special-category">カテゴリA向けのHTMLタグ</span>
{{ else }}
<span>カテゴリA以外で表示するHTMLタグ</span>
{{ end }}
このように、Hugo のテンプレートエンジンを使用することで、Markdown ファイルに定義したメタデータを柔軟に活用したウェブサイトを構築することができます。