概要
-
VuePressはmarkdownで書いたコンテンツからWebページを生成できるライブラリです
- VuePressの使い方は前に書いた記事があるのでよかったらそちらもご覧ください
- VuePressには公式で用意されているプラグイン10個ありますが、具体的にどんなことができるのかあまり詳細にかかれていません
- なので今回は10個全部試してみたので使い方を紹介します
目次
- active-header-links
- back-to-top
- blog
- google-analytics
- last-updated
- medium-zoom
- nprogress
- pwa
- register-components
- search
active-header-links
概要
- ページをスクロールした時にサイドバーの目次の現在表示されている部分がアクティブになるというものです
- さわった感じデフォルトで有効化されているようです(VuePress1.4.0)
back-to-top
概要
- 画面の右下に一番上までスクロールして戻れるボタンを表示できます
使い方
- インストール
yarn add -D @vuepress/plugin-back-to-top
- 設定を追加
docs/.vuepress/config.js
module.exports = {
// ...
// 他の設定
// ...
plugins: ['@vuepress/back-to-top'],
}
blog
概要
- 他のプラグインと比べてできることがとても多く追いきれませんでした。。勉強して追記します。。
- 専用の公式サイトもあるのでそちらをご参照ください
- ざっくりできることとしては、ページのURL構造をカスタマイズしたりページネーションの設定をできるようです
使い方
- インストール
yarn add -D @vuepress/plugin-blog
- 設定を追加
docs/.vuepress/config.js
module.exports = {
// ...
// 他の設定
// ...
plugins: [
[
'@vuepress/blog',
{
// オプション
},
],
],
}
google-analytics
概要
- Google Analyticsのセットアップを行うことができます
- 非常に簡単でとても便利です！
使い方
- インストール
yarn add -D @vuepress/plugin-google-analytics
- 設定を追加
docs/.vuepress/config.js
module.exports = {
// ...
// 他の設定
// ...
plugins: [
[
'@vuepress/google-analytics',
{
ga: 'UA-123456789-1', // 自身のトラッキングIDを設定
},
],
],
}
last-updated
概要
- ページの最終更新日時を表示することができます
- 日時は該当するmdファイルのgitの最終コミット時間から取得しているようです
- 日付のフォーマットは変更できます
使い方
- インストール
- VuePress本体に同梱されているので追加インストールは不要です
- 設定を追加
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
概要
- 画像をズームして表示することができます
- 内部的にはmedium-zoomが使われています
使い方
- インストール
yarn add -D @vuepress/plugin-medium-zoom
- 設定を追加
docs/.vuepress/config.js
module.exports = {
// ...
// 他の設定
// ...
plugins: ['@vuepress/medium-zoom'],
}
nprogress
概要
- 通信中に画面上部にプログレスバーを表示します
- デフォルトで有効化されています
- デフォルトではアクティブなリンクなどに適用される色と同じ色で表示されます
使い方
- 色を指定する場合
docs/.vuepress/styles/palette.styl
$accentColor = #28A6CF // デフォルトでは$accentColorがプログレスバーの色になる
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$nprogressColor = #55C501 // $nprogressColorを指定するとプログレスバーの色をカスタマイズできる
pwa
概要
- ServiceWorkerを有効化しホームスクリーンへの追加やオフライン対応などを行うことができる
- キャッシュが効くようになるため最新のコンテンツがある場合はRefreshを促すプロンプトも出してくれる
使い方
- インストール
yarn add -D @vuepress/plugin-pwa
- 設定を追加
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を作成
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
概要
- 独自のVueコンポーネントを登録して利用できるようになる
- デフォルトで有効化されている
- コンポーネントは
docs/.vuepress/componentsに配置する
使い方
- コンポーネントを作成
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コンポーネントを呼び出す
docs/index.md
# Index
<Hello />
search
概要
- ドキュメントの検索をすることができます
- デフォルトで有効化されています
まとめ
- 勢いで全部調べてしまえと思いましたが意外と大変でした
- 小さな便利機能から手の混んだものまでいろいろありました
- 一度使い方を覚えてしまえば使い回せるのでうまく活用していきたいです
コード
- 動作確認に使ったコードはそれぞれブランチを切ってこちらのリポジトリに置いてあります