しむどんのいえ

Webサイトのデザインを変更する

Hugoサイト（=/Users/sximada/ng/symdon/build/www=）のテンプレートを修正し、記事の日付情報を整理して表示するようにした。

layouts/_default/list.html

一覧ページは、作成日と最終更新日を表示するようにした。

  • .Date を「作成日」として表示
  • .Lastmod を「最終更新」として表示

作成日と最終更新日が同じ場合は最終更新日を省略するようにした（重複除去）。

<div class="post-dates">
  <time datetime="{{ $page.Date.Format "2006-01-02" }}">作成日: {{ $page.Date.Format "2006-01-02" }}</time>
  {{- if ne ($page.Date.Format "2006-01-02") ($page.Lastmod.Format "2006-01-02") }}
  <span class="sep">/</span>
  <time datetime="{{ $page.Lastmod.Format "2006-01-02" }}">最終更新: {{ $page.Lastmod.Format "2006-01-02" }}</time>
  {{- end }}
</div>

layouts/_default/single.html

詳細ページの日付表示をページ上部からページ末尾へ移動し、複数の日付フィールドを時系列で表示するようにした。

  • .Date → 作成日
  • .Params.updated → 更新日（カスタムパラメータ =#+UPDATED=）
  • .Params.modified → 更新日（カスタムパラメータ =#+MODIFIED=）
  • .Lastmod → 最終更新日（=#+LASTMOD= から）

同じ日付は重複除去して1件のみ表示する。また、日付を昇順（時系列）でソートして <dl> リスト形式で表示する。

日付の収集と重複除去は以下のように実装した。 $seen に追加済みの日付文字列を保持し、未登録の日付のみ $entries に追加する。

{{- $seen := slice }}
{{- $entries := slice }}

{{- if not .Date.IsZero }}
  {{- $key := .Date.Format "2006-01-02" }}
  {{- if not (in $seen $key) }}
    {{- $seen = $seen | append $key }}
    {{- $entries = $entries | append (dict "date" .Date "label" "作成日") }}
  {{- end }}
{{- end }}

{{- with .Params.updated }}
  {{- $t := time . }}
  {{- $key := $t.Format "2006-01-02" }}
  {{- if not (in $seen $key) }}
    {{- $seen = $seen | append $key }}
    {{- $entries = $entries | append (dict "date" $t "label" "更新日") }}
  {{- end }}
{{- end }}

{{- with .Params.modified }}
  {{- $t := time . }}
  {{- $key := $t.Format "2006-01-02" }}
  {{- if not (in $seen $key) }}
    {{- $seen = $seen | append $key }}
    {{- $entries = $entries | append (dict "date" $t "label" "更新日") }}
  {{- end }}
{{- end }}

{{- if not .Lastmod.IsZero }}
  {{- $key := .Lastmod.Format "2006-01-02" }}
  {{- if not (in $seen $key) }}
    {{- $seen = $seen | append $key }}
    {{- $entries = $entries | append (dict "date" .Lastmod "label" "最終更新日") }}
  {{- end }}
{{- end }}

収集した $entries を日付昇順にソートして表示する。

{{- if $entries }}
{{- $sorted := sort $entries "date" "asc" }}
<div class="article-history">
  <dl>
    {{- range $sorted }}
    <dt>{{ .label }}</dt>
    <dd><time datetime="{{ .date.Format "2006-01-02" }}">{{ .date.Format "2006-01-02" }}</time></dd>
    {{- end }}
  </dl>
</div>
{{- end }}
最終更新日
作成日