feat: expose layout slots for injecting custom content

vuejs · Apr 23, 2018 · 3814e88 · 3814e88
1 parent ddb590d
commit 3814e88
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
@@ -5,12 +5,18 @@
     @touchend="onTouchEnd">
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
     <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
-    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar"/>
+    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+      <slot name="sidebar-top" slot="top"/>
+      <slot name="sidebar-bottom" slot="bottom"/>
+    </Sidebar>
     <div class="custom-layout" v-if="$page.frontmatter.layout">
       <component :is="$page.frontmatter.layout"/>
     </div>
     <Home v-else-if="$page.frontmatter.home"/>
-    <Page v-else :sidebar-items="sidebarItems"/>
+    <Page v-else :sidebar-items="sidebarItems">
+      <slot name="page-top" slot="top"/>
+      <slot name="page-bottom" slot="bottom"/>
+    </Page>
   </div>
 </template>
 

diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
@@ -19,6 +19,7 @@
         </span>
       </p>
     </div>
+    <slot name="bottom"/>
   </div>
 </template>
 

diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="sidebar">
     <NavLinks/>
+    <slot name="top"/>
     <ul class="sidebar-links" v-if="items.length">
       <li v-for="(item, i) in items">
         <SidebarGroup v-if="item.type === 'group'"
@@ -12,6 +13,7 @@
         <SidebarLink v-else :item="item"/>
       </li>
     </ul>
+    <slot name="bottom"/>
   </div>
 </template>
 

diff --git a/lib/webpack/createBaseConfig.js b/lib/webpack/createBaseConfig.js
@@ -40,6 +40,7 @@ module.exports = function createBaseConfig ({
       .set('@source', sourceDir)
       .set('@app', path.resolve(__dirname, '../app'))
       .set('@temp', path.resolve(__dirname, '../app/.temp'))
+      .set('@default-theme', path.resolve(__dirname, '../default-theme'))
       .set('@AlgoliaSearchBox', isAlgoliaSearch
         ? path.resolve(__dirname, '../default-theme/AlgoliaSearchBox.vue')
         : path.resolve(__dirname, '../noop.js'))