VuePress デフォルトテーマのカスタマイズ（子テーマで拡張）

vuePress 公開日: 2022-04-10 更新: 2022-05-05

子テーマを作成してデフォルトテーマを拡張

docs/.vuepress/theme & docs/.vuepress/theme/layouts ディレクトリを作成

mkdir -p docs/.vuepress/theme/layouts

.vuepress/theme/index.ts ファイルを作成

// .vuepress/theme/index.ts
// 子テーマ ファイル 'layouts/Layout.vue' で、デフォルトテーマを拡張
// https://v2.vuepress.vuejs.org/reference/default-theme/extending
import type { Theme } from '@vuepress/core'
import { defaultTheme } from '@vuepress/theme-default'
import type { DefaultThemeOptions } from '@vuepress/theme-default'
import { path } from '@vuepress/utils'

export const defaltThemeChild = (options: DefaultThemeOptions): Theme => {
  return {
    name: 'defalt-theme-child',
    extends: defaultTheme(options),
    layouts: {
      Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
    },
  }
}

子テーマとなる vueファイルを作成 ~ スロットを利用して拡張

子テーマとなる .vuepress/theme/layouts/Layout.vue ファイルを作成し、デフォルトテーマのLayoutで提供されるスロットを利用して拡張

github- デフォルトテーマ layout.vueopen in new window

// .vuepress/theme/layouts/Layout.vue
// デフォルトテーマのLayoutで提供されるスロットを利用して拡張
<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
</script>

<template>
  <ParentLayout>
    <!-- サイドバーTOPにカスタムコンポーネントを追加 -->
    <template #sidebar-top>
      <CustomSidebarTop />
    </template>
  </ParentLayout>
</template>

<style lang="css">

</style>

サイドバーTOPに表示するコンポーネントファイル "CustomSidebarTop.vue" を追加

// docs/.vuepress/components/CustomSidebarTop.vue
// カスタムサイドバー TOP コンポーネント https://merakiui.com/components/
<script setup lang="ts">
import 'virtual:windi.css'
</script>

<template>
  <div class="flex flex-col py-6 bg-white border-r dark:(bg-gray-800 border-gray-600)">
      <h3 class="text-xl font-semibold text-center text-gray-800 dark:text-white">
        カスタムサイドバーTOP
      </h3>
      <!-- アバター画像, 名前, email -->
      <div class="flex flex-col items-center mt-6">
        <img
          class="object-cover w-32 h-32 mx-2 rounded-full" alt="avatar"
          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
        >
        <h4 class="m-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">
          John Doe
        </h4>
        <p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline">
          john@example.com
        </p>
      </div>
      <!-- ナビ リンク -->
      <div class="flex flex-col justify-between flex-1 mt-6">
        <nav>
          <a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200" href="#">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="mx-4 font-medium">Dashboard</span>
          </a>

          <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="mx-4 font-medium">Accounts</span>
          </a>

          <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="mx-4 font-medium">Tickets</span>
          </a>

          <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="mx-4 font-medium">Settings</span>
          </a>
        </nav>
      </div>
  </div>
</template>

設定ファイルでテーマをデフォルトテーマ拡張（子テーマ） "defaltThemeChild" に指定

// docs/.vuepress/config.ts

// ....
// デフォルトテーマ 拡張 https://v2.vuepress.vuejs.org/reference/default-theme/extending.html#layout-slots
import { defaltThemeChild } from './theme'
import { path } from '@vuepress/utils'

export default defineUserConfig({
  // site config メタデータ
  // ...

  // === theme config ===
  theme: defaltThemeChild({
    // default theme config
    logo: '/images/programing.jpg', // TOPナビゲーションバー ロゴ画像
    // sidebar: false, // false で サイドバー非表示 デフォルト 'auto' (ページヘッダーから自動的に生成)
    // sidebarDepth: 2, // ページヘッダーから自動生成されるサイドバーチルドレンの最大深度 デフォルト 2 = <h2> and <h3> headers
    notFound: ['ページが見つかりませんでした'], // 404ページで表示されるテキスト https://v2.vuepress.vuejs.org/reference/default-theme/config.html#notfound
    backToHome: 'TOPページへ戻る', // 404ページで表示されるTOPページへのリンクテキスト
  }),
  // ...

});

すると、この例だとデフォルトテーマ拡張子テーマ vueファイル theme/layouts/Layout.vue で拡張したカスタムサイドバー TOP コンポーネント "CustomSidebarTop" がサイドバー上部に追加される

VuePress デフォルトテーマのカスタマイズ（子テーマで拡張）

# 子テーマを作成してデフォルトテーマを拡張

# .vuepress/theme/index.ts ファイルを作成

# 子テーマとなる vueファイルを作成 ~ スロットを利用して拡張

# 設定ファイルでテーマをデフォルトテーマ拡張（子テーマ） "defaltThemeChild" に指定

子テーマを作成してデフォルトテーマを拡張

.vuepress/theme/index.ts ファイルを作成

子テーマとなる vueファイルを作成 ~ スロットを利用して拡張

設定ファイルでテーマをデフォルトテーマ拡張（子テーマ） "defaltThemeChild" に指定