mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.2 KiB
52 lines
1.2 KiB
4 years ago
|
# Customization
|
||
|
|
|
||
|
|
You can develop your custom theme by adding the `.vitepress/theme/index.js` file.
|
||
|
|
|
||
|
|
```bash
|
||
|
|
.
|
||
|
|
├─ docs
|
||
|
|
│ ├─ .vitepress
|
||
|
|
│ │ ├─ theme
|
||
|
|
│ │ │ └─ index.js
|
||
|
|
│ │ └─ config.js
|
||
|
|
│ └─ index.md
|
||
|
|
└─ package.json
|
||
|
|
````
|
||
|
|
|
||
|
|
In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this.
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<!-- .vitepress/theme/Layout.vue -->
|
||
|
|
<template>
|
||
|
|
<h1>Custom Layout!</h1>
|
||
|
|
<Content/><!-- make sure to include markdown outlet -->
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
Then include it in `.vitepress/theme/index.js`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
// .vitepress/theme/index.js
|
||
|
|
import Layout from './Layout.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
Layout,
|
||
|
|
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
|
||
|
|
enhanceApp({ app, router, siteData }) {
|
||
|
|
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
|
||
|
|
// custom router. `siteData`` is a `ref`` of current site-level metadata.
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
If you want to extend the default theme, you can import it from `vitepress/dist/client/theme-default`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
// .vitepress/theme/index.js
|
||
|
|
import DefaultTheme from 'vitepress/dist/client/theme-default'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
...DefaultTheme
|
||
|
|
}
|
||
|
|
```
|