Closed
Description
Is your feature request related to a problem? Please describe.
For my theme which extends the default theme, I want to have a contact page with a custom layout.
Describe the solution you'd like
Users
---
layout: contact
---
# Contact
content
Devs
Effectively add custom blocks here
vitepress/src/client/theme-default/components/VPContent.vue
Lines 29 to 52 in c30e758
For example
<MyContact v-if="frontmatter.layout === 'contact'">
<!-- define slots for this layout, if any -->
</MyContact>
This needs a lot of consideration, but I might propose something like
import Contact from "./components/MyContact.vue";
export default <Theme>{
// ...
customLayouts: {
contact: Contact,
},
};
Then in VPContent,
<component v-else-if="customLayouts[frontmatter.layout]" :is="customLayouts[frontmatter.layout]"></component>
Describe alternatives you've considered
- Override the VPContent component - very fragile coupling
- Use the page layout with a custom frontmatter key under which additional layouts can be specified - cannot control
Content
, workaround hack
Users
---
layout: page
type: contact
---
# Contact
content
Devs
MyLayout.vue
<template>
<Layout>
<template v-if="frontmatter.type === 'about'" #page-top>
about page top
</template>
<template v-if="frontmatter.type === 'about'" #page-bottom>
about page bottom
</template>
<template v-if="frontmatter.type === 'contact'" #page-top>
contact page top
</template>
<template v-if="frontmatter.type === 'contact'" #page-bottom>
contact page bottom
</template>
</Layout>
</template>
An element cannot have multiple '<template>' elements which are distributed to the same slot.eslint[vue/valid-v-slot](https://eslint.vuejs.org/rules/valid-v-slot.html)
OR
<template>
<Layout>
<template #page-top>
<template v-if="frontmatter.type === 'about'">
about page top
</template>
<template v-if="frontmatter.type === 'contact'">
contact page top
</template>
</template>
<template #page-bottom>
<template v-if="frontmatter.type === 'about'">
about page bottom
</template>
<template v-if="frontmatter.type === 'contact'">
contact page bottom
</template>
</template>
</Layout>
</template>
(Terrible maintainability)
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the docs.
- Read the Contributing Guidelines.
- Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.