VuePressを導入してみる〜記事一覧表示編〜

2020/06/21

今回のゴール

前回｢VuePressを導入してみる〜Hello VuePress編〜｣ Hello VuePressするところまではできたが,まだなんの機能もなくブログとしては使い物にならない。最低限,TOPページから記事にアクセスできるようにしたい。
ということで,今回のゴールはTOPページに記事一覧を表示させるところまで。

やること

TOPページのレイアウト設定
プラグイン(ブログ機能)のインストールと設定
記事一覧表示コンポーネントの作成

TOPページのレイアウト設定

1. まずはヘッダー部にサイトのタイトルを表示させる

config.jsを下記のように配置する。

├─ docs
│  ├─ README.md # TOPページ
│  └─ .vuepress # カスタマイズ用のファイルが入るディレクトリ
│     └─ config.js # 設定ファイル ymlやtomlでも書けるらしい…
└─ package.json

config.jsファイルを編集していきます。

module.exports = {
  title: 'bellbellbell.info', // サイトのタイトル
  description: 'ITエンジニアの日々のアウトプットとか考えとかとか…' // サイトの説明を記述できます
}

Image from Gyazo
開発サーバを起動させて,TOPページ(README)を開いてみると,こんな感じでヘッダー部にタイトルが表示されるようになりました。
description の表示がないですね。

2. TOPページのレイアウトを設定する

README.mdファイルを編集します。
公式ドキュメントの内容をそのままREADME.mdファイルの一番上へベタっと貼り付けてみる…

---
home: true
heroImage: /hero.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded`
footer: MIT Licensed | Copyright © 2018-present Evan You
---
# Hello VuePress

Image from Gyazo
なんかいい感じにレイアウトしてくれてます。
いろいろできそうな雰囲気がプンプンしてきますけど,今回の目的はTOPページに記事一覧を表示させるなので,不要な部分を消していきます。
最終的にはこんな感じでほとんど消しちゃいました。

---
home: true # ホームのレイアウトを適用
heroText: # 値を空(null)にしておくと表示されなくなる。項目自体を消すとデフォルト値(title)が表示される
tagline: 記事一覧 # サブタイトル
footer: Copyright © 2020-present Kohe # フッター
---
# Hello VuePress

Image from Gyazo
でだいぶスッキリ。
あとはここに記事が表示されればゴール。

ちなみに---で囲まれた部分はYAML形式で書かれていて,Frontmatterと呼ばれるようです。
マークダウンファイルの最上部にこのFrontmatterブロックを記述することでメタ情報を埋め込むことができるみたいです。

プラグイン(ブログ機能)のインストールと設定

1. プラグインのインストール

ターミナル(コマンドプロンプトetc)を開いて,下記コマンドでブログのプラグインをインストールする。

yarn add -D @vuepress/plugin-blog

2. config.jsにプラグインの設定を追加

config.jsファイルを編集して,プラグインを使えるようにする

module.exports = {
  title: 'bellbellbell.info',
  description: 'ITエンジニアの日々のアウトプットとか考えとかとか…',
  plugins: [ '@vuepress/blog' ] // 追加
}

3. ディレクトリ(フォルダ)構成

下記のように,postディレクトリ,記事のマークダウンファイル,componentsディレクトリ,PostList.vueファイルを作成する。

├─ docs
│  ├─ README.md # TOPページ
│  ├─ posts # この配下にあるマークダウンファイルを記事として公開する
│  │  ├─ 記事1.md
│  │  ├─ 記事2.md
│  │  └─ 記事3.md
│  └─ .vuepress # カスタマイズ用のファイルが入るディレクトリ
│     ├─ components # コンポーネントを格納
│     │  └─ PostList.vue # 記事一覧表示コンポーネント
│     └─ config.js # 設定ファイル
└─ package.json

記事一覧では,記事タイトルと投稿日を表示させたいので,マークダウンファイルにはFrontmatterでメタ情報を埋め込んでおきます。

# 例:記事1.md
---
title: VuePressを導入してみる〜記事一覧表示編〜
date: 2020/06/21
---

記事一覧表示コンポーネントの作成

1. コンポーネントの作成

先程作ったPostList.vueファイルを編集していきます。

<template>
  <div>
    <div v-for="post in posts">
      <time>{{ post.frontmatter.date }}</time>
      <a v-bind:href="post.path">{{ post.title }}</a>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    posts() {
      return this.$site.pages
        .filter((page) => page.path.startsWith('/posts/'))
        .sort(
          (a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date)
        );
    },
  },
};
</script>

computedで使用している$siteはVuePressがGlobalComputedとして定義しており,サイト情報が詰められています。
postsディレクトリに入っているマークダウンのみを新しい記事順に表示したいので,computedでfilterとsortを使用して表示用データを取得しています。

2. TOPページにコンポーネント設置

PostList.vueファイルをTOPページに設置します。
README.mdファイルを下記のように編集します。

---
home: true
heroText:
tagline: 記事一覧
footer: Copyright © 2020-present Kohe
---
# Hello VuePress # 削除
<PostList /> # 追加

3. TOPページにアクセス

開発サーバを起動して確認する。 Image from Gyazo
味気ない感じですけど,ひとまず目標のTOPページに記事一覧を表示させるところまでできました。

まとめ

最低限ではあるけどブログの体裁が整いました。
次回はデフォルトテーマをカスタマイズしてわかりやすく,使いやすいブログにしていきます。