feat(theme): allow disabling whole layout (#1268)

docs/guide/theme-layout.md

@@ -1,7 +1,3 @@
----
-layout: doc
----
-
 # Layout
 
 You may choose the page layout by setting `layout` option to the page [frontmatter](./frontmatter). There are 3 layout options, `doc`, `page`, and `home`. If nothing is specified, then the page is treated as `doc` page.
@@ -36,3 +32,7 @@ Note that even in this layout, sidebar will still show up if the page has a matc
 ## Home Layout
 
 Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-home-page) for more details.
+
+## 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).

src/client/theme-default/Layout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { provide, watch } from 'vue'
-import { useRoute } from 'vitepress'
+import { useData, useRoute } from 'vitepress'
 import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar.js'
 import VPSkipLink from './components/VPSkipLink.vue'
 import VPBackdrop from './components/VPBackdrop.vue'
@@ -22,10 +22,12 @@ watch(() => route.path, closeSidebar)
 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 
 provide('close-sidebar', closeSidebar)
+
+const { frontmatter } = useData()
 </script>
 
 <template>
-  <div class="Layout">
+  <div v-if="frontmatter.layout !== false" class="Layout">
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
@@ -61,6 +63,7 @@ provide('close-sidebar', closeSidebar)
     <VPFooter />
     <slot name="layout-bottom" />
   </div>
+  <Content v-else />
 </template>
 
 <style scoped>