mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
---
|
|
title: Component Overrides
|
|
icon: carbon:cics-sit-overrides
|
|
createTime: 2025/10/08 16:20:15
|
|
permalink: /en/guide/component-overrides/
|
|
---
|
|
|
|
## Overview
|
|
|
|
Layout slots are quite practical, but sometimes you might find them not flexible enough.
|
|
The theme also provides the capability to override individual components.
|
|
|
|
::: warning
|
|
Before using this feature, you should first familiarize yourself with this theme's source code
|
|
and understand the various built-in components to safely override them.
|
|
|
|
The theme's component source code is hosted on
|
|
[GitHub](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/theme/src/client/components) under the MIT license.
|
|
:::
|
|
|
|
## Usage
|
|
|
|
The theme registers all non-global components with an
|
|
[alias](https://v2.vuepress.vuejs.org/zh/reference/plugin-api.html#alias) prefixed with `@theme`.
|
|
For example, the alias for `VPFooter.vue` is `@theme/VPFooter.vue`.
|
|
|
|
If you want to override the `VPFooter.vue` component, you simply need to override this alias in the configuration file `.vuepress/config.ts`:
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { plumeTheme } from 'vuepress-theme-plume'
|
|
import { getDirname, path } from 'vuepress/utils'
|
|
|
|
const __dirname = getDirname(import.meta.url)
|
|
|
|
export default defineUserConfig({
|
|
theme: plumeTheme(),
|
|
|
|
alias: {
|
|
'@theme/VPFooter.vue': path.resolve(
|
|
__dirname,
|
|
'./components/MyFooter.vue',
|
|
),
|
|
},
|
|
})
|
|
```
|