まくまくHugo/Goノート
フロントマターの type、layout プロパティでレイアウトを指定する
2020-05-04

フロントマターでのレイアウト指定

Hugo で、あるページだけ特殊なレイアウトを使用したいことがあります(例えば、検索ページや、新着記事リストのページなど)。 このような場合は、Markdown ファイルのフロントマターで、使用するレイアウトファイルを指定できます。 使用するプロパティは下記の 2 つです。

通常、コンテントタイプとレイアウトファイル名は、ディレクトリ構造と Markdown ファイル名によって決まるようになっています。 例えば、下記のような感じです。

Markdown フィイル名 コンテントタイプ レイアウトファイル名
content/foo/_index.md foo section.htmllist.html
content/foo/page1.md foo single.html

デフォルトで、コンテントタイプには content ディレクトリ直下のディレクトリ名が割り当てられます。 実際に使用されるレイアウトファイルがどうなるかのルールは下記を参照してください。

フロントマターで typelayout を指定することにより、これらのルールを無視して、強制的に使用するレイアウトファイルを変更することができます。 例を見た方が分かりやすいので、ここでは、「新着一覧」のページをサンプルとして作ってみます。

注: 記事の一覧を表示するくらいであれば、通常はショートコードで出力してしまった方が簡単です。ここでは、特定のページだけレイアウトを大きく変更する必要があると想定しています

使用するレイアウトファイルを指定する例

下記のテンプレートでは、更新日時が新しい記事を 5 件分リスト表示しています。 このレイアウトは、「新着一覧」のページでしか使わない 特殊なレイアウト なので、レイアウトファイル自体も layouts/special/latest.html という特殊なパスに作成することにします。

layouts/special/latest.html(抜粋)

<ul>
  {{- range first 5 .Site.RegularPages.ByLastmod.Reverse }}
    <li>
      <b><a href="{{ .RelPermalink }}">{{ .Title }}</a></b>
      <time>{{ .Date.Format "2006-01-02" }}</time>
    </li>
  {{- end }}
</ul>

次に、記事一覧のページを出力するための Markdown ファイルを作成します。 使用するレイアウトはフロントマターで指定するので、Markdown ファイルは、どのようなパスに配置しても構いません。

content/latest.html

---
title: "新着一覧"
type: "special"
layout: "latest"
---

本文はレイアウトファイルの方で出力される内容だけでいいので、Markdown ファイルにはフロントマターだけを記述します。 コンテントタイプ (type) に special、レイアウトファイル名 (layout) に latest を指定しているので、レイアウトファイルとして layouts/special/latest.html が使用されることになります。

2020-05-04