主题配置

在主题开发中，往往需要提供一些配置来丰富主题的功能，最简单的是和 VitePress 的 themeConfig配置合在一起：

import{defineConfig } from"vitepress";exportdefaultdefineConfig({themeConfig:{},});

然后在组件里通过 useData获取 themeConfig的内容：

<scriptsetuplang="ts">import{useData } from"vitepress";const{theme} =useData;constxx=theme.value.xx;</script><template></template>

这种方式仅适合简单的主题，当主题需要添加一个 head或者 vite插件，需要让用户修改 VitePress 的配置，这样极其不方便。

因此可以先将主题配置抽离出来，然后使用 extends来合并主题配置。

extends 合并配置

VitePress 提供了 extends来合并外界传来的配置项，比如外界的配置提供了部分 head内容，并且在 VitePress 也配置了 head，则最终合并为一个全新的 head，而不是覆盖。

提示

VitePress 的配置项只有为对象/数组时可以合并，如果配置项为一个固定的值或者函数，则以 VitePress 的配置项为主。

extends合并主题配置的使用方式如下：

import{defineConfig } from"vitepress";constteekConfig={};exportdefaultdefineConfig({extends:teekConfig,themeConfig:{},});

在 VitePress 配置中通过 extends可以将主题配置合并到 VitePress 配置里，也就是说完全可以在主题配置里添加 VitePress 的配置项，但是不能反过来，如：

各自配置

import{defineConfig } from"vitepress";constmyThemeConfig={themeConfig:{teekTheme:true} };exportdefaultdefineConfig({extends:myThemeConfig,base:"/",});

统一配置

import{defineConfig } from"vitepress";constmyThemeConfig={base:"/",themeConfig:{teekTheme:true} };exportdefaultdefineConfig({extends:myThemeConfig,});

函数式构建配置

在主题配置里，如果要使用 Vite 插件或者想要修改 VitePress 默认的配置，则可以提供一个函数来返回主题配置：

importtype{DefaultTheme,UserConfig } from"vitepress";importtype{PluginOption } from"vite";interfaceThemeConfig{useTheme?:boolean;}exportdefaultfunctiongetThemeConfig(config:ThemeConfig&UserConfig<DefaultTheme.Config>={}):UserConfig{const{useTheme=true,...themeConfig} =config;if(!useTheme) return{};return{ignoreDeadLinks:true,head:[],vite:{plugins:[],},themeConfig,};}

在 .vitepress/config.mts引入该函数：

import{defineConfig } from"vitepress";importgetThemeConfig from"myThemeConfig";constmyThemeConfig=getThemeConfig({useTheme:false});exportdefaultdefineConfig({extends:myThemeConfig,});