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

• 日本語

• Zola
• Tera
• Sass

改修内容

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

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

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

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

タグと言語での絞り込み

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

{{ card(title=“Taxonomies | Zola Documentation”, url=“https://www.getzola.org/documentation/content/taxonomies/”) }}

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形式で配列を書くとき未だに書き間違って読み込めないことある…

{{ card(title=“Front matter | Content Section”, url=“https://www.getzola.org/documentation/content/section/#front-matter”) }}

メタデータの書き方についてはドキュメントを確認してもらうとして、ここではメタデータ内に含まれている 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 でフォルダを作成する。 詳しい手順はドキュメントが分かりやすい。

{{ card(title=“Taxonomies | Templates”, url=“https://www.getzola.org/documentation/templates/taxonomies/”) }}

今回は 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 %}

{{ card(title=“Taxonomy list (list.html) | Templates”, url=“https://www.getzola.org/documentation/templates/taxonomies/#taxonomy-list-list-html”) }}

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 %}

{{ card(title=“Taxonomy list (single.html) | Templates”, url=“https://www.getzola.org/documentation/templates/taxonomies/#single-term-single-html”) }}

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

サイドバーの廃止

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

Sassの導入

CSS でも良かったが、Zola がサポートしてるっぽかったので初めて Sass を触ってみた。

{{ card(title=“Sass | Content”, url=“https://www.getzola.org/documentation/content/sass/”) }}

Sass 公式ドキュメントはこちら。

{{ card(title=“Sass | CSS with superpowers”, url=“https://sass-lang.com/”) }}

あまり複雑なCSSを書くつもりは無いのでネストさせたりも現段階ではしていない。 変数は使用している。 CSS のグローバル変数みたいな感じで使ってる。違いを理解していないが便利だ。

{{ card(title=“CSS カスタムプロパティ（変数）の使用 | mdn web docs”, url=“https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties”) }}

プライバシーポリシーの導入

ホスティングしている Cloudflare のアナリティクスを利用しているので追加した。 特に情報を収集してはいないようだ。

{{ card(title=“Privacy Policy | dnfolio”, url=“https://dnfolio.me/privacy/”) }}

公式サイトはこちら。

{{ card(title=“Cloudflare Web Analytics”, url=“https://www.cloudflare.com/ja-jp/web-analytics/”) }}

各種SNSリンクの設置

フッターに、私が利用しているSNSへのリンクを設置した。

• Bluesky
• X(Twitter)
• しずかなインターネット
• GitHub

Aboutページをかっこよく

これまでに簡単な経歴みたいなものだけを書いていたが、GitHubのステータスを追加してみた。想像以上にかっこよくなったので気に入っている。

{{ card(title=“About me | dnfolio”, url=“https://dnfolio.me/about/”) }}

BlueskyとX(Twitter)への共有ボタンを導入

SNSに記事を投稿する時、毎回URLをコピーしてタイトルを入力して…みたいな手間があったので導入してみた。 普段利用していた しずかなインターネット がXへの共有ボタンを導入していて便利だったので。

導入するために Tera の Macros を使ってみた。便利な機能だったので知ることが出来て良かった。

詳しい記事もそれぞれ書いている。導入手順はBluesky側の記事で書いている。

{{ card(title=“Created share button for Bluesky”, url=“https://dnfolio.me/created-share-button-for-bluesky/”) }}

{{ card(title=“X(Twitter)への共有ボタンを記事に追加した”, url=“https://dnfolio.me/x-twitter-henogong-you-botanwoji-shi-nizhui-jia-sita/”) }}

以上。

大規模改修をやってみて

移行前まで、 VitePress を越える満足度を得られるか心配だったが、かなり満足している。 Deno 製SSGの Lume でdnfolioを運用していた時よりも成長している気がする。あの頃はCSSを思うように設定出来ずにUI構築不要な VitePress に逃げたが…

今後実装したい機能とか

内部リンクとかアンカーリンクは必要だと思ってる。 Zola でサポートしてるっぽいのでこれは導入したい。

{{ card(title=“Internal links & deep linking | Content”, url=“https://www.getzola.org/documentation/content/linking/”) }}