-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Extending the vitepress theme #235
Comments
Maybe this will help? |
The default theme is brilliant however I don't want to clone the entire theme into my working dir. I'm not sure how to extend simply the menu as I'd like to keep upstream changes without effort. I moved on to creating my own theme however would love information on how to extend the default. |
@ahawkclint After some messing around, I'm in the same boat. I was hoping for a strategy from Vitepress where I could provide a |
I follow the documentation for customizing the . for example, I want to customize default so in the import DefaultTheme from 'vitepress/theme'
import LastUpdated from './components/LastUpdated.vue'
export default {
...DefaultTheme,
LastUpdated,
NotFound: () => 'custom 404',
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.
}
} |
Hii, @sadeghbarati I think it'll work if you register the component properly import DefaultTheme from 'vitepress/theme'
import LastUpdated from './components/LastUpdated.vue'
export default {
...DefaultTheme,
NotFound: () => 'custom 404',
enhanceApp({ app, router, siteData }) {
app.component('last-updated',LastUpdated)
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
// custom router. `siteData`` is a `ref`` of current site-level metadata.
}
} |
Registering the component globally did not work for me, but defining aliases in const { defineConfig } = require('vite');
const path = require('path');
module.exports = defineConfig({
resolve: {
alias: {
// Use my custom `NavBarTitle` component
'./NavBarTitle.vue': path.resolve(__dirname, '.vitepress/theme/components/NavBarTitle.vue'),
},
},
}); |
This should be added to the interface of vitepress config so we can replace each default theme component.. |
One can do stuff like this for now: // plugins/navbar.ts
import type { Plugin } from 'vite'
export default function NavbarFix(): Plugin {
return {
name: 'vitepress-sidebar-logo-fix',
enforce: 'pre',
transform(code, id) {
if (id.includes('VPNavBarTitle.vue') && !id.endsWith('.css')) {
return `override this component here. refer the above link for complete example`
}
}
}
} Then add a import { defineConfig } from 'vite'
import NavbarFix from './plugins/navbar'
export default defineConfig({
plugins: [NavbarFix()]
}) You'll need to change id.includes('VPNavBarTitle.vue') && !id.endsWith('.css') to id.endsWith('VPNavBarTitle.vue') after VitePress starts using Vite 3. |
Let's just document the alias method. I don't think there is any other way to properly replace the theme components. |
I'd like to only have a custom NavLinks component while keeping the default vitepress theme. Next I looked at the NavBar although also my version doesn't override. Any help in the right direction would be great.
docs/.vitepress/config.js
The text was updated successfully, but these errors were encountered: