個人サイトにリーディングタイムを表示してみた

• 日本語

• Zola

リーディングタイムとは

Medium という海外の記事投稿サイトが元らしい。

{{ card(title=“Read time”, url=“https://help.medium.com/hc/en-us/articles/214991667-Read-time”) }}

人によって読む速度は異なるので目安みたいな数字。

Zola で導入するには

Zola の Sections and Pages で確認出来る。

ここでは、 Pages と Sections のフロントマターで設定出来る項目がずらりとかかれている。 この中にある reading_time がそれに該当する。

コード例

2025年1月20日(月)時点で私は以下のように書いている。

38行目だけ。とても簡単。

{% extends "base.html" %}
{% block head %}
  <meta name="description" content="Personal website maintained by Daiki48">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://dnfolio.me/icons/icon.png">
  <meta property="og:title" content="{{ page.title }}">
  <meta property="og:site_name" content="dnfolio" />
  <meta property="og:email" content="daiki48.engineer@gmail.com">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@dnfolio_me">
  <meta name="twitter:title" content="{{ page.title }}">
  <meta name="twitter:image" content="https://dnfolio.me/icons/icon.png">
  {% if page.description %}
    <meta property="og:description" content="{{ page.description }}">
    <meta name="twitter:description" content="{{ page.description }}">
  {% else %}
    <meta property="og:description"
          content="Personal website maintained by Daiki48">
    <meta name="twitter:description"
          content="Personal website maintained by Daiki48">
  {% endif %}
  {% if page.slug %}
    <meta property="og:url" content="https://dnfolio.me/{{ page.slug }}">
  {% else %}
    <meta property="og:url" content="https://dnfolio.me">
  {% endif %}
{% endblock head %}
{% block title %}
  {{ page.title }}
{% endblock
title %}
{% block content %}
  <header>
    <h1>{{ page.title }}</h1>
    <span>{{ page.description }}</span>
    <p class="subtitle">
      <strong>{{ page.date }}</strong>
      <span>{{ page.reading_time }} min read</span>
    </p>
    <ul class="page-tags">
      {% for tag in page.taxonomies.tags %}
        <li>
          <a href="/tags/{{ tag | lower }}/">#{{ tag }}</a>
        </li>
      {% endfor %}
    </ul>
  </header>
  <div class="toc">
    <span>Table of Contents</span>
    {% if page.toc %}
      <table>
        <tbody>
          {% for h1 in page.toc %}
            <tr>
              <td>#</td>
              <td>
                <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
              </td>
            </tr>
            {% if h1.children %}
              {% for h2 in h1.children %}
                <tr>
                  <td>##</td>
                  <td>
                    <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                  </td>
                </tr>
              {% endfor %}
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </div>
  <div class="blog-content">{{ page.content | safe }}</div>
  <div class="shares">
    <span>Share on</span>
    {{ share::bsky(text=page.title,
        url="https://dnfolio.me/" ~ page.slug) }} {{ share::twitter(text=page.title,
     url="https://dnfolio.me/" ~ page.slug) }}
  </div>
{% endblock content %}

Zola の標準でサポートしていたので試験的に導入している。 特に必要でなければ消そうと思う。