Merge branch 'feature/2020-06-27-add-sub-sidebar' of github.com:recoluan/vuepress-theme-reco into feature/2020-06-27-add-sub-sidebar

example/.vuepress/config.js

@@ -7,42 +7,20 @@ module.exports = {
     ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
   ],
   // theme: 'reco',
-  locales: {
-    '/': {
-      lang: 'ja-JP',
-      title: "vuepress-theme-reco",
-      description: 'A simple and beautiful vuepress blog theme.',
-    },
-  },
   theme: require.resolve('../../packages/vuepress-theme-reco'),
   themeConfig: {
-    locales: {
-      '/': {
-        recoLocales: {
-          pagation: {
-            prev: '上壹頁',
-            next: '下壹頁',
-            go: '前往',
-            jump: '跳轉至'
-          }
-        }
-      }
-    },
     nav: [
       { text: 'Home', link: '/', icon: 'reco-home' },
       { text: 'TimeLine', link: '/timeline/', icon: 'reco-date' },
-      { text: 'Contact',
-        icon: 'reco-message',
-        items: [
-          { text: 'NPM', link: 'https://www.npmjs.com/~reco_luan', icon: 'reco-npm' },
-          { text: 'GitHub', link: 'https://github.com/recoluan', icon: 'reco-github' },
-          { text: '简书', link: 'https://www.jianshu.com/u/cd674a19515e', icon: 'reco-jianshu' },
-          { text: 'CSDN', link: 'https://blog.csdn.net/recoluan', icon: 'reco-csdn' },
-          { text: '博客圆', link: 'https://www.cnblogs.com/luanhewei/', icon: 'reco-bokeyuan' },
-          { text: 'WeChat', link: 'https://mp.weixin.qq.com/s/mXFqeUTegdvPliXknAAG_A', icon: 'reco-wechat' },
-        ]
-      }
+      { text: 'sidebar', link: '/views/sidebar/' }
     ],
+    sidebar: {
+      '/views/sidebar/': [
+        '',
+        'bar1',
+        'bar2'
+      ]
+    },
     type: 'blog',
     // 博客设置
     blogConfig: {
@@ -55,14 +33,14 @@ module.exports = {
         text: 'Tag' // 默认 “标签”
       }
     },
-    type: 'blog',
     logo: '/head.png',
     authorAvatar: '/head.png',
     // 搜索设置
     search: true,
     searchMaxSuggestions: 10,
     // 自动形成侧边导航
-    sidebar: 'auto',
+    // sidebar: 'auto',
+    sidebarDepth: 4,
     // 最后更新时间
     lastUpdated: 'Last Updated',
     // 作者

example/views/category1/2019/092101.md

@@ -1,10 +1,69 @@
 ---
-title: second page in category1
+title: sidebar test
 date: 2019-09-21
+sidebarDepth: 5
 tags:
  - tag2
 categories:
  - category1
 ---
 
-second page in category1
+## 二级标题1
+
+### 三级标题1-1
+
+#### 四级标题1-1-1
+#### 四级标题1-1-2
+#### 四级标题1-1-3
+
+### 三体标题1-2
+
+#### 四级标题1-2-1
+#### 四级标题1-2-2
+#### 四级标题1-2-3
+
+### 三体标题1-3
+
+#### 四级标题1-3-1
+#### 四级标题1-3-2
+#### 四级标题1-3-3
+
+## 二级标题2
+
+### 三级标题2-1
+
+#### 四级标题2-1-1
+#### 四级标题2-1-2
+#### 四级标题2-1-3
+
+### 三体标题2-2
+
+#### 四级标题2-2-1
+#### 四级标题2-2-2
+#### 四级标题2-2-3
+
+### 三体标题2-3
+
+#### 四级标题2-3-1
+#### 四级标题2-3-2
+#### 四级标题2-3-3
+
+## 二级标题3
+
+### 三级标题3-1
+
+#### 四级标题3-1-1
+#### 四级标题3-1-2
+#### 四级标题3-1-3
+
+### 三体标题3-2
+
+#### 四级标题3-2-1
+#### 四级标题3-2-2
+#### 四级标题3-2-3
+
+### 三体标题3-3
+
+#### 四级标题3-3-1
+#### 四级标题3-3-2
+#### 四级标题3-3-3

example/views/sidebar/README.md

@@ -0,0 +1,5 @@
+---
+title: 介绍
+---
+
+介绍

example/views/sidebar/bar1.md

@@ -0,0 +1,5 @@
+---
+title: bar1
+---
+
+bar1

example/views/sidebar/bar2.md

@@ -0,0 +1,65 @@
+---
+title: bar2
+---
+
+bar2
+
+## 二级标题1
+
+### 三级标题1-1
+
+#### 四级标题1-1-1
+#### 四级标题1-1-2
+#### 四级标题1-1-3
+
+### 三体标题1-2
+
+#### 四级标题1-2-1
+#### 四级标题1-2-2
+#### 四级标题1-2-3
+
+### 三体标题1-3
+
+#### 四级标题1-3-1
+#### 四级标题1-3-2
+#### 四级标题1-3-3
+
+## 二级标题2
+
+### 三级标题2-1
+
+#### 四级标题2-1-1
+#### 四级标题2-1-2
+#### 四级标题2-1-3
+
+### 三体标题2-2
+
+#### 四级标题2-2-1
+#### 四级标题2-2-2
+#### 四级标题2-2-3
+
+### 三体标题2-3
+
+#### 四级标题2-3-1
+#### 四级标题2-3-2
+#### 四级标题2-3-3
+
+## 二级标题3
+
+### 三级标题3-1
+
+#### 四级标题3-1-1
+#### 四级标题3-1-2
+#### 四级标题3-1-3
+
+### 三体标题3-2
+
+#### 四级标题3-2-1
+#### 四级标题3-2-2
+#### 四级标题3-2-3
+
+### 三体标题3-3
+
+#### 四级标题3-3-1
+#### 四级标题3-3-2
+#### 四级标题3-3-3

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

@@ -23,9 +23,9 @@
         <Sidebar
           :items="sidebarItems"
           @toggle-sidebar="toggleSidebar">
-          <slot
-            name="sidebar-top"
-            slot="top"/>
+          <template slot="top">
+            <PersonalInfo />
+          </template>
           <slot
             name="sidebar-bottom"
             slot="bottom"/>
@@ -53,9 +53,9 @@
           <Sidebar
             :items="sidebarItems"
             @toggle-sidebar="toggleSidebar">
-            <slot
-              name="sidebar-top"
-              slot="top"/>
+            <template slot="top">
+              <PersonalInfo />
+            </template>
             <slot
               name="sidebar-bottom"
               slot="bottom"/>
@@ -74,7 +74,7 @@
 <script>
 import Navbar from '@theme/components/Navbar'
 import Sidebar from '@theme/components/Sidebar'
-import { resolveSidebarItems } from '@theme/helpers/utils'
+import PersonalInfo from '@theme/components/PersonalInfo'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
@@ -82,12 +82,16 @@ import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 export default {
   mixins: [moduleTransitonMixin],
 
-  components: { Sidebar, Navbar, Password },
+  components: { Sidebar, Navbar, Password, PersonalInfo },
 
   props: {
     sidebar: {
       type: Boolean,
       default: true
+    },
+    sidebarItems: {
+      type: Array,
+      default: () => []
     }
   },
 
@@ -124,22 +128,14 @@ export default {
     },
 
     shouldShowSidebar () {
-      const { frontmatter } = this.$page
-      return (
-        this.sidebar !== false &&
-        !frontmatter.home &&
-        frontmatter.sidebar !== false &&
-        this.sidebarItems.length
-      )
-    },
-
-    sidebarItems () {
-      return resolveSidebarItems(
-        this.$page,
-        this.$page.regularPath,
-        this.$site,
-        this.$localePath
-      )
+      // const { frontmatter } = this.$page
+      // return (
+      //   this.sidebar !== false &&
+      //   !frontmatter.home &&
+      //   frontmatter.sidebar !== false &&
+      //   this.sidebarItems.length
+      // )
+      return this.sidebarItems.length > 0
     },
 
     pageClasses () {

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

@@ -72,6 +72,8 @@
     <ModuleTransition delay="0.32">
       <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/>
     </ModuleTransition>
+
+    <SubSidebar class="side-bar" />
   </main>
 </template>
 
@@ -80,10 +82,11 @@ import PageInfo from '@theme/components/PageInfo'
 import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
 import ModuleTransition from '@theme/components/ModuleTransition'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
+import SubSidebar from '@theme/components/SubSidebar'
 
 export default {
   mixins: [moduleTransitonMixin],
-  components: { PageInfo, ModuleTransition },
+  components: { PageInfo, ModuleTransition, SubSidebar },
 
   props: ['sidebarItems'],
 
@@ -234,9 +237,20 @@ function flatten (items, res) {
 @require '../styles/wrapper.styl'
 
 .page
+  position relative
   padding-top 5rem
   padding-bottom 2rem
+  padding-right 10rem
   display block
+  .side-bar
+    position fixed
+    top 10rem
+    bottom 10rem
+    right 2rem
+    overflow-y scroll
+    &::-webkit-scrollbar
+      width: 0
+      height: 0
   .page-title
     max-width: $contentWidth;
     margin: 0 auto;
@@ -278,14 +292,18 @@ function flatten (items, res) {
     float right
 
 @media (max-width: $MQMobile)
-  .page-title
-    padding: 0 1rem;
-  .page-edit
-    .edit-link
-      margin-bottom .5rem
-    .last-updated
-      font-size .8em
-      float none
-      text-align left
+  .page
+    padding-right 0
+    .side-bar
+      display none
+    .page-title
+      padding: 0 1rem;
+    .page-edit
+      .edit-link
+        margin-bottom .5rem
+      .last-updated
+        font-size .8em
+        float none
+        text-align left
 
 </style>

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

@@ -1,8 +1,7 @@
 <template>
   <aside class="sidebar">
-    <PersonalInfo/>
-    <NavLinks/>
     <slot name="top"/>
+    <NavLinks/>
     <SidebarLinks :depth="0" :items="items"/>
     <slot name="bottom"/>
   </aside>
@@ -10,13 +9,12 @@
 
 <script>
 import SidebarLinks from '@theme/components/SidebarLinks'
-import PersonalInfo from '@theme/components/PersonalInfo'
 import NavLinks from '@theme/components/NavLinks'
 
 export default {
   name: 'Sidebar',
 
-  components: { SidebarLinks, NavLinks, PersonalInfo },
+  components: { SidebarLinks, NavLinks },
 
   props: ['items']
 }

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

@@ -88,24 +88,24 @@ export default {
     },
 
     isInViewPortOfOne () {
-      const siderbarScroll = document.getElementsByClassName('sidebar')[0]
+      const sidebarScroll = document.getElementsByClassName('sidebar')[0]
       let el = document.getElementsByClassName('active sidebar-link')[1]
       if (el == null || el == undefined || el.offsetTop == undefined) {
         el = document.getElementsByClassName('active sidebar-link')[0]
       }
       if (el == null || el == undefined || el.offsetTop == undefined) return
 
-      const viewPortHeight = siderbarScroll.clientHeight || window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+      const viewPortHeight = sidebarScroll.clientHeight || window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
       const offsetTop = el.offsetTop
       const offsetBottom = el.offsetTop + el.offsetHeight
-      const scrollTop = siderbarScroll.scrollTop
+      const scrollTop = sidebarScroll.scrollTop
       const bottomVisible = (offsetBottom <= viewPortHeight + scrollTop)
       if (!bottomVisible) {
-        siderbarScroll.scrollTop = (offsetBottom + 5 - viewPortHeight)
+        sidebarScroll.scrollTop = (offsetBottom + 5 - viewPortHeight)
       }
       const topVisible = (offsetTop >= scrollTop)
       if (!topVisible) {
-        siderbarScroll.scrollTop = (offsetTop - 5)
+        sidebarScroll.scrollTop = (offsetTop - 5)
       }
     },
 

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

@@ -0,0 +1,66 @@
+<script>
+import { isActive } from '@theme/helpers/utils'
+
+export default {
+  computed: {
+    headers () {
+      const headers = this.$page.headers.filter(header => header.level === 2)
+      return headers
+    }
+  },
+  methods: {
+    isLinkActive (header) {
+      return isActive(this.$route, this.$page.path + '#' + header.slug)
+    }
+  },
+  render (h) {
+    return h('ul', {
+      class: { 'sub-sidebar-wrapper': true }
+    }, [
+      ...this.headers.map(header => {
+        return h('li', {
+          class: {
+            active: this.isLinkActive(header),
+            [`level-${header.level}`]: true
+          },
+          attr: { key: header.title }
+        }, [
+          h('router-link', {
+            class: { 'sidebar-link': true },
+            props: { to: `${this.$page.path}#${header.slug}` }
+          }, header.title)
+        ])
+      })
+    ])
+  }
+}
+
+</script>
+
+<style lang="stylus" scoped>
+.sub-sidebar-wrapper
+  padding-left 0
+  list-style none
+  border-left 1px solid var(--border-color)
+  font-size 12px
+  li
+    padding .5rem 0
+    cursor pointer
+    border-left 1px solid transparent
+    a
+      color var(--text-color)
+    &:hover
+      a
+       color $accentColor
+    &.active
+      border-left 1px solid $accentColor
+      a
+       color $accentColor
+    &.level-1
+      padding-left .4rem
+    &.level-2
+      padding-left .9rem
+    &.level-3
+      padding-left 1.2rem
+</style>
+

packages/vuepress-theme-reco/helpers/utils.js

@@ -122,42 +122,49 @@ export function resolveSidebarItems (page, regularPath, site, localePath) {
     ? themeConfig.locales[localePath] || themeConfig
     : themeConfig
 
-  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
-  if (pageSidebarConfig === 'auto') {
-    return resolveHeaders(page)
-  }
+  // 计算页面的菜单层级
+  // const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
+  // if (pageSidebarConfig === 'auto') {
+  //   return resolveHeaders(page)
+  // }
 
+  // const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
+  // if (!sidebarConfig) {
+  //   return []
+  // } else {
+  //   const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+  //   return config
+  //     ? config.map(item => resolveItem(item, pages, base))
+  //     : []
+  // }
   const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
-  if (!sidebarConfig) {
-    return []
-  } else {
-    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
-    return config
-      ? config.map(item => resolveItem(item, pages, base))
-      : []
-  }
+
+  const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+  return config
+    ? config.map(item => resolveItem(item, pages, base))
+    : []
 }
 
 /**
  * @param { Page } page
  * @returns { SidebarGroup }
  */
-function resolveHeaders (page) {
-  const headers = groupHeaders(page.headers || [])
-  return [{
-    type: 'group',
-    collapsable: false,
-    title: page.title,
-    path: null,
-    children: headers.map(h => ({
-      type: 'auto',
-      title: h.title,
-      basePath: page.path,
-      path: page.path + '#' + h.slug,
-      children: h.children || []
-    }))
-  }]
-}
+// function resolveHeaders (page) {
+//   const headers = groupHeaders(page.headers || [])
+//   return [{
+//     type: 'group',
+//     collapsable: false,
+//     title: page.title,
+//     path: null,
+//     children: headers.map(h => ({
+//       type: 'auto',
+//       title: h.title,
+//       basePath: page.path,
+//       path: page.path + '#' + h.slug,
+//       children: h.children || []
+//     }))
+//   }]
+// }
 
 export function groupHeaders (headers) {
   // group h3s under h2

packages/vuepress-theme-reco/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <Common>
+  <Common :sidebarItems="sidebarItems">
     <component v-if="$frontmatter.home" :is="homeCom"/>
     <Page v-else :sidebar-items="sidebarItems"/>
     <Footer v-if="$frontmatter.home" class="footer" />