VuePress でカテゴリ一覧・タグ一覧ページを作成する

VuePress でカテゴリ一覧・タグ一覧ページの作成方法を紹介したいと思います。 カテゴリもタグも、基本的には同じ作成方法になるので、今回はタグを例にあげて紹介したいと思います。

前提条件

@vuepress/plugin-blog

@vuepress/plugin-blog

こちらのプラグインをインストールします。 このプラグインは、VuePress 本体だけではカバーしきれない、ブログに必要な様々な機能を、こちらのプラグインで補完することができます。 カテゴリ・タグ機能以外にもページネーションなどの便利な機能が入っているので、インストールすることをオススメします。

Most of the planned features in place but there may still be bugs. API may still change until we remove this status tip. Do not use in production yet unless you are adventurous.@vuepress/plugin-blog

⚠ こちらは VuePress 公式のプラグインですが、 2020/01/10 時点ではまだ beta 版となっており、上のようにまだバグがある可能性がある、と書かれています。 僕が使っている分には大丈夫そうなのですが、個人開発以外で使用する目的の場合はご注意ください。

インストールは以下のコマンドで実行することができます。

JavaScript
$ yarn add -D @vuepress/plugin-blog

config.js

以下のように追記し、プラグインを使用可能な状態にします。

JavaScript
module.exports = {
  plugins: [
    //中略
    ["@vuepress/blog"]
  ]
};

さらに、配列の 2 要素目に、以下のように設定を追記していきます。この設定で、/tags にアクセスが会った場合には、タグ一覧表示用の Tags レイアウトコンポーネント、 /[タグ名] でアクセスがあった場合には、タグが付いた記事一覧表示用の Tag レイアウトコンポーネントにルーティングが設定されるようになります。

JavaScript
plugins: [
  // 中略
  [
    "@vuepress/blog",
    {
      frontmatters: [
        {
          id: "tag",
          keys: ["tag", "tags"],
          path: "/blog/tags/",
          layout: "Tags",
          scopeLayout: "Tag"
        }
      ]
    }
  ]
];

タグ一覧ページ用コンポーネントの作成

ルーティングの設定は完了したので、あとはタグ一覧表示用のコンポーネント群を作成すれば完了です。 eject されていることを前提に書くと（eject されていない場合はこちらからどうぞ）、以下のようになります。

Tags.Vue タグ一覧ページ用のレイアウトコンポーネント。タグ一覧コンポーネントを呼び出しているだけです。

JavaScript
// .vuepress/theme/layouts/Tags.Vue (新規作成)
// タグ一覧ページ表示用
//
<template>
  <div>
    <!-- 中略 -->
    <div class="theme-default-content">
      <h2>タグ一覧</h2>
      <TagList />
    </div>
    <!-- 中略 -->
  </div>
</template>

タグ一覧コンポーネントの作成

TagList.vue タグ一覧コンポーネント。タグ一覧ページから呼び出される、タグ一覧コンポーネントです。this.$frontmatterKey.list にタグ情報のオブジェクトが配列として格納されているので、これをループで回してあげることで描画することができます。タグ名が押下されたときは、タグが付いた記事一覧表示用の、Tag.vue に飛ばすようにしています。

JavaScript
<template>
  <div>
    <template v-for="tag in tags">
      <a v-bind:href="tag.path" style="margin-right: 8px;">{{ tag.name }}</a>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    tags() {
      return this.$frontmatterKey.list;
    }
  }
};
</script>

個々の記事(.md)でタグを設定する

タグは、記事 1 つ 1 つのマークダウンファイル内の frontmatter 内で記述します。この記事で言うと、ファイルの最上部にこんな感じにの記載をしてあります。

JavaScript
title: VuePress でカテゴリ一覧・タグ一覧ページを作成する
date: 2020-01-10
category: development
tags:
  - VuePress

以上で、タグ一覧ページの作成が完了です。

SEO 的にも良いと思うので、VuePress をお使いの方はぜひ使ってみてください。

🐈

💁‍♀️ 「タグが付いた記事一覧表示」については、この記事の主題からは外れるので、ここでは詳細は書きませんが、気になる方は公開リポジトリでこのブログのソースコードを公開しているので、こちらを参考にしてみてください。 Tag.vue

（要望が多ければ記事化するかもしれないです。）

不明点あればお気軽にどうぞ。 Twitter で DM いただければ回答できると思います！ 🙌