こんにちは、tamaoki (@t0shiya) です。
今回は、静的サイトジェネレータ Hugo のレイアウトの決定方法とパーマリンクについて。
Hugo では、コンテンツ（Markdownファイル）のフォルダ階層や記述するフロントマターによって使用するレイアウトやパーマリンク（生成されるパス）を変更することができます。
標準構成では次のように content フォルダそのままの階層で HTML が生成されます。
※configファイルで uglyURLs というパラメータを true に変更すると [baseURL]/post/firstpost.html という構成にもできます。
.
└── content
├── post
| ├── firstpost.md // <- [baseURL]/post/firstpost/
| ├── happy
| | └── ness.md // <- [baseURL]/post/happy/ness/
| └── secondpost.md // <- [baseURL]/post/secondpost/
└── quote
├── first.md // <- [baseURL]/quote/first/
└── second.md // <- [baseURL]/quote/second/
以下はURLやレイアウトを決定するために使用するパラメータ、変数です。
| パラメータ | 説明 | フロント マター | 変数 |
|---|---|---|---|
| slug | URLのファイル名部分を変更するパラメータ。 | ◯ | |
| url | URLを変更するパラメータ。 baseURL からのパス全体を指定する。 | ◯ | |
| section | コンテンツが置かれたフォルダの１階層目。 リストページ生成やレイアウト決定に使用される。 content 直下の場合は空。 | × | .Section |
| type | section と同じ値だが、フロントマターで 上書き可能。 content 直下の場合は "page" が設定される。 | ◯ | .Type |
例えば、コンテンツ content/a/b/c.md の場合、各値は以下のようになります。
| permalink | [baseURL]/a/b/c/index.html |
|---|---|
| section | a |
| type | a |
このコンテンツのフロントマターに slug:“d” を追加すると生成されるファイルの位置が変わります。
---
// YAML形式のフロントマター
date: 2016-05-11
title: "サンプル"
slug: "d"
---
| slug | d |
|---|---|
| permalink | [baseURL]/a/b/d/index.html |
| section | a |
| type | a |
更にフロントマターで url: “x/y/z” を追加すると生成されるファイルの位置が変わります。slug と url を両方指定した場合は url が優先されます。
---
date: 2016-05-11
title: "サンプル"
slug: "d"
url: "x/y/z"
---
| slug | d |
|---|---|
| url | x/y/z |
| permalink | [baseURL]/x/y/z/index.html |
| section | a |
| type | a |
このコンテンツのフロントマターで type:“e” を指定してもファイルの位置は変わりませんが、後述する通りレイアウトの検索順が変わります。
---
date: 2016-05-11
title: "サンプル"
slug: "d"
url: "x/y/z"
type: "e"
---
| slug | d |
|---|---|
| url | x/y/z |
| permalink | [baseURL]/x/y/z/index.html |
| section | a |
| type | e |
Section / Type について
type と section は主にレイアウトの決定に使用され、Hugo では自動的に section 毎のリストページを生成します。
例えば、本エントリ先頭にあげたフォルダ構成でいうと、content 直下のフォルダ post と quote が SECTION にあたり、それぞれ [baseURL]/post/index.html [baseURL]/quote/index.html というリストページが生成されます。
この時、リストページに使用するレイアウトテンプレートは以下の順で検索されます。(SECTIONがセクション名です)
- /layouts/section/SECTION.html
- /layouts/_default/section.html
- /layouts/_default/list.html
- /themes/THEME/layouts/section/SECTION.html
- /themes/THEME/layouts/_default/section.html
- /themes/THEME/layouts/_default/list.html
同様に各エントリの個別ページも type（指定されていなければ section）によって使用するレイアウトテンプレートが決定されます。 (LAYOUT はフロントマターで指定する layout パラメータです)
- /layouts/TYPE-or-SECTION/LAYOUT.html
- /layouts/TYPE-or-SECTION/single.html
- /layouts/_default/single.html
- /themes/THEME/layouts/TYPE-or-SECTION/LAYOUT.html
- /themes/THEME/layouts/TYPE-or-SECTION/single.html
- /themes/THEME/layouts/_default/single.html
冒頭で述べたように Hugo では、コンテンツのフォルダ構成やパラメータによって生成される位置やレイアウトが変更されます。
コンテンツは目的毎に分類しておくのが良いでしょう。
feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。