個人サイトのdnfolioを大きく改修した

日本語

Zola
Tera
Sass

改修内容

今回の改修作業は、先日行った VitePress から Zola の移行作業のおまけ。

タグで絞り込み
言語で絞り込み
サイドバーの廃止
Sass の導入
プライバシーポリシーの導入
各種SNSリンクの設置
Aboutページをかっこよく
BlueskyとX(Twitter)への共有ボタンを導入

結構たくさん出来た。おかげで今は満足している。移行前のVitePressが完成度高いフレームワークだったので、移行に至るまでも時間がかかった。それなりに設定も頑張ってたので惜しかった。

それぞれの改修内容について補足を書いておこう。

タグと言語での絞り込み

Zola の Taxonomies という機能が標準で存在する。

Taxonomies | Zola Documentation

Zola has built-in support for taxonomies. Taxonomies are a way for users to group content according to user-defined categories.

この機能を使うと簡単にグループ化することが出来る。

各記事のメタデータをこのように書く。

+++
title = "個人サイトのdnfolioを大きく改修した"
description = "この個人サイトdnfolioを大幅に改修したので、改修内容を書いていこうと思う。"
slug = "個人サイトのdnfolioを大きく改修した"
draft = false
[taxonomies]
tags = ["Zola", "Tera", "Sass"]
languages = ["日本語"]
+++

記事のMarkdownファイル先頭に、この +++ で書いているものがメタデータ。 --- で書くYAML形式は慣れていたがTOMLでメタデータを書けるのは嬉しい。YAML形式で配列を書くとき未だに書き間違って読み込めないことある…

Front matter | Content Section

メタデータの書き方についてはドキュメントを確認してもらうとして、ここではメタデータ内に含まれている taxonomies に注目する。 tags と languages があると思うがここで記事のタグと言語を指定している。

[taxonomies]
tags = ["Zola", "Tera", "Sass"]
languages = ["日本語"]

そしてこれらは配列なので複数設定することが出来る。 tags = ["Zola", "Tera", "Sass"] のように。

Zolaプロジェクトのルートにある config.toml で taxonomies の設定を追加する。

taxonomies = [
  { name = "tags", feed = true },
  { name = "languages", feed = true },
]

そして templates ディレクトリ内に taxonomies の name でフォルダを作成する。詳しい手順はドキュメントが分かりやすい。

Taxonomies | Templates

今回は templates/tags ディレクトリと templates/languages ディレクトリを作成し、それぞれに list.html と single.html を作成する。

list.toml はこんな感じで設定した。

{% extends "base.html" %}
{% block content %}
<div>
  <h1 class="title">All Tags</h1>
  <ul>
    {% for term in terms %}
    <li>
      <a href="{{ term.permalink | safe }}">
        {{ term.name }} ({{ term.pages | length }})
      </a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endblock content %}

Taxonomy list (list.html) | Templates

single.html はこんな感じ。

{% extends "base.html" %}
{% block content %}
<div>
  <div class="tags-single-header">
    <h2>Tag: #{{ term.name }} ({{ term.pages | length }})</h2>
    <a href="{{ config.base_url | safe }}/tags">Show all tags</a>
  </div>

  <ul>
    {% for page in term.pages %}
    <li>
      <span> {{ page.date | date(format="%Y-%m-%d") }} </span>
      <a href="{{ page.permalink | safe }}"> {{ page.title }} </a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endblock content %}

Taxonomy list (single.html) | Templates

これだけでグループ化出来て絞り込み機能を実装出来る。

サイドバーの廃止

VitePress の頃はデフォルトのテンプレートUIが好きだったので左右にサイドバーや目次を表示していた。ライブラリのドキュメントなどはこの形だととても見やすいがブログだとそうでも無いと感じた。(個人的に) VitePress はレイアウトをカスタマイズ出来るのでサイドバーが必要無ければ消せば良いのだがめんどくさくてスルーしていた。今回の移行に伴いサイドバーを消した。