VuePressカスタマイズ：各記事ページにカテゴリーとタグを表示

記事一覧にはカテゴリーとタグが表示されているのに、記事ページには表示されないので、テーマをカスタマイズして、各記事ページにカテゴリーとタグを表示するようにします。

こんな感じになります。

# テーマモジュールのファイルをコピー

テーマモジュールを変更するのではなく、モジュールのデータをコピーして変更します。

使っているテーマモジュールが、vuepress-theme-meteorlxyなので、

node_modules/vuepress-theme-meteorlxy/lib 内のファイルを、
src/.vuepress/theme にコピーします。

コピー後は以下のようなフォルダ構造になります。

.vuepress
+---theme
    +---components
    +---langs
    +---layouts
    +---plugins
    |   +---blog
    |   \---blog-vuepress
    +---styles
    \---utils

# テーマ修正

結果として、components/PostMeta.vueを以下のように変更しました。
(行頭に+がついてるところを追加しました)

    <template>
    <section class="post-meta main-div">
        <section class="post-date clearfix">
        <span
            v-if="$page.createdAt"
            class="create-date"
        >
            {{ `${$themeConfig.lang.createdAt} : ${$page.createdAt}` }}
        </span>
+       <span
+           v-if="$page.category"
+           class="post-info-item"
+       >
+           <RouterLink :to="$categories.getItemByName($page.category).path">
+           <IconInfo
+               type="category"
+               :title="$page.category"
+           >
+               {{ $page.category }}
+           </IconInfo>
+           </RouterLink>
+       </span>
+
+       <span
+           v-if="$page.tags.length"
+           class="post-info-item"
+       >
+           <IconInfo type="tags">
+           <RouterLink
+               v-for="(tag, i) in $page.tags"
+               :key="tag"
+               :to="$tags.getItemByName(tag).path"
+               :title="tag"
+           >
+               {{ `${tag}${i === $page.tags.length - 1 ? '' : ', '}` }}
+           </RouterLink>
+           </IconInfo>
+       </span>
        <span
            v-if="$page.updatedAt"
            class="update-date"
        >
            {{ `${$themeConfig.lang.updatedAt} : ${$page.updatedAt}` }}
        </span>
        </section>
        <section class="post-links">
        <RouterLink
            v-if="prevPost"
            :to="prevPost.path"
            class="post-link"
        >
            {{ `${$themeConfig.lang.prevPost} : ${prevPost.title}` }}
        </RouterLink>
        <RouterLink
            v-if="nextPost"
            :to="nextPost.path"
            class="post-link"
        >
            {{ `${$themeConfig.lang.nextPost} : ${nextPost.title}` }}
        </RouterLink>
        </section>
    </section>
    </template>
    <script>
+   import IconInfo from './IconInfo.vue'
+
    export default {
    name: 'PostMeta',
+   components: {
+       IconInfo,
+   },
    computed: {
        thisIndex () {
        return this.$posts.indexOf(this.$page)
        },
        prevPost () {
        const nextIndex = this.thisIndex + 1
        return nextIndex > this.$posts.length - 1 ? null : this.$posts[nextIndex]
        },
        nextPost () {
        const prevIndex = this.thisIndex - 1
        return prevIndex < 0 ? null : this.$posts[prevIndex]
        },
    },
    }
    </script>
    <style lang="stylus" scoped>
    @require '~@theme/styles/variables'
    .post-meta
    .post-date
        color lighten($grayTextColor, 50%)
        margin-bottom 1rem
        .create-date
        float left
+       margin-right 0.6em
        .update-date
        float right
+       .post-info-item
+       cursor default
+       &:not(:first-child)
+           margin-left 0.6em
+       a
+           color lighten($grayTextColor, 50%)
+           font-weight normal
+       .icon
+           fill $lightTextColor
    .post-links
        .post-link
        display block
        line-height 1.7
        color lighten($grayTextColor, 20%)
        font-weight normal
        transition all 0.2s
        &:hover
            color $accentColor
    </style>

# PostMeta.vueに行きつくまで

layoutsフォルダで、各記事ページのレイアウトっぽいのを探します。

Post.vueというのが、怪しそうなので中を見ます。

<template>
    <div class="post">
        <PostMeta v-if="meta" />
        <article class="main-div">
        <Content
            :key="$page.path"
            class="post-content content"
        />
        </article>
        <PostMeta v-if="meta" />

<PostMeta>が、メインコンテンツの上下にあるので、これが怪しい。
componentsフォルダを探すと、PostMeta.vueというファイルがあるので、中を見るとこれっぽい！！

# PostMeta.vueを書き換える参考は？

記事一覧で、カテゴリーとタグが表示されているので、それを探す。

components/PostListItem.vueというのがそれっぽいので、カテゴリーとタグの表示部分を、コピペ。

スタイルや、スクリプトも修正して、いい感じに表示するように変更。