Skip to main content
View on GitHub

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

多くの場合、Web サイトのホームページは、他のページとは異なる形式になっています。 このため、Hugo では、新しいサイトのホームページを独自のテンプレートとして簡単に定義できます。

On this page

ホームページは Page なので、すべての ページ変数 と サイト変数 を使用できます。

ホームページ テンプレートの検索順序

テンプレートの検索順序 を参照してください。

ホームページにコンテンツとフロントマターを追加する

ホームページは、他の Hugo のリストページ と同様に、_index.md ファイルからコンテンツとフロントマターを受け取ります。 このファイルは、content フォルダーのルート (つまり、content/_index.md) にある必要があります。 その後、他のコンテンツファイルと同様に、ボディコピーとメタデータをホームページに追加できます。

リストページにコンテンツやフロントマターを追加する際の _index.md の役割については、下記のホームページ テンプレートか、コンテンツ構成 を参照してください。

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

以下は、パーシャル , ベース テンプレートと content/_index.md のコンテンツファイルを使って、 {{ .Title }} と {{ .Content }} ページ変数 に値を設定したホームページ テンプレートの例です。

layouts/index.html
{{ 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">
      <!-- Index.html のコンテンツは、一種のリスト ページとして、content/_index.md から取得されることに注意してください -->
      {{ .Content }}
    </div>
    <div>
      {{ range first 10 .Site.RegularPages }}
          {{ .Render "summary" }}
      {{ end }}
    </div>
  </main>
{{ end }}