で、何やったかというと

タグ詳細ページの中身を書き換えて保守性やらなんやらを向上したって話。

例として作業前の#Dailyの中身を示す。

---
title: Tags/Daily
description: 日常に関する記事。
---

<script lang="ts" setup>
import TaggedPostList from "../../.vitepress/components/TaggedPostList.vue";
import PageCounter from "../../.vitepress/components/PageCounter.vue";
</script>

# {{ $frontmatter.title.replace('Tags/', '') }}

{{ $frontmatter.description }}

## 記事一覧  <span class="text-base">(<PageCounter tag="daily" />)</span>

<TaggedPostList tag="daily" />

TaggedPostListは該当タグが付いている記事のリストTemplate。PageCounterは該当タグがついている記事の数を表示するやつ。

MarkdownファイルなのにHTMLタグが入ってる問題はこの際置いておく(いつかどうにかしたい)。

正直このコードを使って更新するのはめんどくさい。 というのも、新しくタグ詳細のページを作るのに

• frontmatterのtitleとdescription
• <PageCounter tag="" />内のタグ
• <TaggedPostList tag="" />内のタグ

frontmatterは正直仕方ないとしても、残り2つの更新に関しては入れる文字列も同じだし、どうにかして共通化できないかと思った。

Template化する

ということで、VueのTemplate機能を使った。 基本的にfrontmatterとTemplateのタグだけで構成したかったので、先程のコードをvue形式に書き直した。

<script lang="ts" setup>
import { useData } from 'vitepress';
const { frontmatter } = useData();

import TaggedPostList from '../../.vitepress/components/TaggedPostList.vue';
import PageCounter from '../../.vitepress/components/PageCounter.vue';
const Title = frontmatter.value.title.replace('Tags/', '');
const Tag = Title.toLowerCase();
</script>

<template>
    <div class="vp-doc">
        <h1>{{ Title }}</h1>

        <p>{{ frontmatter.description }}</p>

        <h2>
            記事一覧 <span class="text-base">(<PageCounter :tag="Tag" />)</span>
        </h2>
        <TaggedPostList :tag="Tag" />
    </div>
</template>

とりあえず変数にして共通化できるところは変数にした。私は雰囲気でプログラミングをしている(？)

結果として、作業後の#Dailyの中身はこうなった。

---
title: Tags/Daily
description: 日常に関する記事。
---

<script lang="ts" setup>
import TagTemplate from "../../.vitepress/components/TagTemplate.vue";
</script>

<TagTemplate />

相変わらずHTMLタグは入っているが、これで新しいタグが増えても変更する場所がfrontmatterだけになった。

とは言ってもこのブログが更新されるかは気分なのでタグが増えるかは微妙。

以上。