VuePress/blogでブログ開設！使い方講座｜構成編

VuePressは公式以外の情報が少ない。

VuePressでブログを開設したいけどやり方が分からない。

そういった方に向けて運用段階まで作成したので、Tipsを共有します！！

vuepressのバージョン

当ブログサイトは以下のバージョンで構築しています。

"@vuepress/plugin-blog": "^1.9.4"
"vuepress": "^1.5.3"

vuepressのディレクトリ構成

以下がVuePressとplugin-blogの関連したディレクトリ構成です。

src
├─ ._posts　　　　　　　    各記事 Markdown
│  └─ category
│     └─ page.md          
└─ .vuepress
   ├─ components           記事用コンポーネント vue
   │  └─ Component.vue    
   ├─ public
   │  └─ img.jpg
   ├─ theme
   │  ├─ components　　　　 コンポーネント vue
   │  │  └─ Component.vue 
   │  ├─ layouts　　　　　  コンポーネント vue
   │  │  └─ Layout.vue    
   │  └─ styles
   │     └─ style.styl
   ├─ config.js　　　　　　vuepress設定 js
   └─ enhanceApp.js       vueのプラグイン js

構築時に重要なのがconfig.js・enhanceApp.js・theme/で
運用時はposts・publicが重要です。

今回の記事で取り上げるのは構築時に必要なconfig.js・enhanceApp.js・ theme/ の３つです。
config.jsでサイトのpathを設定し、theme/ 以下で描画・処理を記述するイメージでOKです。

config.js

config.jsはVuePressとplugin-blogの設定ファイルです。

module.exports = {
  locales: {
    '/': { lang: 'ja' }
  },
  title: 'Title(config.js)',

  plugins: [[
    '@vuepress/blog',
    {directories: [
      {
        id: 'home',
        dirname: 'home',
        path: '/',
      },
      {
        id: 'tech',
        dirname: '_posts/tech',
        path: '/tech/',
        itemPermalink: '/tech/:slug'
      }
    ],
    frontmatters: [
      {
        id: "tag",
        keys: ["tag"],
        path: "/tag/",
        layout: "Tag",
        scopeLayout: "Tag"
      },
    ],},
  ]]
}

locales

サイト全体のデフォルト言語設定します。
このサイトを見てる方は大体はデフォルト言語は日本語だと思うので上記の設定でOKです。

title

サイトタイトルとして使用します。
vueファイルで $siteTitleと記述すると、titleが参照できるようになっています。

plugins

VuePressのプラグインを設定する箇所です。
@vuepress/blogを記述している階層にVuePressのプラグインを入れていきます。

プラグインのオプションを記述するときは上記のように配列に追加すればOKです。
※詳細は各プラグインのドキュメントを！

plugins/directories

pathのディレクトリ構成を設定する箇所です。
私はカテゴリ構成をそのままpathにしたかったので、directoriesの配列をカテゴリ毎に設定してます。

{
  id: 'tech',
  dirname: '_posts/tech',       該当カテゴリの記事を置くファイルPath
  path: '/tech/',               /tech/{{記事のpath}}
  itemPermalink: '/tech/:slug'　{{記事のpath}}のフォーマット。:slugは日付を除いたファイル名
}

この構成のデメリットとはdirname: '_posts/tech/～'の設定はtech止まりで孫まで参照してくれないです。
つまりカテゴリは子まででしか出来ません。

itemPermalinkは日付とその他でフォーマットを設定できます。
私は日付をPathに含みたくなかったのでその他のみに設定しました。

plugins/frontmatters

サイトのタグを設定する箇所です。

{
  id: "tag",
  keys: ["tag"], Markdownのfrontmatterに設定するKey
  path: "/tag/",
  layout: "Tag",
  scopeLayout: "Tag"
}

frontmattersを設定するとルートに $tagと $currentTagが生成されます。

$tagは同じタグが付いているページの情報Listが入っています。
tag一覧のページを作成するときは $tagを参照すると便利です。

$currentTagは対象の記事を表示すると $currentTag内に以下の情報が入ってます。

現在のページの`$currentTag`オブジェクト内
key: "Vue"
pageKeys: ["xxxxxx"]
pages: [{...}]
path: "/tag/Vue/"
scope: "tag"

enhanceApp.js

enhanceApp.jsは通常のvue pluginを入れる設定ファイルです。
通常のVueプラグインを入れるときと同じ様に設定したらOKです。

import VScrollLock from 'v-scroll-lock'

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  Vue.use(VScrollLock)
}

theme

themeは記事以外のvueファイルとcssを管理しています。
VuePressをインストールしただけでは出力されていないので、npm run ejectのコマンドを叩くと.vuepressディレクトリに出力されます。

以下は出力したファイルです。

theme
├── `global-components`
│   └── xxx.vue
├── `components`
│   └── xxx.vue
├── `layouts`
│   ├── Layout.vue _(**Mandatory**)_
│   └── 404.vue
├── `styles`
│   ├── index.styl
│   └── palette.styl
├── `templates`
│   ├── dev.html
│   └── ssr.html
├── `index.js`
├── `enhanceApp.js`
└── package.json

画面パーツの編集・追加はcomponents以下
css系はvueファイル内もしくはstyles以下で設定します。