VitePress-自定義主題

代碼倉庫

基礎了解

初始化項目的時候選擇 custom theme


運行后會發現頁面挺丑的。

如果想要用默認主題怎么辦呢，修改Layout。
使用默認主題的Layout

<script setup lang="ts">
import { useData } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
// https://vitepress.dev/reference/runtime-api#usedata
const { site, frontmatter } = useData();
const { Layout } = DefaultTheme;
</script><template><Layout> <Content /></Layout><!-- <div v-if="frontmatter.home"><h1>{{ site.title }}</h1><p>{{ site.description }}</p><ul><li><a href="/markdown-examples.html">Markdown Examples</a></li><li><a href="/api-examples.html">API Examples</a></li></ul></div><div v-else><a href="/">Home</a><Content /></div> -->
</template>

你可以在這個目錄下找到他的默認組件

components里面可以側重關注，因為自定義組件的話，大部分都是改這里的東西。
看下剛剛改的效果。

在配置項里面加nav和sidebar

import { defineConfig } from 'vitepress';// https://vitepress.dev/reference/site-config
export default defineConfig({title: '我的博客',description: '我的博客',themeConfig: {nav: [{ text: 'Home', link: '/' },{ text: 'Examples', link: '/markdown-examples' },],sidebar: [{text: 'Examples',items: [{ text: 'Markdown Examples', link: '/markdown-examples' },{ text: 'Runtime API Examples', link: '/api-examples' },],},],},
});

其實就是使用了官方的組件，自定義的話，就是自己寫樣式，寫組件。

回到開始，不使用官方的。

思考，既然都是vue組件，可不可以用element-plus呢，來試一試。

npm install element-plus --save

開始

我讓豆包幫我生成了一個圖，來當作首頁吧

首先布局

頂部Header，下面是列表。

先來編寫組件。

組件Header

需要了解一個方法useData
useData

在config.mts中配置logo方便我們調試。

在theme下新建一個theme/component/Header.vue文件

首先我看來看看官方是怎么實現header的，在node_modules里面找到VPNav

復制出來，放到我們自己的Header組件中。
然后修改下引用路徑

<script setup lang="ts">
import { inBrowser } from 'vitepress';
import { computed, provide, watchEffect } from 'vue';import { useData } from 'vitepress';
import { useNav } from 'vitepress/dist/client/theme-default/composables/nav';
import VPNavBar from 'vitepress/dist/client/theme-default/components/VPNavBar.vue';
import VPNavScreen from 'vitepress/dist/client/theme-default/components/VPNavScreen.vue';const { isScreenOpen, closeScreen, toggleScreen } = useNav();
const { frontmatter } = useData();const hasNavbar = computed(() => {return frontmatter.value.navbar !== false;
});provide('close-screen', closeScreen);watchEffect(() => {if (inBrowser) {document.documentElement.classList.toggle('hide-nav', !hasNavbar.value);}
});
</script><template><header v-if="hasNavbar" class="VPNav"><VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen"><template #nav-bar-title-before><slot name="nav-bar-title-before"/></template><template #nav-bar-title-after><slot name="nav-bar-title-after"/></template><template #nav-bar-content-before><slot name="nav-bar-content-before"/></template><template #nav-bar-content-after><slot name="nav-bar-content-after"/></template></VPNavBar><VPNavScreen :open="isScreenOpen"><template #nav-screen-content-before><slot name="nav-screen-content-before"/></template><template #nav-screen-content-after><slot name="nav-screen-content-after"/></template></VPNavScreen></header>
</template><style scoped>
.VPNav {position: relative;top: var(--vp-layout-top-height, 0px);/*rtl:ignore*/left: 0;z-index: var(--vp-z-index-nav);width: 100%;pointer-events: none;transition: background-color 0.5s;
}@media (min-width: 960px) {.VPNav {position: fixed;}
}
</style>

在Layout里面引入下Header。
這里的Main你可以先創建下。

<script setup lang="ts">
import { useData } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import Header from './components/Header.vue';
import Main from './components/Main.vue';
import Home from './components/Home.vue';// https://vitepress.dev/reference/runtime-api#usedata
const data = useData();
console.log(data);
const theme = data.theme;
const { Layout } = DefaultTheme;
</script><template><!-- <layout /> --><el-container><Header /><Main><Content /></Main></el-container>
</template>

看效果

在config.mts中開啟檢索。

如果不想大改，可以在官方組件基礎上改。
站點元數據可以通過useData來獲取，組件中引入使用。
在改造主題的時候，避免使用固定設置，盡量和原組件保持一致，使用站點元數據，這樣自定義的主題可以讓別人也使用。

其他組件

目錄結構大哥就這樣。
其實就是自己寫一套Layout 布局，然后渲染還是借助vitepress，實際上vitepress使用的是markdown-it來渲染的。

NavBar也是copy的官方組件源碼修改的。調整了下組件順序已經隱藏標題。

Home組件的話，可以在Layout里面寫

也可以使用文檔-重寫組件

除此之外，你也可以自定義主題色，具體變量看這個文件
https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css

同樣可以動態設置css來實現動態樣式。

自定義的樣式文件記得引入到.vitepress/theme/index.js