feat(vuepress-theme-reco): use subSidebar to control the sub sidebar

Author: reco_luan

example/.vuepress/config.js

@@ -58,7 +58,7 @@ module.exports = {
     search: true,
     searchMaxSuggestions: 10,
     // 自动形成侧边导航
-    // sidebar: 'auto',
+    // subSidebar: 'auto',
     sidebarDepth: 4,
     // 最后更新时间
     lastUpdated: 'Last Updated',

example/views/sidebargroup/bar2.md

@@ -4,10 +4,14 @@ title: bar2
 
 bar2
 
+## sidebar
+
 ## 二级标题1
 
 ### 三级标题1-1
 
+
+
 #### 四级标题1-1-1
 #### 四级标题1-1-2
 #### 四级标题1-1-3

packages/vuepress-theme-reco/components/Home.vue

@@ -134,59 +134,6 @@ export default {
       transform scale(1.05)
     }
   }
-
-//   &.reco-hide {
-//   .hero {
-//     img {
-//       load-start()
-//     }
-//     .h1 {
-//       load-start()
-//     }
-//     .description {
-//       load-start()
-//     }
-//     .huawei {
-//       load-start()
-//     }
-//     .action-button {
-//       load-start()
-//     }
-//   }
-//   .features {
-//     load-start()
-//   }
-//   .home-center {
-//     load-start()
-//     padding 0
-//   }
-// }
-
-//   &.reco-show {
-//     .hero {
-//       img {
-//         load-end(0.08s)
-//       }
-//       .h1 {
-//         load-end(0.16s)
-//       }
-//       .description {
-//         load-end(0.24s)
-//       }
-//       .huawei {
-//         load-end(0.32s)
-//       }
-//       .action-button {
-//         load-end(0.4s)
-//       }
-//     }
-//     .features {
-//       load-end(0.40s)
-//     }
-//     .home-center {
-//       load-end(0.48s)
-//     }
-//   }
 }
 
 @media (max-width: $MQMobile) {

packages/vuepress-theme-reco/components/Page.vue

@@ -171,8 +171,7 @@ export default {
       )
     },
     pageStyle () {
-      const headers = this.$page.headers || []
-      return headers.length > 0 ? {} : { paddingRight: '0' }
+      return this.$showSubSideBar ? {} : { paddingRight: '0' }
     }
   },
 

packages/vuepress-theme-reco/components/SubSidebar.vue

@@ -4,17 +4,15 @@ import { isActive } from '@theme/helpers/utils'
 export default {
   computed: {
     headers () {
-      const headers = (this.$page.headers || []).filter(header => header.level === 2)
-      return headers
+      return this.showSubSidebar ? this.$page.headers || [] : []
     }
   },
   methods: {
     isLinkActive (header) {
       const active = isActive(this.$route, this.$page.path + '#' + header.slug)
       if (active) {
         setTimeout(() => {
-          console.log(document.querySelector(`.${header.slug}`))
-          document.querySelector(`.${header.slug}`).scrollIntoView()
+          document.querySelector(`.reco-${header.slug}`).scrollIntoView()
         }, 300)
       }
       return active
@@ -23,9 +21,9 @@ export default {
   render (h) {
     return h('ul', {
       class: { 'sub-sidebar-wrapper': true },
-      style: { width: (this.$page.headers || []).length > 0 ? '12rem' : '0' }
+      style: { width: this.headers.length > 0 ? '12rem' : '0' }
     }, [
-      ...(this.$page.headers || []).map(header => {
+      ...this.headers.map(header => {
         return h('li', {
           class: {
             active: this.isLinkActive(header),
@@ -34,7 +32,7 @@ export default {
           attr: { key: header.title }
         }, [
           h('router-link', {
-            class: { 'sidebar-link': true, [`${header.slug}`]: true },
+            class: { 'sidebar-link': true, [`reco-${header.slug}`]: true },
             props: { to: `${this.$page.path}#${header.slug}` }
           }, header.title)
         ])

packages/vuepress-theme-reco/mixins/index.js

@@ -41,6 +41,18 @@ export default {
       }
 
       return formatPagesArr
+    },
+    $showSubSideBar () {
+      const {
+        $themeConfig: { subSidebar: themeSidebar },
+        $frontmatter: { subSidebar: pageSidebar }
+      } = this
+      const headers = this.$page.headers || []
+
+      if ((themeSidebar === 'auto' || pageSidebar === 'auto') && headers.length > 0) {
+        return true
+      }
+      return false
     }
   }
 }

packages/vuepress-theme-reco/mixins/posts.js

@@ -195,7 +195,7 @@ th, td
 @require 'mobile.styl'
 
 .iconfont
-  font-size: 0.9rem;
+  font-size: 12px;
   color: var(--text-color-sub);
 
 /************** 滚动条 **************/