まえがき
私が、HugoのThemeを自作する時のルールを忘れないように、書いておきます。
過去に書いた記事を、一から書き直したリライト記事です。
使用環境
| Name | Version |
|---|---|
| Hugo | v0.152.2-extended |
| OS | Ubuntu 24.04.3 LTS |
Info
v0.146以降、New template systemが採用されました。
本題
layouts ディレクトリ
layouts ├── _partials ├── baseof.html ├── home.html ├── page.html └── section.html
Section
Sectionは、layouts/section.htmlを使用する。
セクション内
セクション内でレイアウトを変えたい場合は、layouts/section名/section.htmlを設置する。
| content | layouts |
|---|---|
| content/blog/_index.md | layouts/blog/section.html |
子セクション内
子セクション内でレイアウトを変えたい場合は、layouts/section名/子section名/section.htmlを設置する。
| content | layouts |
|---|---|
| content/blog/2025/_index.md | layouts/blog/2025/section.html |
個別
セクションの階層が深い場合などの状況で、個別にレイアウトを変えたい場合は、layouts/type名/{front matterのlayout欄}.htmlを設置する。
| content | layouts |
|---|---|
| content/blog/2025/12/_index.md | layouts/type/202512.html |
type: type layout: 202512
Page
Pageは、layouts/page.htmlを使用する。
セクション内
セクション内でレイアウトを変えたい場合は、layouts/section名/page.htmlを設置する。
| content | layouts |
|---|---|
| content/blog/20250101.md | layouts/blog/page.html |
個別
個別のPageは、layouts/page.{front matterのlayout欄}.htmlを設置する。
| content | layouts |
|---|---|
| content/about.md | layouts/page.about.html |
--- layout: about ---
あとがき
New template systemになって、シンプルになったようで、複雑になったような気がします。
以前は、pageディレクトリがありましたが、廃止されました。
about.html、about.page.html、page.about.html、いずれも使えました。
about.page.html > page.about.html > about.html の順でした。
