blockの巣

Zolaで生成したブログの更新履歴をいい感じに表示する

2022/11/29 17:28 公開
Zola

目的

記事のMarkdownのヘッダーに下記ような記述をして

title = "タイトル"
date = 2022-11-19T22:00:00+09:00
[extra]
updated_histories = [
  { date = 2022-12-22T01:07:00+09:00, content = "追記1" },
  { date = 2022-11-21T23:52:00+09:00, content = "修正B" },
  { date = 2022-11-20T11:24:00+09:00, content = "修正A" },
]

下の画像のように表示するというのが目的です。
updated_histories_sample_image
このサイトであればこことかが更新履歴が複数あってわかりやすいです。

前提

Zolaのテーマのhtmlを自分で編集できる。
誰かが作ったテーマを使用している場合はgithubからインストールしていることが多いと思いますがその場合でも記事のテンプレート(多くの場合post.html)が編集できれば問題ないです。

やること

テンプレートファイル編集

記事のテンプレートファイル(page.htmlとか)を開いて更新履歴を表示したい箇所に下記の記述を追加します。

<section class="update_history">
  <table>
    <tr>
      <td><span class = "date">{{ page.date | date(format="%Y/%m/%d %H:%M") }}</span></td>
      <td>公開</td>
    </tr>
    {% if page.extra.updated_histories %}
      {% for item in page.extra.updated_histories | sort(attribute="date") %}
      <tr>
        <td><span class = "date">{{ item.date | date(format="%Y/%m/%d %H:%M") }}</span></td>
        <td class="update_history_content">{{ item.content | markdown | safe }}</td>
      </tr>
      {% endfor %}
    {% endif %}
  </table>
</section>

Markdownに更新履歴を追加

記事のMarkdownに以下のように [extra] updated_historiesを追加します。
updated_historiesはtomlの辞書形式でdate(更新日時)とcontent(更新内容)を記述します。

[extra]
updated_histories = [
  { date = 2022-12-22T01:07:00+09:00, content = "追記1" },
  { date = 2022-11-21T23:52:00+09:00, content = "修正B" },
  { date = 2022-11-20T11:24:00+09:00, content = "修正A" },
]

結果

cssにもよりますがおおよそこのように表示されると思います。
updated_histories_sample_image

ざっくり解説

まずhtmlの方です。

ここは更新履歴を表示するまとまりを記述しているだけです。
sectionではなくdivでも良いですし、classも別名で構いません。なんならこのタグ自体なくしても問題はないと思います。
ただあったほうがcssでスタイルをいじりやすいのでこうしています。

<section class="update_history">
  <!-- 省略 -->
</section>

ここは投稿日を表示しています。
投稿日はヘッダーのdateの内容が使用されます。
日付のフォーマットは"%Y/%m/%d %H:%M"を指定していますが好きに編集していただいて構いません。

<table>
  <tr>
    <td><span class="date">{{ page.date | date(format="%Y/%m/%d %H:%M") }}</span></td>
    <td>公開</td>
  </tr>
  <!-- 省略 -->
</table>

今回のキモ1です。
1行目はMarkdownのヘッダーにextra.updated_historiesが設定されている場合に更新履歴を表示するための条件です。
2行目の{% for ... %}では更新履歴は日付でソートを行い、要素をループで処理します。
4行目の日付表示は投稿日と同じです。
5行目は更新内容をMarkdownとして解釈し表示するための記述です。

1{% if page.extra.updated_histories %}

2  {% for item in page.extra.updated_histories | sort(attribute="date") %}

3  <tr>

4    <td><span class="date">{{ item.date | date(format="%Y/%m/%d %H:%M") }}</span></td>

5    <td class="update_history_content">{{ item.content | markdown | safe }}</td>

6  </tr>

7  {% endfor %}

8{% endif %}

リストではなくテーブルとして表示しているのはフォントによっては日付と更新内容がきれいに並ばなかったからです。
好みでリストにしても問題ないです。

次にMarkdown側の変更です。今回のキモ2です。 ヘッダーにZolaが用意していない要素(extra)のupdated_historiesを追加しそこに日付と更新内容を格納します。

[extra]
updated_histories = [
  { date = 2022-12-22T01:07:00+09:00, content = "追記1" },
  { date = 2022-11-21T23:52:00+09:00, content = "修正B" },
  { date = 2022-11-20T11:24:00+09:00, content = "修正A" },
]

contentはMarkdownとして解釈されるため

updated_histories = [
  { date = 2022-12-22T01:07:00+09:00, content = "**追記1**" }, # 強調表示
]

みたいなこともできます。

あとがき

これだけのことをやるのにもZolaとTeraの仕様を理解していないと難しかったです。
テーマ編集は苦しいですが楽しいです。