Hugoで構成ファイル(config.yml)に設定された情報を参照する方法

Hugoで構成ファイル(config.yml)に設定された情報を参照する方法を説明します。

構成ファイルの基本

Hugoサイトの一般設定はルートディレクトリに置き、次の構成ファイルのいずれかを使用する。ファイルが複数ある場合は、最初に見つかった内容が選択される。

ファイル名 説明
config.toml TOML形式で記述(デフォルト)
config.yaml YAML形式で記述
config.json JSON形式で記述

config.tomlの記述例

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "私のブログ"
themesDir = "../hugo_themes"
theme = "devkuma"

設定可能なパラメータやそれぞれのデフォルト値は、以下に一覧がある。

Configure Hugo | Hugo

設定値の参照

Hugoが定義したパラメータを参照する

構成ファイルで設定したパラメータは、テンプレートファイル内で.Site変数を使って参照できる。たとえば、config.tomlファイルで設定したtitleパラメータやbaseURLの値は次のように参照できる。

このサイトのタイトルは <b>{{ $.Site.Title }}</b> です。
このサイトの基本URLは <b>{{ $.Site.BaseURL }}</b> です。

パラメータ名の先頭は大文字になり、.Site.titleではなく.Site.Titleとなる。それぞれの設定値をどのプロパティ名で参照できるかは、下のSite変数一覧を見ると分かる。

Site Variables | Hugo

パラメータが設定されているかどうかによって処理を分岐させるには、次のように記述する。

{{ with $.Site.GoogleAnalytics }}
  Google AnalyticsのTracking IDは <b>{{ . }}</b> です。
{{ else }}
  Google AnalyticsのTracking IDは設定されていません。
{{ end }}

上の例ではgoogleAnalyticsパラメータを使い、Google Analyticsの追跡IDが設定されているかを確認している。

ユーザー定義パラメータを参照する

構成ファイルでユーザー定義パラメータを設定するには、paramsセクションの下にパラメータを追加する。

config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "私のブログ"

[params]
  GitHubUser = "redfreek2c"
  Twitter = "kimkc"
  Subtitle = "技術共有"
  Description = "ここではサイト詳細情報を記録する"
  SidebarRecentLimit = 5
  ListOfFoo = ["foo1", "foo2"]

ユーザー定義パラメータは、テンプレートファイル内から$.Site.Params.名前の形式で参照できる。

次の例では、ユーザー定義パラメータ変数のDescription値を参照する。
layouts/partials/head.html

<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.description }}{{ else }}{{ .Description }}{{ end }}" />

ここでは、メインの最初のページ(ホームページ)では構成ファイルの設定($.Site.Params.Description)を参照し、それ以外のページでは各ページのFront matterに設定されたdescriptionの値を参照するようになっている。