# VuePress に blog の機能を追加していく
# はじめに
2019.05.03 現在の最新の VuePress のバージョンは 0.14.9 です。
今回 blog のプラグインを入れる場合は 1 系の VuePresss を入れる必要があります。
自分の環境は1.0.0-alpha.47ですので、それに準拠した形で進めていきます。
ちなみに現在@next でインストールされる最新のバージョンも1.0.0-alpha.47です。
目次
# Blog 用の Plugin を追加
まずは VuePress を通常入れる 0 系から 1 系の VuePress にしてから作業を始めます。
yarn add vuepress@next -D
yarn add @vuepress/plugin-blog -D
それぞれアルファバージョンのものがインストールされるかと思います。
ここでどちらかのバージョンが合わないとうまく動作しないので気をつけてください。
# theme を更新していく
単に blog のプラグインを入れただけだとうまく動作はしません。
そのためデフォルトテーマを修正していきます。
下記のコマンドをターミナルにコピペして、実行するとデフォルトテーマをコピーしたよという旨のメッセージが出るかと思います。
npx vuepress eject app
出てくるメッセージ ↓
success Copied default theme into userのvuepressのpass/app/.vuepress/theme.
ここで該当の箇所にデフォルトテーマがコピーされます。
ちなみに自分の場合は src ファイル以下を作業環境にしているので、このタイミングで src フォルダに theme を移動しています。
WARNING
なおテーマを変更していくと今後のアップデートの際に問題が発生する可能性もありますので、自己責任で行ってください。
# 必要なファイルを作成する
コピーしたテーマファイルの中に以下のファイルを追加します。
vue-press-blog
└─ src
└─ .vuepress
└─ theme
└─ layouts
├─ + Categories.vue
├─ + Category.vue
├─ + Page.vue
├─ + Tag.vue
└─ + Tags.vue
それぞれのページのなかを以下のように変更します。 記事の frontmatter のなかに以下のようにデータを入れておくと $cotegories,$tags のなかにそれぞれデータが入ります。
categories:
- tech
tags:
- VuePress
- plugin
VueDevTools の中でも入っていることを確認できるかと思います。
Categories.vue
<div class="page">
<div class="content default">
<h2>カテゴリー一覧</h2>
<div>
<div v-for="(data, key) in $categories.map" :key="key">
<router-link :to="data.path"
>{{ key }}({{ data.posts.length }})</router-link
>
</div>
</div>
</div>
</div>
Category.vue
<div class="page">
<div class="content default">
<h2>カテゴリー: {{ $route.meta.categoryName }}の記事一覧</h2>
<Articles :pages="$category.posts" prefix="/" />
</div>
</div>
タグのファイルに関してはほぼ一緒なのでここでは割愛します。
# そのほか諸々
# font awesome の追加
カテゴリーやタグを追加しましたが、一覧で見たときにどちらがカテゴリーなのかタグなのか一瞥してわかりづらくなりました。 文字でカテゴリーやタグと記載しても構いませんが、視覚的によりわかりやすい方法を取りたいと思います。 アイコンフォントとして fontawesome を導入します。
これも非常に簡単です。
config.js の head の項目に以下を記載して、リンクファイルとして呼び出します。
head: [
['link', {
href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css',
rel: 'stylesheet'
}]
]