ホームページテンプレート (Homepage Templates)

Hugo では、主となる３種類のテンプレートでサイトを構築します。これまで Paper というテーマを題材にテンプレートを見てきましたが Paper テーマでは使用されていなかったホームページテンプレートが最後の1つとなります。 これらのテンプレートは、すべてを使う必要は無く必要に応じて選択することになります。また、テンプレートには参照順が決まっておりそのルールに従って静的ページが生成されます。

Hugo には、ホームページテンプレート,リストテンプレート，シングルページテンプレート以外のテンプレートもあるので別途確認したいと思います。

ホームページテンプレート

トップページだけ他のページと違ったレイアウトで構成されるサイトを見かけることがありますが、そのようなサイトを作成する場合にホームページテンプレートを使用します。また、シングルページの Web サイトを構築する場合にもホームページテンプレートを利用することができます。

ホームページテンプレートは、コンテンツディレクトリの最上位にある _index.md を読み込んで生成することができます。例えば、コンテンツディレクトリが次のような場合 contents/_index.md が対象となります。

content/
  |- _index.md   <- ホームページテンプレートをで使用できる
  |- page_01.md
  |- page_02.md
  |- section01/
  |    |- _index.md
  |    |- page_0l_1.md
  |    |- page_01_2.md
  |- section02/
       |- _index.md
       |- page_02_1.md

ホームページテンプレートはトップページ用ということで少し特殊な感じを受けますが、特定のテンプレートファイルが適用されるのではなく、次のようなファイルの中から参照順に従って最初に見つかったテンプレートファイルが適用されます。

/layouts/index.html
/layouts/home.html 
/layouts/list.html 
/layouts/_default/index.html
/layouts/_default/home.html
/layouts/_default/list.html

Hugo のドキュメントでは、 layouts/index.html に次のテンプレートが説明されています。 content/_index.md の内容と最新記事10件のサマリーが出力されます。

{{ define "main" }}
    <main aria-role="main">
      <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
      </header>
      <div class="homepage-content">
        <!-- content/_index.mdの内容 -->
        {{.Content}}
      </div>
      <div>
        <!-- サイト内の最初から10ページ分のサマリー -->
        {{ range first 10 .Pages }}
            {{ .Render "summary"}}
        {{ end }}
      </div>
    </main>
{{ end }}