# VuePress にカテゴリー一覧ページを追加

# ブログプラグインの設定

# インストール

$ npm install -D @vuepress/plugin-blog

# 設定

// src/.vuepress/config.js

module.exports =
  ...
  plugins: [
    "@vuepress/blog",
  ]
};

# ブログに Category を設定

Markdownファイル の先頭に、下記のように書くと設定できる。

<!-- src/_posts/blog/2019/02/17 -->

---

title: VuePress にカテゴリー一覧を追加
date: 2019-02-17
description: VuePress にカテゴリー一覧を追加した。
tags:

- VuePress
- blog

---

...

# カテゴリー一覧

this.$categories.list でカテゴリー一覧を取得できる。

# 投稿の多いカテゴリー順に並び替える

return this.$categories.list.sort((x, y) => y.posts.length - x.posts.length);

# CategoriesList コンポーネント

<!-- src/.vuepress/components/CategoriesList.vue -->

<template lang="pug">
  .categories-list
    ul.categories(v-for="category in categories")
      li
        a(v-bind:href="category.path") {{ category.name }} ({{ category.posts.length }})
</template>

<script>
export default {
  computed: {
    categories() {
      return this.$categories.list.sort(
        (x, y) => y.posts.length - x.posts.length
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.categories-list {
  .categories {
    margin: 3px 0;
    font-size: 18px;

    &:first-child {
      margin-top: 15px;
    }
  }
}
</style>

# CategoriesList を呼ぶ

<!-- src/pages/categories.md -->

---

sidebar: false
title: Categories
description: カテゴリー一覧
permalink: /categories

---

# Categories

<CategoriesList />

http://xxxx/categories/ にアクセスするとカテゴリー一覧が見れる。

Categories ページ

# Layout

blog/Categories.vue at master · tohutohu/blog · GitHub のように、レイアウトを作って対応するようにしたい。

今回は、レイアウトの使い方がよくわからなかったので、コンポーネントを作成して、Markdwon ファイルで呼ぶようにした。

# 参考