ページバンドルを理解する
Hugoのページバンドル機能で、コンテンツと関連ファイルを効率的に管理する方法を解説します。
ページバンドルとは
コンテンツと関連ファイル(画像、PDF等)をまとめて管理する仕組みです。
2種類のページバンドル
1. リーフバンドル(Leaf Bundle)
単一の記事とその関連ファイルをまとめる形式です。
content/posts/
my-article/ ← フォルダ名がURLになる
index.md ← 必ず index.md(重要!)
hero.jpg ← この記事専用の画像
document.pdf ← この記事専用のファイル
- URL:
/posts/my-article/ - 特徴:
index.mdを使う(アンダースコアなし) - 用途: 画像を多く含む記事、添付ファイルがある記事
- 子ページ: 持てない
2. ブランチバンドル(Branch Bundle)
**セクション(カテゴリページ等)**を定義する形式です。
content/tutorials/
_index.md ← アンダースコア付き(重要!)
getting-started.md ← 子ページ
installation.md ← 子ページ
- 特徴:
_index.mdを使う(アンダースコア付き) - 用途: セクションページ、一覧ページのカスタマイズ
- 子ページ: 持てる
比較表
| 項目 | リーフバンドル | ブランチバンドル |
|---|---|---|
| ファイル名 | index.md | _index.md |
| 目的 | 単一記事 | セクション/一覧 |
| 子ページ | ❌ 持てない | ✅ 持てる |
| リソース | 同フォルダ内のファイル | 同フォルダ内のファイル |
従来形式との比較
【従来形式】
content/posts/
my-article.md ← 単独ファイル
another-post.md
【ページバンドル形式】
content/posts/
my-article/
index.md ← フォルダにまとめる
image.jpg
ページバンドルのメリット
- 整理しやすい - 記事と画像が同じフォルダ
- 移動が簡単 - フォルダごと移動できる
- 画像処理が使える -
.Resourcesでアクセス可能 - 名前衝突を回避 - 記事ごとに同じファイル名が使える
リソースへのアクセス(テンプレート内)
{{/* 特定の画像を取得 */}}
{{ $image := .Resources.GetMatch "hero.jpg" }}
{{ with $image }}
<img src="{{ .RelPermalink }}" alt="Hero">
{{ end }}
{{/* すべての画像を取得 */}}
{{ range .Resources.ByType "image" }}
<img src="{{ .RelPermalink }}">
{{ end }}
{{/* パターンマッチで取得 */}}
{{ $photos := .Resources.Match "photos/*" }}
いつどちらを使う?
| ケース | 推奨 |
|---|---|
| 画像付きのブログ記事 | リーフバンドル(index.md) |
| シンプルなテキスト記事 | 従来形式(記事名.md) |
| カテゴリ/セクションページ | ブランチバンドル(_index.md) |
| チュートリアルシリーズ | ブランチバンドル + 子ページ |
まとめ
- リーフバンドル =
index.md= 単一記事 + 関連ファイル - ブランチバンドル =
_index.md= セクション + 子ページ - アンダースコアの有無で動作が変わる!