Hugoでwebサイト構築(2) サイト全体の設定'config.toml'

written: kengo
tag:

1. サイト全体の設定項目を記述する

今回からHugoでのサイト構築にあたって具体的な機能について1つずつあたっていきます。 はじめは、サイト全体通して用いるパラメータを記述するconfig.toml(あるいはyaml,json)についてです。 config.tomlは、Hugoサイトのルートフォルダ直下に置きます。

太字の位置です。

1-1. config.tomlの記述例

中身には以下のような記述を行います。

BaseURL = "http://example.com"
Title = "Hugo Example Site"

[Params]
site_name_jp = "てすとサイト"
author = "Taro Yamada"
description = "Welcome!"

1-2. 必須項目の設定

Hugo0.14の時点で、 BaseURLTitleが必須項目です。 これらがconfig.tomlから抜けていた場合、ビルド時にメッセージが出ます。

BaseURLの値を場合、layoutsのHTML内で以下の記述を入れます。

{{ .Site.BaseURL }}

1-1の例では “http://example.com" が挿入されます。

また、同様にTitleも

{{ .Site.Title }}

上記の記述でアクセスできます。1-1の例では”Hugo Example Site”が入ります。

1-3. 任意のパラメータの設定

config.tomlではサイト全体で用いる自由なパラメータを設定できます。[Params]の後に

を入れます。これらの任意のパラメータにアクセスするためには、

{{ .Site.Params.パラメータ名 }}

以上のように、Paramsを明示して用います。 1-1の例のパラメータを用いる場合、

{{ .Site.Params.site_name_jp }}	// "てすとサイト"が入る
{{ .Site.Params.author }}  		// "Taro Yamada"が入る
{{ .Site.Params.description }}	// "Welcome!"が入る

上記のように指定します。もし存在しないパラメータを指定した場合、ビルド時にエラーを出力します。

任意のパラメータ名には小文字を使う

config.tomlの任意のパラメータ名は、小文字で統一することをお勧めします。 Hugoのマニュアル“All Params are only accessible using all lowercase characters.”とあるため、 仮に大文字を指定した場合でも、アクセス時にはすべて小文字になります。混乱を避けるためにも、 小文字でのパラメータ設定を推奨します。

2. layoutのHTML内でパラメータを使った利用例

config.tomlの値を用いる例として、サイトのヘッダ部分に使った場合を示します。

layouts/partials/site_header.html

<!DOCTYPE html>
<html>
<head>
	
	{{ .Site.Title }}
	
	
</head>
<body>
	
Hugo Sample Site
...

上記のHTML内に記述されたパラメータは、Hugoのビルド時にconfig.tomlに定義した値が挿入されます。

References