layouts/baseof.html

2026/02/01 09:44

Hugo のlayouts/baseof.html について

この baseof.html ファイルは Hugo テーマの基本的なレイアウト構造を定義しています。これはサイト全体の「骨組み」として機能し、他のテンプレートファイルがこれを拡張して使用します。

$ cat themes/my-theme/layouts/baseof.html 
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <header>
    {{ partial "header.html" . }}
  </header>
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>

ファイルの構成

DOCTYPE と HTML 宣言:
```
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
```
- site.Language.LanguageCode: サイトの言語コード（例: “en”, “ja”）を取得
- site.Language.LanguageDirection: 文字の表示方向（左から右 “ltr” または右から左 “rtl”）を取得。設定されていない場合は “ltr” がデフォルト
ヘッド部分:
```
<head>
  {{ partial "head.html" . }}
</head>
```
- partial "head.html" .: layouts/partials/head.html を読み込み（メタタグ、タイトル、CSSなどを含む）

ボディ部分:

ヘッダー:

<header>
  {{ partial "header.html" . }}
</header>

メインコンテンツ:
```
<main>
  {{ block "main" . }}{{ end }}
</main>
```
これが各ページタイプのテンプレートで上書きされる部分

フッター:

<footer>
  {{ partial "footer.html" . }}
</footer>

重要な点

ブロック機能: {{ block "main" . }}{{ end }} は各ページテンプレートで上書きされるコンテンツ領域を定義しています
パーシャル: {{ partial "name.html" . }} はコード再利用のためのパーシャルテンプレート機能
コンテキストの受け渡し: . はコンテキスト（ページやサイトの情報）を渡すためのドット

個別のテンプレート（single.html, list.html など）は、この baseof.html を継承して main ブロックの中身だけを定義することで、サイト全体の一貫したデザインを保ちつつページごとの内容を変えることができます。