【VuePress】Official Plugins10個でできること

## 概要

- [VuePress](https://vuepress.vuejs.org/)はmarkdownで書いたコンテンツからWebページを生成できるライブラリです
    - VuePressの使い方は[前に書いた記事](https://qiita.com/ozaki25/items/a1988b01f83f6616b7f9)があるのでよかったらそちらもご覧ください
- VuePressには公式で用意されているプラグイン10個ありますが、具体的にどんなことができるのかあまり詳細にかかれていません
    - なので今回は10個全部試してみたので使い方を紹介します

## 目次

- [active-header-links](#active-header-links)
- [back-to-top](#back-to-top)
- [blog](#blog)
- [google-analytics](#google-analytics)
- [last-updated](#last-updated)
- [medium-zoom](#medium-zoom)
- [nprogress](#nprogress)
- [pwa](#pwa)
- [register-components](#register-components)
- [search](#search)

## active-header-links

- https://vuepress.vuejs.org/plugin/official/plugin-active-header-links.html

### 概要

- ページをスクロールした時にサイドバーの目次の現在表示されている部分がアクティブになるというものです
- さわった感じデフォルトで有効化されているようです(VuePress1.4.0)

![active-header-links.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/54f7e664-ed47-c3f3-fd1a-318fabf8116f.gif)

## back-to-top

- https://vuepress.vuejs.org/plugin/official/plugin-back-to-top.html

### 概要

- 画面の右下に一番上までスクロールして戻れるボタンを表示できます

![back-to-top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/6653f650-351d-b9fe-a959-35d0949bd3de.gif)

### 使い方

- インストール

```sh
yarn add -D @vuepress/plugin-back-to-top
```

- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  plugins: ['@vuepress/back-to-top'],
}
```

## blog

- https://vuepress.vuejs.org/plugin/official/plugin-blog.html

### 概要

- 他のプラグインと比べてできることがとても多く追いきれませんでした。。勉強して追記します。。
- 専用の公式サイトもあるのでそちらをご参照ください
    - https://vuepress-plugin-blog.ulivz.com/
- ざっくりできることとしては、ページのURL構造をカスタマイズしたりページネーションの設定をできるようです

### 使い方

- インストール

```sh
yarn add -D @vuepress/plugin-blog
```

- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  plugins: [
    [
      '@vuepress/blog',
      {
        // オプション
      },
    ],
  ],
}
```

## google-analytics

- https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html

### 概要

- Google Analyticsのセットアップを行うことができます
    - 非常に簡単でとても便利です！

### 使い方

- インストール

```sh
yarn add -D @vuepress/plugin-google-analytics
```

- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        ga: 'UA-123456789-1', // 自身のトラッキングIDを設定
      },
    ],
  ],
}
```

## last-updated

- https://vuepress.vuejs.org/plugin/official/plugin-last-updated.html

### 概要

- ページの最終更新日時を表示することができます
    - 日時は該当するmdファイルのgitの最終コミット時間から取得しているようです

<img width="723" alt="last-updated.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/8660746c-6715-9a1c-bfb2-9bff05313145.png">

- 日付のフォーマットは変更できます

<img width="223" alt="last-updated-format.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/f3fc12a2-88be-253b-31ff-403e8b413f1d.png">


### 使い方

- インストール
    - VuePress本体に同梱されているので追加インストールは不要です
- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  plugins: [
    [
      '@vuepress/last-updated',
      // フォーマットを変更したい時に設定(dayjsを使った例)
      {
        transformer: (timestamp, lang) => {
          return dayjs(timestamp).format('YYYY/MM/DD H時m分');
        },
      },
    ],
  ],
}
```

## medium-zoom

- https://vuepress.vuejs.org/plugin/official/plugin-medium-zoom.html

### 概要

- 画像をズームして表示することができます
    - 内部的には[medium-zoom](https://medium-zoom.francoischalifour.com/)が使われています

![medium-zoom.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/d2a47550-5ce6-3782-b8f3-d6ec9bc6253d.gif)

### 使い方

- インストール

```sh
yarn add -D @vuepress/plugin-medium-zoom
```

- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  plugins: ['@vuepress/medium-zoom'],
}
```

## nprogress

- https://vuepress.vuejs.org/plugin/official/plugin-nprogress.html

### 概要

- 通信中に画面上部にプログレスバーを表示します
    - デフォルトで有効化されています
    - デフォルトではアクティブなリンクなどに適用される色と同じ色で表示されます

![nprogress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/f75ff905-4e6a-9049-f697-d86745034f49.gif)

### 使い方

- 色を指定する場合

```js:docs/.vuepress/styles/palette.styl
$accentColor = #28A6CF // デフォルトでは$accentColorがプログレスバーの色になる
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$nprogressColor = #55C501 // $nprogressColorを指定するとプログレスバーの色をカスタマイズできる
```

## pwa

- https://vuepress.vuejs.org/plugin/official/plugin-pwa.html

### 概要

- ServiceWorkerを有効化しホームスクリーンへの追加やオフライン対応などを行うことができる

<img width="654" alt="スクリーンショット 2020-03-27 3.59.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/b17867c6-5318-7c6c-5597-d14ff962cad8.png">

- キャッシュが効くようになるため最新のコンテンツがある場合はRefreshを促すプロンプトも出してくれる

<img width="668" alt="スクリーンショット 2020-03-27 3.49.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/1fbde98d-384a-0cb1-faae-95124a8c5a06.png">


### 使い方

- インストール

```sh
yarn add -D @vuepress/plugin-pwa
```

- 設定を追加

```js:docs/.vuepress/config.js
module.exports = {
  // ...
  // 他の設定
  // ...
  head: [
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
  plugins: [
    [
      '@vuepress/pwa',
      {
        serviceWorker: true,
        updatePopup: true,
      },
    ],
  ],
}
```

- アイコン画像を配置
    - サイズは288x288
    - `docs/.vuepress/public/icon.png`
- manifest.jsonを作成

```json:docs/.vuepress/public/manifest.json
{
  "short_name": "Qiita Sample",
  "name": "Qiita Sample",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "512x512 384x384 192x192 152x152 144x144 128x128 96x96 72x72 64x64 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#55C501",
  "background_color": "#ffffff"
}
```

## register-components

- https://vuepress.vuejs.org/plugin/official/plugin-register-components.html

### 概要

- 独自のVueコンポーネントを登録して利用できるようになる
    - デフォルトで有効化されている
    - コンポーネントは`docs/.vuepress/components`に配置する

<img width="826" alt="スクリーンショット 2020-03-27 4.06.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/1d54818a-f034-e5cc-eff5-bd568c476e34.png">

### 使い方

- コンポーネントを作成

```vue:docs/.vuepress/components/Hello.vue
<template>
  <p>{{ greeting }} Vue Component!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>
```

- markdownの中からVueコンポーネントを呼び出す

```md:docs/index.md
# Index

<Hello />

![logo](/images/logo.png)
```

## search

- https://vuepress.vuejs.org/plugin/official/plugin-search.html

### 概要

- ドキュメントの検索をすることができます
- デフォルトで有効化されています

![search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/eb60708c-ebc1-de86-6519-8118f2adb30b.gif)

## まとめ

- 勢いで全部調べてしまえと思いましたが意外と大変でした
- 小さな便利機能から手の混んだものまでいろいろありました
- 一度使い方を覚えてしまえば使い回せるのでうまく活用していきたいです

## コード

- 動作確認に使ったコードはそれぞれブランチを切ってこちらのリポジトリに置いてあります
    - https://github.com/ozaki25/vuepress-plugins-sample/branches