VuePressでブログのタグ一覧を表示する

2021-04-11

本サイトではVuePressの公式ブログ用プラグイン @vuepress/plugin-blog (opens new window) を使用しています。このプラグインの機能の1つに Frontmatter Classifier というものがあります。これは各記事に設定された frontmatter key をもとに記事を分類できる機能で、本サイトでもこれを利用してタグ一覧の表示を行っています。詳細は公式のドキュメント(Introduction - @vuepress/plugin-blog (opens new window))を読んでもらった方がわかりやすいと思いますが、ここでは本サイトでの設定を紹介したいと思います。

まず、config.jsの@vuepress/plugin-blogコンフィグ部分にfrontmattersの設定を記入。ほぼ公式ドキュメントのまま。

frontmatters: [{
    // Unique ID of current classification
    id: 'tag',
    // Decide that the frontmatter keys will be grouped under this classification
    keys: ['tag', 'tags'],
    // Path of the `entry page` (or `list page`)
    path: '/tag/',
    // Layout of the `entry page`
    layout: 'Tags',
    // Layout of the `scope page`
    scopeLayout: 'Tag'
}, ]

次に、各ブログ記事の frontmatter にtag: hogeのように記入してタグを付与します。複数タグを付与したい場合は以下のようにリストにする。




 
 
 
 


---
title: VuePressでブログのタグ/タグ一覧を表示する
date: 2021-04-11
tags:
    - VuePress
    - hoge
    - hoge2
---

コンフィグでkeyとしてtagtagsの二つを指定しているのでどちらを使っても大丈夫。

すると、プラグイン側で勝手に以下のようなページを生成してくれます。

url layout
/tag/ Tags
/tag/VuePress/ Tag
/tag/hoge/ Tag
/tag/hoge2/ Tag

VuePressではページの作成のためにMarkdownファイルを作成する必要がありますが、これらはMarkdownファイルが無くても勝手に生成されます。というか作っても上書きされちゃいます。上のコンフィグで指定したように、各ページのレイアウトにはTags.vueTag.vueが使用されるため、これらは/.vuepress/theme/layouts/に自分で作成する必要があります。

ここからがブログプラグインのすごいところ。Tagsコンポーネントでは$frontmatterKey.listでタグの一覧やそのタグが付与されている記事の一覧を取得できます。これを使えば、Tags.vueで以下のような記述をするだけでタグ一覧を作成することができます(一部省略)。

<!-- Tags.vue -->
<template>
    <h2>タグ一覧</h2>
    <div>
        <p v-for="tag in $frontmatterKey.list">
        <router-link :to="tag.path">{{ tag.name }}</router-link>
        </p>
    </div>
</template>

/tag/VuePressではthis.$pagination.pagesVuePressタグの付いた記事の一覧を取得できるので、Tag.vueは↓こんな感じ↓にしています。そのページのタグ名は$route.meta.idで取得。

<!-- Tag.vue -->
<template>
    <h2>タグ:{{ $route.meta.id }}の記事一覧</h2>
    <div>
        <p v-for="post in $pagination.pages">
        <router-link :to="post.path">{{ post.title }}</router-link>
        </p>
    </div>
</template>

このサイトのリポジトリ (opens new window)は公開しているので、もっと詳しく知りたい方はぜひご覧ください。Vue歴2日の初心者なので「こういう書き方にしたほうが良いよ」って場合も教えていただけると大変助かります。

# 参考