シングルページテンプレート(Single Page Templates)

製作するホームページの種類にもよりますが、個人的にはトップページから作りカテゴリー別に記事を作ったりします。Hugo を使っていくにあたりどこから手をつけるのがよいのか微妙なので、理解がしやすそうなシングルページテンプレートを最初に確認していきます。

シングルページテンプレート

シングルページテンプレートは、主に個別記事に対して適用されるテンプレートです。

Paper というテーマの場合、「themes\hugo-paper\layouts\_default」ディレクトリに用意された single.html がシングルページテンプレートにあたります。シングルページテンプレートは、「layouts\_default」ディレクトリ以外のも配置することができるのですが、とりあえず全記事ページが同じレイアウトとした場合「layouts\_default」ディレクトリに置くことでテンプレートが適用されます。

それでは、Paper というテーマに用意されたシングルページテンプレートを見てみます。

{{ partial "header.html" . }}
<article class="post post-view">
  <header class="post-header">
    <h1 class="post-title">{{ .Title }}</h1>
    <p class="post-meta">
      {{- if or .Params.author .Site.Params.author -}}
      {{ .Params.author | default .Site.Params.author }} · {{ end }}
      {{- .Date.Format "2006.1.2" -}}
    </p>
  </header>
  <div class="post-content">{{ .Content }}</div>
  <footer class="post-footer">
    {{ if .Params.tags }}
    <ul class="post-tags">
      {{ range .Params.tags }}
      <li><a href="{{ `/tags/` }}{{ . | urlize }}/">{{ . }}</a></li>
      {{ end }}
    </ul>
    {{ end }}
  </footer>
  <!-- Comments system area -->
</article>
{{ partial "footer.html" . }}

1行目と最終行は、「デザイン部分を部品化する Partial Templates」で確認した Partial Template を呼び出しています。

「class="post-meta"」以降にある if 文では、サイトの設定（Site Configuration）又はフロントマターに「author」が設定されている場合、「author」に設定された値を出力します。「.Date.Format」の部分は、フロントマターに設定された日付を"2006.1.2"の形式で出力します。

ちなみに、 Paper というテーマでは Site Configuration に author が設定されていないため、出力したい場合は次のように author を設定します。

baseURL = "http://example.org/"
title = "My New Hugo Site"
theme = "hugo-paper"
[params]
    author = "bbb"

また、記事ごとに著者が変わる場合は、フロントマターに author を設定します。

---
title: "Init"
date: 2018-05-14T13:05:54+09:00
draft: false
author: BBB
---

シングルページテンプレートは、個別記事に対して適用されるテンプレートということですので記事本文を出力する形になります。 {{ .Content }} の部分が記事に置き換わり出力されます。

最後にフロントマターにタグを設定した場合、 {{ range .Params.tags }} 以降でタグを出力します。 タグの設定は、次のように設定します。(yaml形式の場合)

---
title: "Init"
date: 2018-05-14T13:05:54+09:00
draft: false
author: BBB
tags:
- hoge
- hogehoge
- fuga
---