feat(theme): support page layout (close: #45)

ulivz · Jan 25, 2022 · c31e127 · c31e127
1 parent ee8079f
commit c31e127
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 10 deletions.
diff --git a/packages/docs/docs/.vuepress/components/PageLayout1.vue b/packages/docs/docs/.vuepress/components/PageLayout1.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Custom Page layout</h1>
+</template>
diff --git a/packages/docs/docs/.vuepress/config.ts b/packages/docs/docs/.vuepress/config.ts
@@ -30,6 +30,7 @@ export = defineConfig4CustomTheme<ThemeConfig>((ctx) => ({
             "/guide/global-components",
             "/guide/migration",
             "/guide/dark-mode",
+            "/guide/page-layout",
             "/guide/documenting",
           ],
         },

diff --git a/packages/docs/docs/guide/page-layout-example.md b/packages/docs/docs/guide/page-layout-example.md
@@ -0,0 +1,3 @@
+---
+pageLayout: PageLayout1
+---
diff --git a/packages/docs/docs/guide/page-layout.md b/packages/docs/docs/guide/page-layout.md
@@ -0,0 +1,22 @@
+# Page Layout
+
+## Motivation
+
+If you want to hidden `sidebar`, `toc` and `pageEdit` at the page section and only remain `<Header>`, you'll need page layout.
+
+## Quick Start
+
+1. Declare a [Global Vue Component](https://vuepress.vuejs.org/guide/directory-structure.html), e.g. `.vuepress/components/PageLayout1.vue`.
+
+2. Declare `pageLayout` via [Frontmatter](https://vuepress.vuejs.org/guide/frontmatter.html):
+
+```md
+---
+pageLayout: PageLayout1
+---
+```
+
+An example [here](./page-layout-example.md).
+
+
+
diff --git a/packages/vuepress-theme-vt/layouts/Layout.vue b/packages/vuepress-theme-vt/layouts/Layout.vue
@@ -30,11 +30,12 @@
     <Home v-if="$page.frontmatter.home" />
 
     <API v-else-if="$page.frontmatter.api" />
-
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-    >
+
+    <div v-else-if="pageLayout" class="custom-page">
+      <component :is="pageLayout" />
+    </div>
+
+    <Page v-else :sidebar-items="sidebarItems">
       <template #top>
         <slot name="page-top" />
       </template>
@@ -48,6 +49,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import Home from '@theme/components/Home.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
@@ -92,16 +94,32 @@ export default {
       )
     },
 
-    shouldShowSidebar () {
+    showShowSideSection() {
       const { frontmatter } = this.$page
       return (
         !frontmatter.home
         && !frontmatter.api
+        && !frontmatter.pageLayout
+      )
+    },
+
+    shouldShowSidebar() {
+      const { frontmatter } = this.$page
+      return (
+        this.showShowSideSection
         && frontmatter.sidebar !== false
         && this.sidebarItems.length
       )
     },
 
+    shouldShowNavbar() {
+      const { frontmatter } = this.$page
+      return (
+        this.showShowSideSection
+        && frontmatter.toc !== false
+      )
+    },
+
     sidebarItems () {
       return resolveSidebarItems(
         this.$page,
@@ -121,7 +139,15 @@ export default {
         },
         userPageClass
       ]
-    }
+    },
+
+    pageLayout() {
+      const layout = this.getPageLayout();
+      if (layout) {
+        return Vue.component(layout);
+      }
+      return Page;
+    },
   },
 
   mounted () {
@@ -154,7 +180,20 @@ export default {
           this.toggleSidebar(false)
         }
       }
-    }
-  }
-}
+    },
+
+    getPageLayout() {
+      if (this.$page.path) {
+        const layout = this.$page.frontmatter.pageLayout;
+        if (
+          layout &&
+          (this.$vuepress.getLayoutAsyncComponent(layout) ||
+            this.$vuepress.getVueComponent(layout))
+        ) {
+          return layout;
+        }
+      }
+    },
+  },
+};
 </script>
diff --git a/packages/vuepress-theme-vt/styles/index.styl b/packages/vuepress-theme-vt/styles/index.styl
@@ -216,6 +216,10 @@ table {
     }
   }
 
+  .custom-page {
+    padding-top: $navbarHeight;
+  }
+
   .sidebar {
     left: 0;
     padding-left: calc((100vw - var(--vp-screen-max-width)) / 2);