HomePortfolioNotesAbout

← Notes

VuePressでブログ機能を使う


2018.10.28

VuePressのv1.0.0-alphaにはプラグイン機能やブログ機能が実装されている. まだ正式版ではないため仕様が変わる可能性があるが,一旦使ってみることにした.

準備

まずnodeのプロジェクトを作成し,VuePressとblogプラグインをインストールする.

$ yarn init
$ yarn add vuepress@next -D
$ yarn add @vuepress/plugin-blog

.vuepress/config.jsにプラグインの使用を宣言する.

{
  ...,
  plugins: ['@vuepress/blog'],
  ...
}

これだけでブログ機能が有効になるのだが,blogプラグインが/のパスに対してLayout.vueを要求する実装になっているため,エラーがでる.

そのため,.vuepress/theme/layouts/Layout.vueを作成する.

<template>
  <Content/>
</template>

記事にカテゴリ,タグを適用する

記事にカテゴリやタグを適用するのは簡単で,MarkdownのFrontmatterに記載すれば良い.

---
title: 猫の写真展に行ってきました
category: 雑記
tag: 猫
---
以下,本文

複数のカテゴリやタグを適用することもできる.

---
title: 猫の写真展に行ってきました
categories:
  - 雑記
  - イベント
tags:
  - 猫
  - 写真展
---
以下,本文
カテゴリとタグについて

現状のところ,カテゴリとタグに機能的な差異はないため,カテゴリをタグのように使用することも,タグをカテゴリのように使用することもできる. また,カテゴリを階層化することができない. ただし,今後は明確に差別化される可能性もあるため,カテゴリとタグは正しく運用しておいたほうが良い.

カテゴリのルートページを作成する

タグの説明について

これ以降,タグについて,要領はカテゴリと同じため,カテゴリについてのみ記載する. タグの場合は,categoryはtag,categoriesはtagsと読み替える必要がある.

/category/には特別なルーティングが設定されており, これを利用してカテゴリ一覧(タグ一覧)のようなページを作成することができる.

$categoriesの中に全てのカテゴリ情報が格納されているので,これを利用する. .vuepress/theme/layouts/Categories.vueを作成する.

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

選択されたカテゴリのページを作成する

各カテゴリのページのURLは/category/{category}.htmlになる. これに対応するレイアウトファイルは.vuepress/theme/layouts/Category.vueである.

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="p in $category.posts"><a :href="p.path">{{p.title}}</a></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    data () {
      return {
      }
    },
    computed: {
      title () {
        // カテゴリ名は$categoryには設定されない
        return this.$categories.list.filter(t => t.path === this.$category.path)[0].name
      }
    }
  }
</script>
カテゴリ名は $category には設定されない

カテゴリ名は$categoryには存在しないため,$categoriesから検索する必要がある.

記事名について

記事名は取得できないため,Frontmatterにtitleとして設定しておくと良い.

記事ページを作成する

記事ページは.vuepress/theme/layouts/Post.vueでコントロールできる. ページに設定されているカテゴリとタグにリンクするようにしてみた.

<template>
  <div>
    <Content/>
    <hr/>
    <span>Categories:</span>
    <ul>
      <li v-if="$page.frontmatter.category">
        <a :href="`/category/${$page.frontmatter.category}.html`">{{$page.frontmatter.category}}</a>
      </li>
      <li v-if="$page.frontmatter.categories" v-for="category in $page.frontmatter.categories">
        <a :href="`/category/${category}.html`">{{category}}</a>
      </li>
    </ul>
    <span>Tags:</span>
    <ul>
      <li v-if="$page.frontmatter.tag">
        <a :href="`/tag/${$page.frontmatter.tag}.html`">{{$page.frontmatter.tag}}</a>
      </li>
      <li v-if="$page.frontmatter.tags" v-for="tag in $page.frontmatter.tags">
        <a :href="`/tag/${tag}.html`">{{tag}}</a>
      </li>
    </ul>
  </div>
</template>

 Tech VuePress

Built with GatsbyJS.  Designed by gatsby-minimal-portfolio-blog