背景

更新日ええなと思った。 google検索的にもおすすめらいしいので追加する。

概要

更新日をメタ情報に追加し、ページ生成するテンプレートに埋め込んでおけば表示できる。

1. メタ情報に更新日を追加

index.mdに記載するメタ情報を拾えるので更新日のメタ情報を加える。key名は何でも良いのでとりあえずlastmodにしてみた。

---
layout: post
title: "hugo themeのカスタマイズ"
date: 2025-05-01
lastmod: 2025-05-02
img: images/display-update-date.png
tags: ["hugo"]
---

2. ページテンプレートにメタ情報を埋め込む

開発者モードの要素の検証でなんとなく、idや要素タグ名を特定し後はどのへんで定義されているか探す。 layouts/_default/sigle.htmlがコンテンツページのtempleteだったのでそこに追加。 メタ情報はなぜか先頭を大文字とした.Lastmodで拾えたのでそれで。実際のページへの表示はフォーマットして表示する。「April 1, 2024」みたいな海外表示は馴染がないのでyyyy/MM/dd指定にしてみた。 日付表記はhugoが提供しているtime関数でフォーマットできる。yyyy-MM-ddみたいな指定では無く、表示したい例(?)2024-04-02とかを指定するあまり馴染みのないものだった。

<header class="post-header">
   <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
   <p class="post-meta"><time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}' itemprop="datePublished">公開日:{{ .Date.Format "2006/01/02" }},</time>
   <time datetime='{{ time.Format "2006-01-02T15:04:05Z07:00" .Lastmod }}' itemprop="dateModified"> 更新日:{{ time.Format "2006/01/02" .Lastmod }}</time>
   {{ with .Params.Author }} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ . }}</span></span>{{ end }}</p>
</header>