世界を旅して暮らしたい放浪エンジニアブログ

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

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

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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にも記載がありますが、scriptsdocs:devdocs: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)

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

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts