diff --git a/docs/.vitepress/config/shared.ts b/docs/.vitepress/config/shared.ts index a32cfb1a..e7aeb2a4 100644 --- a/docs/.vitepress/config/shared.ts +++ b/docs/.vitepress/config/shared.ts @@ -5,6 +5,11 @@ import { search as koSearch } from './ko' import { search as ptSearch } from './pt' import { search as ruSearch } from './ru' import { search as zhSearch } from './zh' +import { + groupIconMdPlugin, + groupIconVitePlugin, + localIconLoader +} from 'vitepress-plugin-group-icons' export const shared = defineConfig({ title: 'VitePress', @@ -55,6 +60,7 @@ export const shared = defineConfig({ `` ) } + md.use(groupIconMdPlugin) } }, @@ -104,5 +110,18 @@ export const shared = defineConfig({ }, carbonAds: { code: 'CEBDT27Y', placement: 'vuejsorg' } + }, + vite: { + plugins: [ + groupIconVitePlugin({ + customIcon: { + vitepress: localIconLoader( + import.meta.url, + '../../public/vitepress-logo-mini.svg' + ), + firebase: 'logos:firebase' + } + }) + ] } }) diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts new file mode 100644 index 00000000..7208825e --- /dev/null +++ b/docs/.vitepress/theme/index.ts @@ -0,0 +1,4 @@ +import Theme from 'vitepress/theme' +import 'virtual:group-icons.css' + +export default Theme diff --git a/docs/en/guide/custom-theme.md b/docs/en/guide/custom-theme.md index 1d168ce9..96943c9f 100644 --- a/docs/en/guide/custom-theme.md +++ b/docs/en/guide/custom-theme.md @@ -49,8 +49,7 @@ interface EnhanceAppContext { The theme entry file should export the theme as its default export: -```js -// .vitepress/theme/index.js +```js [.vitepress/theme/index.js] // You can directly import Vue files in the theme entry // VitePress is pre-configured with @vitejs/plugin-vue. @@ -72,8 +71,7 @@ Inside your layout component, it works just like a normal Vite + Vue 3 applicati The most basic layout component needs to contain a [``](../reference/runtime-api#content) component: -```vue - +```vue [.vitepress/theme/Layout.vue]