layouts/home.html

layouts/home.htmlの解説

$ cat themes/my-theme/layouts/home.html 
{{ define "main" }}
  {{ .Content }}
  {{ range site.RegularPages }}
    <section>
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
      {{ .Summary }}
    </section>
  {{ end }}
{{ end }}

このファイルは、Hugoのテーマにおけるホームページのレイアウトを定義するテンプレートです。

コードの構造と機能

{{ define "main" }}
  {{ .Content }}
  {{ range site.RegularPages }}
    <section>
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
      {{ .Summary }}
    </section>
  {{ end }}
{{ end }}

1. {{ define "main" }}

  • このテンプレートは"main"というブロックを定義しています
  • これは親テンプレート（_default/baseof.htmlなど）で{{ block "main" . }}{{ end }}と定義された部分に挿入されます

2. {{ .Content }}

  • ホームページのコンテンツを表示します
  • 通常、content/_index.mdファイルのマークダウンコンテンツがHTMLに変換されて表示されます

3. {{ range site.RegularPages }}

  • サイト内の通常ページ（記事やコンテンツページ）をループで処理します
  • site.RegularPagesはドラフトではない通常のコンテンツページのコレクションです

4. 各ページの表示

  • <section> タグ内に各ページの情報をまとめています
  • {{ .RelPermalink }}: ページの相対URLを取得します
  • {{ .LinkTitle }}: ページのタイトルを表示します（frontmatterの"linkTitle"があればそれを、なければ通常の"title"を使用）
  • {{ .Summary }}: ページの要約を表示します（frontmatterで"summary"が指定されるか、コンテンツの先頭部分）

動作概要

このテンプレートはホームページで以下を行います：

  1. まずホームページ自体のコンテンツを表示
  2. 次にサイト内の全ての通常ページを一覧表示
  3. 各ページにはタイトルへのリンクと要約が表示されます

これにより、ブログ型のウェブサイトやポートフォリオサイトなどで便利な「最近の投稿」や「全記事一覧」のような機能を実現できます。