Vuepress 1.0.0-alpha.47 -> 1.0.1 へアップデート(2)

Vuepress 1.0.0-alpha.47 -> 1.0.1 へアップデート(1) - hene.dev の続き

アップデート

前回、$ yarn upgrade vuepress で vuepress のバージョンだけ上げたので、今回はそれ以外もバージョンを上げました。

$ yarn upgrade

blog-plugin の設定

下記のように変更しました。

src/.vuepress/config.js

     // lastUpdated: true
   },
   plugins: [
-    "@vuepress/blog",
     [
-      "sitemap",
+      "@vuepress/blog",
       {
-        hostname: url,
-        changefreq: "weekly"
-      }
-    ],
-    [
-      "@vuepress/google-analytics",
+        directories: [
+          {
+            id: "blog",
+            dirname: "_posts",
+            path: "/blog/",
+            itemPermalink: "/blog/:year/:month/:day/:slug"
+          }
+        ],
+        sitemap: [
+          {
+            hostname: url,
+            changefreq: "weekly"
+          }
+        ]
+      },
       {
-        ga: "UA-00000000-0"
+        "@vuepress/google-analytics": [
+          {
+            ga: "UA-00000000-0"
+          }
+        ]
       }
     ]
   ]

Fix

google-analytics の設定を間違っていたので、修正しました。

計測できてなかった・・・

src/.vuepress/config.js

         ]
       },
+      "@vuepress/google-analytics",
       {
-        "@vuepress/google-analytics": [
-          {
-            ga: "UA-00000000-0"
-          }
-        ]
+        ga: "UA-00000000-0"
       }
     ]
   ]

まだ間違えてた・・・

         ]
-      },
+      }
+    ],
+    [
       "@vuepress/google-analytics",
       {

ここも修正。

             path: "/tag/",
             layout: "BlogList"
           }
-        ],
-        sitemap: [
-          {
-            hostname: url,
-            changefreq: "weekly"
-          }
         ]
       }
     ],
