Hugoのブログ記事に更新日を表示するための手順を説明。

記事の更新日の設定の手順

公式サイトのGit Variablesのページを参考にする。

HugoでGitの情報を利用できるように設定

Hugoには、gitのログから情報をHugoのVariables(Git Variables)の形で取得できる機能がある。
ただ、初期設定ではその設定はOffになっているので、まずconfig.tomlに以下の設定を行う。

enableGitInfo = true

これによって、HTMLファイルに{{ .Gitinfo }}と記述することで、Gitの情報を取得できるようになる。どのような情報が取得できるようになるかは、公式サイトのGit Variablesのページへ。

Gitの情報から最終コミット日を取得する

Git Variablesの変数に.Lastmodというものがあるが、この変数を用いることで、Gitの最終コミット日時(正しくは、GitのAuthor Date)を取得できるようになる。

当ブログでの実装方法

ブログにtransquilpeakテーマを利用している場合となる。

layouts/partials/internal/lastmod.html

themes/hugo-tranquilpeak-theme/layouts/partials/internal/date.htmlをコピーして、lastmod用のhtmlを作成。

Last Updated:
{{ if $.Site.Params.dateFormat }}
  {{ $date := (.Lastmod.Format $.Site.Params.dateFormat) }}
  {{ $regex := "(?i)(january|february|march|april|may|june|july|august|september|october|november|december)" }}
  {{ $month := findRE $regex $date }}
  {{ if eq (len $month) 1 }}
    {{ replaceRE $regex (i18n (lower (printf "date.month.%s" (index $month 0)))) $date }}
  {{ else }}
    {{ .Lastmod.Format $.Site.Params.dateFormat }}
  {{ end }}
{{ else }}
  {{ i18n (lower (printf "date.month.%s" .Lastmod.Month)) }} {{ .Lastmod.Day }}, {{ .Lastmod.Year }}
{{ end }}

layouts/partials/post/meta.html

themes/hugo-tranquilpeak-theme/layouts/partials/post/meta.htmlをコピーして、lastmod用のtimeタグを追加。

{{ if not (eq .Params.showMeta false) }}
  <div class="postShorten-meta post-meta">
    {{ if not (eq .Params.showDate false)  }}
      <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
        {{ partial "internal/date.html" . }}
      </time>
      &ensp;
      <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">
        {{ partial "internal/lastmod.html" . }}
      </time>
    {{ end }}
    <br>
    {{ partial "post/category.html" . }}
  </div>
{{ end }}

Hugoのブログ記事に更新日を表示する

目次