Hugoで個別ページを作る

2021-07-02

やりたいこと

Hugo でブログを書いて,About やポートフォリオなどの特別なページを作りたい.
通常投稿のテンプレートではなく,独自のスタイルのテンプレートを利用したい.

やり方

目標は

p4ko.com/posts/通常投稿/
p4ko.com/posts/通常投稿2/
p4ko.com/プロダクト/                 👈特別なページ

ファイル構成は

/content/posts/通常投稿.md
/content/posts/通常投稿2.md
/content/プロダクト.md               👈追加ページ

/layouts/custom/product.html        👈独自テンプレート

プロダクト.mdの frontmatter に次を追加します(YAML の場合)

---
type: "custom"
layout: "product"
---

product.htmlにテンプレートを書きます. テーマの通常投稿のテンプレート(/themes/HOGE/layouts/_default/single.html)をコピーして弄るとよいと思います.
完全にベタ書きしたい場合は markdown の本文は空でもいいですし,もしくはテンプレート{{ .Content }}から本文を取ってきてもよいです.

あとがき

経緯

日本語の情報が無かったので書きました.
制作物まとめのページを以前から通常の投稿として置いていたのですが,もうちょっと見た目を良くしたかったので,追加テンプレートから生成するよう(というかほぼベタ書き)にしました.👇
⭐ 制作物まとめ ⭐ // ぴしめも

参考

Creating ‘static’ content that uses partials - support - HUGO
おわり