2018.05.02 2019.01.02

VuePressのレイアウトをカスタマイズ

VuePressのレイアウトをカスタマイズしていく方法を紹介します。

VuePress Vue.js

フロントエンド

[ 目次 ]

はじめに
VuePressのプロジェクトを作成
レイアウト変更

デフォルトThemeをファイル出力

デモ
最後に
修正（2018/10/24）

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

この記事もVuePressを始めると同様に過去に運用していたブログからの移行記事になります。
VuePressのレイアウトをカスタマイズしていく方法になります。

VuePressのプロジェクトを作成

まずは、VuePressのプロジェクトを作成しましょう。

$ mkdir -p custom-layout-vuepress
$ cd custom-layout-vuepress
$ npm install -D vuepress
$ mkdir -p docs
$ echo '# Hello VuePress' > docs/README.md

ここまでは公式ドキュメントと同じですね。

VuePress > Inside an Existing Project

package.jsonは以下のような形で作成します。
Inside an Existing Projectにも記載がありますが、scriptsにdocs:dev、docs:buildを用意します。

{
  "name": "custom-layout-vuepress",
  "version": "1.0.0",
  "description": "customize layout for vuepress",
  "author": "yuuki.nakamura.0828@gmail.com",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^0.8.4"
  }
}

それでは起動

$ npm run docs:dev

http://localhost:8080/ 開くと以下のような画面が表示されます。

screen vuepress default

開発モードでの起動は、ファイルを修正した際に自動でロードし直してくれるので、ブラウザどエディタを行き来しながらサクサクドキュメントを書けるのが嬉しいですね。
ここまでの一覧の流れは、VuePress公式サイトのGetting Startedと同様です。

続いて、.vuepress/config.jsによる設定です。
今回は最終的には以下のような設定ファイルにしました。

$ mkdir -p docs/.vuepress/
$ touch docs/.vuepress/config.js

module.exports = {
    title: 'VLC',
    description: 'VuePressのレイアウトをカスタマイズしてみる',
    locales: {
        '/': {
          lang: 'ja'
        }
    },
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'theme-color', content: '#3eaf7c' }
    ],
    head: [
        ['link', { rel: 'icon', type: 'image/png', href: '/favicon.png' }]
    ],
    port: 8080,
    base: '/',
    serviceWorker: false,
    themeConfig: {
        repo: 'nakanakamu0828/custom-layout-vuepress',
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Blog', link: '/blog/' }
        ],
        sidebar: {
            '/blog/': [
                ''
              ],
        }
    }
}

VuePress公式サイトのConfigurationをご確認ください。

レイアウト変更

VuePress公式サイトのCustom Themesを参考に進めていきます。

デフォルトThemeをファイル出力

以下のディレクトリ構成でデフォルトのThemeを出力し、カスタマイズしていきます。

.
└─ .vuepress
   └─ theme
      └─ Layout.vue

出力するためのコマンドは以下のようになります。
今回はdocs配下がVuePressのドキュメント構成になります。

$ vuepress eject docs

以下のようにdocs/.vuepress/themeフォルダ内にファイルが生成されます。

scree vuepress default theme dirs

基本となるディレクトリ・ファイル達

Layout.vue : ベースになるレイアウトファイル
Home.vue : layout: home画面のレイアウト
Page.vue : layout: page画面のレイアウト
stylesディレクトリ : デフォルトThemeのスタイル（書式はStylusで記載）

themeディレクトリ内のファイルを変更することでカスタマイズできます。
今後はWebデザイナーの方々がカスタマイズしたthemeをnpm化して提供してくれそうですね！

今回は修正したファイル・修正箇所の紹介はしませんが、気になる方はgithubにソースをアップしていますのでご確認ください。以下のような画面に変更しています。

screen vuepress custom 1

screen vuepress custom 2

デモ

今回の修正は以下のリンクからデモ画面が見れます。

~~デモページ~~

※ Netlifyを利用しています。

Githubにソースをアップしています。
ファイルを確認したい方はこちらをご覧ください。

nakanakamu0828/custom-layout-vuepress

最後に

VuePressを始めるに続いてVuePressについての記事になりました。今後の拡張性と利用方法については改めて考えていきたい次第です。
メンター活動をしていますが、初学者に向けてチュートリアルを作成する際に、VuePressが有効活用できるのでは？？っとも考えています。

修正（2018/10/24）

デモページに関しては、サンプルで作ったものなので閉鎖しました。

Nakamu Blog