VuePress のテーマ開発

開発方法

ゼロから開発するのであれば、公式のドキュメントに従ってtheme/Layout.vueを起点に作っていく。 しかしゼロから作るのは大変なので、デフォルトのテーマを改変する形でカスタマイズした方法をまとめる。

シンプルな方法

デフォルトのテーマを構成するファイル群は以下のコマンドで生成できる。

$ vuepress eject <dir>

ただカスタマイズしたいのであればこのコマンドを自分のプロジェクトで実行したらいい。 しかし、こちらの方法だとデフォルトのテーマの更新を反映させることができない。

オリジナルをマージしつつカスタマイズする方法

デフォルトのテーマは VuePress のリポジトリ内で更新されている。そのため、更新を反映させながらカスタマイズするためにはリポジトリをフォークして開発する必要がある。

テーマの利用方法

自分のプロジェクトで利用するテーマを指定するときは、theme/配下にテーマ用のファイルを置くか、第三者がnpmで公開しているのパッケージ名をconfigで指定する必要がある。 しかし、VuePressをフォークしてテーマを開発すると、プロジェクト外にテーマのファイルが存在することになるため、自分のプロジェクトでそのテーマを利用できない。

自分のプロジェクトの/docs/.vuepress/themeがvuepressリポジトリのtheme-defaultへ向くようにシンボリックリンクを作成することで開発しているテーマを自分のプロジェクトから利用可能になる。 扱うリポジトリが2つになってしまうデメリットがあるが、変更箇所をリアルタイムに手元で試しながら開発できる。もっといい方法があったら教えてほしい…。

Tips

pallete.styl

1.xではアクセントカラーなどを記述したスタイルのファイルがテーマのフォルダ外に移動されている。 こちらを編集してもシンボリックリンク外なので反映されない。 1.x ではデフォルトの色設定などをカスタマイズするときにはtheme/pallete.stylを自分で作成する必要がある。 theme/pallete.stylにデフォルトの色設定などをコピペしてから編集すれば上記のシンボリックリンクを利用した開発方法でもカスタマイズできるようになる。