v1.8.6

docs/.vuepress/config/htmlModules.js

@@ -15,7 +15,7 @@
  * }
  *
  * ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。
- * ②注：windowLB 和 windowRB：1.展示区块宽高最大是200*200px。2.请给自定义元素定一个不超过200px的固定宽高。3.在屏宽小于960px时无论如何都不会显示。
+ * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
  */
 
 module.exports = {
@@ -107,6 +107,7 @@ module.exports = {
   //         (adsbygoogle = window.adsbygoogle || []).push({});
   //     </script>
   //     `,
+  windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
 }
 
 

package.json

@@ -22,7 +22,7 @@
     "vuepress-plugin-one-click-copy": "^1.0.2",
     "vuepress-plugin-thirdparty-search": "^1.0.2",
     "vuepress-plugin-zooming": "^1.1.7",
-    "vuepress-theme-vdoing": "^1.8.5",
+    "vuepress-theme-vdoing": "^1.8.6",
     "yamljs": "^0.3.0"
   },
   "dependencies": {

theme-vdoing/layouts/Layout.vue

@@ -5,15 +5,9 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
-    <Navbar
-      v-if="shouldShowNavbar"
-      @toggle-sidebar="toggleSidebar"
-    />
+    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
-    <div
-      class="sidebar-mask"
-      @click="toggleSidebar(false)"
-    ></div>
+    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
 
     <div
       v-if="$themeConfig.sidebarHoverTriggerOpen !== false"
@@ -25,17 +19,17 @@
       @toggle-sidebar="toggleSidebar"
       v-show="showSidebar"
     >
-      <template
-        #top
-        v-if="sidebarSlotTop"
-      >
-        <div class="sidebar-slot sidebar-slot-top" v-html="sidebarSlotTop"></div>
+      <template #top v-if="sidebarSlotTop">
+        <div
+          class="sidebar-slot sidebar-slot-top"
+          v-html="sidebarSlotTop"
+        ></div>
       </template>
-      <template
-        #bottom
-        v-if="sidebarSlotBottom"
-      >
-        <div class="sidebar-slot sidebar-slot-bottom" v-html="sidebarSlotBottom"></div>
+      <template #bottom v-if="sidebarSlotBottom">
+        <div
+          class="sidebar-slot sidebar-slot-bottom"
+          v-html="sidebarSlotBottom"
+        ></div>
       </template>
       <!-- <slot name="sidebar-top" #top />
       <slot name="sidebar-bottom" #bottom /> -->
@@ -54,20 +48,11 @@
     <ArchivesPage v-else-if="$page.frontmatter.archivesPage" />
 
     <!-- 文章页或其他页 -->
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-    >
-      <template
-        #top
-        v-if="pageSlotTop"
-      >
+    <Page v-else :sidebar-items="sidebarItems">
+      <template #top v-if="pageSlotTop">
         <div class="page-slot page-slot-top" v-html="pageSlotTop"></div>
       </template>
-      <template
-        #bottom
-        v-if="pageSlotBottom"
-      >
+      <template #bottom v-if="pageSlotBottom">
         <div class="page-slot page-slot-bottom" v-html="pageSlotBottom"></div>
       </template>
       <!-- <slot
@@ -82,27 +67,31 @@
 
     <Footer />
 
-    <Buttons
-      ref="buttons"
-      @toggle-theme-mode="toggleThemeMode"
-    />
+    <Buttons ref="buttons" @toggle-theme-mode="toggleThemeMode" />
 
     <BodyBgImg v-if="$themeConfig.bodyBgImg" />
 
     <!-- 自定义html插入左右下角的小窗口 -->
-    <div class="custom-html-window custom-html-window-lb" v-if="windowLB" v-show="showWindowLB">
+    <div
+      class="custom-html-window custom-html-window-lb"
+      v-if="windowLB"
+      v-show="showWindowLB"
+    >
       <div class="custom-wrapper">
-        <i class="close-but" @click="showWindowLB = false">×</i>
-        <div v-html="windowLB"/>
+        <span class="close-but" @click="showWindowLB = false">×</span>
+        <div v-html="windowLB" />
       </div>
     </div>
-    <div class="custom-html-window custom-html-window-rb" v-if="windowRB" v-show="showWindowRB">
+    <div
+      class="custom-html-window custom-html-window-rb"
+      v-if="windowRB"
+      v-show="showWindowRB"
+    >
       <div class="custom-wrapper">
-        <i class="close-but" @click="showWindowRB = false">×</i>
-        <div v-html="windowRB"/>
+        <span class="close-but" @click="showWindowRB = false">×</span>
+        <div v-html="windowRB" />
       </div>
     </div>
-
   </div>
 </template>
 
@@ -127,7 +116,7 @@ const NAVBAR_HEIGHT = 58 // 导航栏高度
 export default {
   components: { Home, Navbar, Page, CategoriesPage, TagsPage, ArchivesPage, Sidebar, Footer, Buttons, BodyBgImg },
 
-  data () {
+  data() {
     return {
       hideNavbar: false,
       isSidebarOpen: true,
@@ -156,7 +145,7 @@ export default {
     windowRB() {
       return this.getHtmlStr('windowRB')
     },
-    showRightMenu () {
+    showRightMenu() {
       const { headers } = this.$page
       return (
         !this.$frontmatter.home
@@ -166,7 +155,7 @@ export default {
         && this.$frontmatter.sidebar !== false
       )
     },
-    shouldShowNavbar () {
+    shouldShowNavbar() {
       const { themeConfig } = this.$site
       const { frontmatter } = this.$page
       if (
@@ -183,7 +172,7 @@ export default {
       )
     },
 
-    shouldShowSidebar () {
+    shouldShowSidebar() {
       const { frontmatter } = this.$page
       return (
         !frontmatter.home
@@ -192,7 +181,7 @@ export default {
       )
     },
 
-    sidebarItems () {
+    sidebarItems() {
       return resolveSidebarItems(
         this.$page,
         this.$page.regularPath,
@@ -201,7 +190,7 @@ export default {
       )
     },
 
-    pageClasses () {
+    pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass
       return [
         {
@@ -217,13 +206,13 @@ export default {
       ]
     }
   },
-  created () {
+  created() {
     const sidebarOpen = this.$themeConfig.sidebarOpen
     if (sidebarOpen === false) {
       this.isSidebarOpen = sidebarOpen
     }
   },
-  beforeMount () {
+  beforeMount() {
     this.isSidebarOpenOfclientWidth()
     const mode = storage.get('mode') // 不放在created是因为vuepress不能在created访问浏览器api，如window
     if (!mode || mode === 'auto') { // 当未切换过模式，或模式处于'跟随系统'时
@@ -243,7 +232,7 @@ export default {
       document.head.appendChild(linkElm)
     }
   },
-  mounted () {
+  mounted() {
     // 初始化页面时链接锚点无法跳转到指定id的解决方案
     const hash = document.location.hash;
     if (hash.length > 1) {
@@ -274,12 +263,12 @@ export default {
 
   },
   watch: {
-    isSidebarOpen () {
+    isSidebarOpen() {
       if (this.isSidebarOpen) {  // 侧边栏打开时，恢复导航栏显示
         this.hideNavbar = false
       }
     },
-    themeMode () {
+    themeMode() {
       this.setBodyClass()
     }
   },
@@ -288,31 +277,31 @@ export default {
       const { htmlModules } = this.$themeConfig
       return htmlModules ? htmlModules[module] : ''
     },
-    setBodyClass () {
+    setBodyClass() {
       document.body.className = 'theme-mode-' + this.themeMode
     },
-    getScrollTop () {
+    getScrollTop() {
       return window.pageYOffset
         || document.documentElement.scrollTop
         || document.body.scrollTop || 0
     },
-    isSidebarOpenOfclientWidth () {
+    isSidebarOpenOfclientWidth() {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
         this.isSidebarOpen = false
       }
     },
-    toggleSidebar (to) {
+    toggleSidebar(to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)
     },
-    _autoMode () {
+    _autoMode() {
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) { // 系统处于深色模式
         this.themeMode = 'dark'
       } else {
         this.themeMode = 'light'
       }
     },
-    toggleThemeMode (key) {
+    toggleThemeMode(key) {
       if (key === 'auto') {
         this._autoMode()
       } else {
@@ -322,14 +311,14 @@ export default {
     },
 
     // side swipe
-    onTouchStart (e) {
+    onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
         y: e.changedTouches[0].clientY
       }
     },
 
-    onTouchEnd (e) {
+    onTouchEnd(e) {
       const dx = e.changedTouches[0].clientX - this.touchStart.x
       const dy = e.changedTouches[0].clientY - this.touchStart.y
       if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
@@ -356,32 +345,32 @@ export default {
   .custom-wrapper
     position relative
     max-width 200px
-    max-height 200px
+    max-height 400px
     .close-but
       cursor pointer
-      position: absolute
-      right: 0
-      top: 0
-      font-size 2rem
+      position absolute
+      right 0
+      top 0
+      font-size 1.5rem
       line-height 1.5rem
       width 1.5rem
       height 1.5rem
       opacity 0
-      transition all .2s
+      transition all 0.2s
       &:hover
-        opacity .9
+        opacity 0.9
     &:hover
       .close-but
-          opacity .7
+        opacity 0.7
   &.custom-html-window-lb
     left 0
     z-index 99
     &>*
-      align-self: flex-end;
+      align-self flex-end
   &.custom-html-window-rb
     right 80px
     z-index 10
-    justify-content: flex-end
+    justify-content flex-end
     &>*
-      align-self: flex-end;
+      align-self flex-end
 </style>

theme-vdoing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-vdoing",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
   "author": {
     "name": "gaoyi(Evan) Xu"