VuePress にカテゴリー一覧ページを追加
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/ にアクセスするとカテゴリー一覧が見れる。
カテゴリー から、Tags - hene.dev に変更しました。
Layout
blog/Categories.vue at master · tohutohu/blog · GitHub のように、レイアウトを作って対応するようにしたい。
今回は、レイアウトの使い方がよくわからなかったので、コンポーネントを作成して、Markdwon ファイルで呼ぶようにした。