+    [
+      "sitemap",
+      {
+        hostname: url,
+        changefreq: "weekly"
+      }
+    ],
     [
       "@vuepress/google-analytics",
       {

@vuepress/blog になっていたので、 @vuepress/plugin-blog に変更しました。

   },
   plugins: [
     [
-      "@vuepress/blog",
+      "@vuepress/plugin-blog",
       {
         directories: [
           {

tag 対応

category が使えなくなっていたので、 tag を使いました。

src/_posts/blog/2019/06/16/vuepress-update.md など src/_posts/blog/ 配下のファイルの categories: から tags: に変更しました。

 title: Vuepress 1.0.0-alpha.47 -> 1.0.1 へアップデート
 date: 2019-06-16
 description: Vuepress のバージョンを 1.0.0-alpha.47 -> 1.0.1 へアップデートしました。
-categories:
+tags:
   - VuePress
   - yarn
 ---

tag の設定

src/.vuepress/config.js

             itemPermalink: "/blog/:year/:month/:day/:slug"
           }
         ],
+        frontmatters: [
+          {
+            id: "tag",
+            keys: ["tag", "tags"],
+            path: "/tag/",
+            layout: "CategoriesList"
+          }
+        ],
         sitemap: [
           {
             hostname: url,

BlogList 変更

src/.vuepress/components/BlogList.vue(変更後)

<template lang="pug">
  main.blog-list
    .content
      h1
        a.header-anchor(href="#blog" aria-hidden="true") #
        | {{ title }}
      .blog(v-for="post in posts")
        p.blog-date {{ date(post.frontmatter.date) }}
        h2.blog-title
          a(v-bind:href="post.path") {{ post.title }}
        .blog-tags
          a.blog-tag(v-for="tag in post.frontmatter.tags" :href="'../../tag/' + tag + '/'") {{ tag }}
</template>

<script>
export default {
  computed: {
    isAllPosts() {
      return (
        this.$page.path === "/blog/" || typeof this.$currentTag === "undefined"
      );
    },
    title() {
      return this.isAllPosts ? "Blog" : `Blog${this.$currentTag.path}`;
    },
    tagPosts() {
      return this.$currentTag.pages
        .filter(post => post.regularPath.startsWith("/_posts/blog/"))
        .sort(
          (x, y) => new Date(y.frontmatter.date) - new Date(x.frontmatter.date)
        );
    },
    allPosts() {
      return this.$site.pages
        .filter(post => post.regularPath.startsWith("/_posts/blog/"))
        .sort(
          (x, y) => new Date(y.frontmatter.date) - new Date(x.frontmatter.date)
        );
    },
    posts() {
      return this.isAllPosts ? this.allPosts : this.tagPosts;
    }
  },
  methods: {
    date(postDate) {
      const date = new Date(postDate);
      const yyyy = date.getFullYear();
      const MM = ("0" + (date.getMonth() + 1)).slice(-2);
      const dd = ("0" + date.getDate()).slice(-2);
      return [yyyy, MM, dd].join("/");
    }
  }
};
</script>

<style lang="scss" scoped>
.blog-list {
  .content {
    .blog {
      padding-bottom: 35px;

      .blog-date {
        color: #b7b3b2;
        font-size: 14px;
        margin: 0 0 3px 0;
      }

      .blog-title {
        margin: 0 0 10px;
      }

      .blog-tags {
        display: flex;
        flex-wrap: wrap;

        .blog-tag {
          color: #ff7b17;
          line-height: 16px;
          padding: 5px 10px;
          margin: 0 5px 5px 0;
          text-decoration: none;
          border-radius: 3px;
          background-color: #ffffff;
          border: 1px solid #ff7b17;
          transition: 0.3s;

          &:hover {
            color: #ffffff;
            background-color: #ff7b17;
          }
        }
      }
    }
  }
}
</style>

CategoriesList から TagsList に変更

src/.vuepress/components/TagsList.vue(変更後)

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

<script>
export default {
  computed: {
    tag_names() {
      return Object.keys(this.$tag._metaMap);
    },
    tags() {
      return this.tag_names
        .map(
          tag_name =>
            [
              {
                name: tag_name,
                path: this.$tag._metaMap[tag_name].path,
                length: this.$tag._metaMap[tag_name].pages.length
              }
            ][0]
        )
        .sort((x, y) => y.length - x.length);
    }
  }
};
</script>

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

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

src/pages/blog/tags.md(変更後)

<TagsList /> で、上の src/.vuepress/components/TagsList.vue を呼び出しています。

permalink の部分で、 https://hene.dev/blog/tags にアクセスすると、このマークダウンファイルで設定した内容が表示されるようになっています。

---
sidebar: false
title: Tags
description: タグ一覧
permalink: /blog/tags
---

# Tags:dart:

<TagsList />

変更後の config.js

src/.vuepress/config.js

const url = "https://hene.dev/";

module.exports = {
  title: "hene",
  description: "ブログ",
  head: [
    // ["link", { rel: "icon", type: "image/png", href: "/favicon.png" }],
    ["meta", { name: "keywords", content: "エンジニア, rails, vue, ログ" }],
    ["meta", { name: "og:url", content: url }],
    ["meta", { name: "og:type", content: "website" }],
    ["meta", { name: "og:title", content: "hene" }],
    ["meta", { name: "og:description", content: "ブログ" }],
    // ["meta", { name: "og:image", content: "/og.png" }]
  ],
  locales: {
    "/": {
      lang: "ja",
    },
  },
  meta: [
    { charset: "utf-8" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
  ],
  dest: "release",
  themeConfig: {
    nav: [
      { text: "Blog", link: "/blog/" },
      { text: "Log", link: "/log/" },
      // {
      //   text: "Nav",
      //   items: [{ text: "About", link: "/about/" }]
      // }
    ],
    sidebar: "auto",
    sidebarDepth: 2,
    displayAllHeaders: true,
    // lastUpdated: true
  },
  plugins: [
    [
      "@vuepress/plugin-blog",
      {
        directories: [
          {
            id: "blog",
            dirname: "_posts",
            path: "/blog/",
            itemPermalink: "/blog/:year/:month/:day/:slug",
          },
        ],
        frontmatters: [
          {
            id: "tag",
            keys: ["tag", "tags"],
            path: "/tag/",
            layout: "BlogList",
          },
        ],
      },
    ],
    [
      "sitemap",
      {
        hostname: url,
        changefreq: "weekly",
      },
    ],
    [
      "@vuepress/google-analytics",
      {
        ga: "UA-00000000-0",
      },
    ],
  ],
};

参考

• @vuepress/plugin-blog
• VuePress 1.x
• GitHub - ulivz/vuepress-plugin-blog: Official blog plugin for VuePress
• VuePress 1.x でブログを作ってみる - Qiita