Hugoテーマ Mainroad 改善

今日は朝から冷え込んで、路面にはうっすらと雪が積もっている。
こんな日は外に出ず、暖かい部屋でゆっくり過ごすに限る。

暇な日曜日の時間つぶしとして、このブログのHugoテーマ「Mainroad」の改善に着手した。
デザインは気に入っているが、一点だけ不便を感じていた「個別記事ページでの前後ナビゲーション」を追加することにする。

以下、自分用の備忘録を兼ねたカスタマイズ手順だ。

1. 個別記事に「過去記事・未来記事」ボタンを追加

Mainroadの layouts/_default/single.html を編集し、記事のヘッダー部分にナビゲーションを配置した。
blogn時代のように、記事の冒頭で前後の流れを確認できるようにしている。

<nav class="post-nav flex">
    {{ with .PrevInSection }}
    <div class="post-nav__item post-nav__item--prev">
        <a class="post-nav__link" href="{{ .RelPermalink }}" rel="prev">
            <span class="post-nav__caption">≪&nbsp;過去の記事</span>
            <p class="post-nav__post-title">{{ .Title }}</p>
        </a>
    </div>
    {{ end }}
    {{ with .NextInSection }}
    <div class="post-nav__item post-nav__item--next">
        <a class="post-nav__link" href="{{ .RelPermalink }}" rel="next">
            <span class="post-nav__caption">新しい記事&nbsp;≫</span>
            <p class="post-nav__post-title">{{ .Title }}</p>
        </a>
    </div>
    {{ end }}
</nav>

2. メタ情報の整理（日付とカテゴリー）

境界線が二重にならないよう、テーマ標準の post_meta.html を活かしつつ、hugo.toml で表示を制御。
これで日付とカテゴリーがスッキリ一行に収まった。

[Params]
post_meta = [“date”, “categories”]

Mainroadのシンプルで清潔感のあるデザインは、かつて愛用した「blogn」の「記事が主役」という雰囲気にどこか通じるものがある。

Hugoに移行したことで、記事追加のフロー（Markdownを書いてビルドする工程）は、ブラウザだけで完結したblogn時代に比べれば若干の手間はある。
しかし、その反面、静的サイトとしての圧倒的な高速さと、管理の容易さは格段に向上した。

特に驚くべきは、サーバー側だ。
現在このブログは Raspberry Pi 2B で動かしているのだが、PHPを介さない静的配信のおかげで、嘘みたいに快速にページが表示される。

以前、サーバー側のWedデータ用ストレージをUSBメモリーからSSDに換装しておいたのだが、この劇的なレスポンスを予感していたからなのかもしれない(笑)

雪の日の静かな時間に、少しずつ理想のブログ環境へ近づけていく。
こうした「弄る楽しみ」があるのも、自前サーバーとHugoの組み合わせの醍醐味だ。