コンテンツビューテンプレート

Hugo は、コンテンツの代替ビューをレンダリングできます。これは、リストビューとサマリービューで特に役立ちます。

On this page

これらの代替 コンテンツビュー は、リストテンプレートで特に役立ちます。

コンテンツビューの一般的な使用例としては、以下のようなものがあります。

あらゆる種類のコンテンツをホームページに表示したいが、サマリービューの表示を制限したい。
タクソノミーリストページには、コンテンツの箇条書きのリストだけを表示したいですよね。ビューは、異なるタイプのコンテンツのレンダリングをコンテンツ自体に委ねることで、これを非常に簡単にします。

コンテンツビューを作成する

新しいビューを作成するには、異なるコンテンツタイプのディレクトリに、ビュー名を指定してテンプレートを作成します。以下の例では、コンテンツタイプの posts と project に対して、“li” ビューと “summary” ビューを作成しています。見ての通り、これらはシングルコンテンツビューテンプレートである single.html の隣に配置されています。指定されたタイプに特定のビューを提供し、プライマリビューには _default/single.html を使用し続けることもできます。

  ▾ layouts/
    ▾ posts/
        li.html
        single.html
        summary.html
    ▾ project/
        li.html
        single.html
        summary.html

Hugo は、特定のコンテンツビューテンプレートがそのタイプに提供されていない場合に使用されるデフォルトのコンテンツテンプレートもサポートしています。コンテンツビューは _default ディレクトリでも定義でき、検索順序の問題として最終的に _default ディレクトリにたどり着くリストテンプレートおよびシングルテンプレートと同じように動作します。

▾ layouts/
  ▾ _default/
      li.html
      single.html
      summary.html

どのテンプレートがレンダリングされるのか?

コンテンツビューの検索順序は、以下のとおりです。

/layouts/<TYPE>/<VIEW>.html
/layouts/_default/<VIEW>.html
/themes/<THEME>/layouts/<TYPE>/<VIEW>.html
/themes/<THEME>/layouts/_default/<VIEW>.html

例: リスト内のコンテンツビュー

以下の例は、リストテンプレート内でコンテンツビューを使用する方法を示しています。

`list.html`

この例では、.Render がテンプレートに渡され、.Render (レンダー) 関数を呼び出しています。.Render は特殊な関数で、最初の引数として与えられたビューテンプレートでコンテンツ自身をレンダリングするように指示します。この場合、テンプレートは以下の summary.html ビューをレンダリングします。

layouts/_default/list.html

<main id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>

`summary.html`

Hugo は、以下の summary.html ビューテンプレートにページオブジェクト全体を渡します。 (完全なリストは、「ページ変数」を参照してください)。

layouts/_default/summary.html

<article class="post">
  <header>
    <h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .Permalink }}'><nobr>Read more →</nobr></a>
  </footer>
</article>

`li.html`

前の例の続きで、.Render 関数の呼び出しの引数を変更することで、より小さな li.html ビューを使用するようにレンダー関数を変更できます (つまり、 {{ .Render "li" }})。

layouts/_default/li.html

<li>
  <a href="{{ .Permalink }}">{{ .Title }}</a>
  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>

コンテンツビュー テンプレート