まくろぐ

Jekyll (GitHub Pages) でページの最終更新日を表示する

更新:
作成:
GitHub Pages のサイトジェネレータとして採用されている Jekyll で、ページのフロントマターに最終更新日を入れる方法です。

Jekyll では、HTML ファイルを生成するために Markdown 形式で記事を作成するのですが、先頭のフロントマターと呼ばれる部分に任意の変数を定義することができます。

下記の例には、記事の作成日 (date) と、最終更新日 (lastmod) を入れてあります。

sample.md
---
title: "ページタイトル"
date: "2015-01-01"
lastmod: "2019-09-12"
---

本文...

これらの情報をレイアウトファイルから参照するには、下記のようにします。 ここでは、最終更新日 (lastmod) の情報があればそちらを、なければ作成日 (date) を表示するようにしています。 フロントマターでの lastmod の指定はオプショナル扱いということです。

{% if page.lastmod %}
  {% assign lastmod = page.lastmod %}
{% else %}
  {% assign lastmod = page.date %}
{% endif %}

<span class="date">{{ lastmod }}</span>

HTML5 の time 要素や、schema.org の構造化データマークアップを使ってちゃんと SEO 対策するのであれば、下記のような感じでテンプレートを作成するのがよいでしょう。

default.html(抜粋)
{% if page.lastmod %}
  {% assign lastmod = page.lastmod %}
{% else %}
  {% assign lastmod = page.date %}
{% endif %}

<article itemscope itemtype="https://schema.org/BlogPosting">
  <header>
    <h1 itemprop="headline">{{ page.title }}</h1>
    <span>最終更新:
      <time itemprop="dateModified" datetime="{{ lastmod }}">{{ lastmod }}</time>
    </span>
  </header>
  <div itemprop="articleBody">
    {{ content }}
  </div>
</article>

関連記事

まくろぐ
サイトマップまくへのメッセージ