feat(theme): allow adding custom layouts

closes #2547
pull/2744/head
Divyansh Singh 1 year ago
parent a8cf88b54a
commit f4a5c43cb0

@ -36,3 +36,27 @@ Option `home` will generate templated "Homepage". In this layout, you can set ex
## No Layout
If you don't want any layout, you can pass `layout: false` through frontmatter. This option is helpful if you want a fully-customizable landing page (without any sidebar, navbar, or footer by default).
## Custom Layout
You can also use a custom layout:
```md
---
layout: foo
---
```
This will look for a component named `foo` registered in context. For example, you can register your component globally in `.vitepress/theme/index.ts`:
```ts
import DefaultTheme from 'vitepress/theme'
import Foo from './Foo.vue'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
app.component('foo', Foo)
}
}
```

@ -35,6 +35,11 @@ const { hasSidebar } = useSidebar()
<template #home-features-after><slot name="home-features-after" /></template>
</VPHome>
<component
v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
:is="frontmatter.layout"
/>
<VPDoc v-else>
<template #doc-top><slot name="doc-top" /></template>
<template #doc-bottom><slot name="doc-bottom" /></template>

Loading…
Cancel
Save