v1.2.0

xugaoyi · Jun 7, 2020 · 36bdec4 · 36bdec4
1 parent 16d29e3
commit 36bdec4
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 41 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -22,14 +22,14 @@ features: # 可选的
     imgUrl: /img/other.png
 
 # 文章列表显示方式: detailed 默认，显示详细版文章列表（包括作者、分类、标签、摘要、分页等）| simple => 显示简约版文章列表（仅标题和日期）| none 不显示文章列表
-# postList: simple
+# postList: detailed
 ---
 
 
 <!-- 小熊猫 -->
 <img src="/img/panda-waving.png" class="panda no-zoom" style="width: 130px;height: 115px;opacity: 0.8;margin-bottom: -4px;padding-bottom:0;position: fixed;bottom: 0;left: 0.5rem;">
 
- <!--
+<!-- 
 ## 关于
 
 ### 📚Blog
@@ -81,7 +81,7 @@ features: # 可选的
 - **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
 - **GitHub**: <https://github.com/xugaoyi>
  
-</br> 
--->
+</br>  -->
+
 
 
diff --git a/package.json b/package.json
@@ -14,14 +14,14 @@
     "inquirer": "^7.1.0",
     "json2yaml": "^1.1.0",
     "moment": "^2.25.3",
-    "vuepress": "^1.4.1",
+    "vuepress": "1.4.1",
     "vuepress-plugin-baidu-autopush": "^1.0.1",
     "vuepress-plugin-baidu-tongji": "^1.0.1",
     "vuepress-plugin-demo-block": "^0.7.2",
     "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.1.6",
+    "vuepress-theme-vdoing": "^1.2.0",
     "yamljs": "^0.3.0"
   },
   "dependencies": {

diff --git a/theme-vdoing/components/Buttons.vue b/theme-vdoing/components/Buttons.vue
@@ -22,7 +22,7 @@
       @click="showModeBox = true"
     >
       <transition name="mode">
-        <ul class="select-box" ref="modeBox" v-show="showModeBox" @click.stop>
+        <ul class="select-box" ref="modeBox" v-show="showModeBox" @click.stop @touchstart.stop>
           <li
           v-for="item in modeList"
           :key="item.KEY"
@@ -106,6 +106,22 @@ export default {
         }
       }, 100))
     }
+
+    
+    // 移动端对类似:hover效果的处理
+    const buttons = document.querySelectorAll('.buttons .button')
+    for (let i = 0; i < buttons.length; i++) {
+      const button = buttons[i]
+      button.addEventListener('touchstart', function(){
+        button.classList.add('hover')
+      })
+      button.addEventListener('touchend', function(){
+        setTimeout(() => {
+          button.classList.remove('hover')
+        }, 150)
+      })
+    }
+    
   },
   computed: {
     showToTop () {
@@ -193,17 +209,23 @@ export default {
       height 2.2rem
       line-height 2.2rem
       border-radius 50%
-      box-shadow 0 2px 6px rgba(0,0,0,.25)
+      box-shadow 0 2px 6px rgba(0,0,0,.15)
       margin-top .9rem
       text-align center
       cursor pointer
       transition all .5s
       background var(--blurBg)
-      &:hover
+      &.hover
         background $accentColor
         box-shadow 0 0 15px $accentColor
         &:before
           color #fff
+      @media (any-hover: hover)
+        &:hover
+          background $accentColor
+          box-shadow 0 0 15px $accentColor
+          &:before
+            color #fff
       .select-box
         margin 0
         padding .8rem 0
@@ -214,7 +236,7 @@ export default {
         border 1px solid var(--borderColor)
         width 120px
         border-radius 6px
-        box-shadow 0 0 30px lighten($accentColor, 40%)
+        box-shadow 0 0 15px rgba(255,255,255,.2)
         li 
           list-style none
           line-height 2rem

diff --git a/theme-vdoing/components/CategoriesBar.vue b/theme-vdoing/components/CategoriesBar.vue
@@ -12,9 +12,9 @@
         :class="{active: item.key === category}"
       >
         {{item.key}}
-        <span>({{item.length}})</span>
+        <span>{{item.length}}</span>
       </router-link>
-      <router-link to="/categories/" v-if="length !== 'all' && length < categoriesData.length">
+      <router-link to="/categories/" v-if="length !== 'all' && length < categoriesData.length" class="more">
         更多...
       </router-link>
     </div>
@@ -52,28 +52,52 @@ export default {
 <style lang='stylus'>
 .categories-wrapper 
   .title
-    color $accentColor
+    color var(--textColor)
+    opacity 0.9
     font-size 1.2rem
   .categories
     margin-top .6rem
     a
       display block
-      padding .28rem .25rem .25rem 0
+      padding .45rem .3rem
       color var(--textColor)
       opacity .8
       font-size .95rem
+      line-height .95rem
       position relative
       transition all .3s
+      border-bottom 1px solid var(--borderColor)
+      margin-top -1px
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       @media (max-width: $MQMobile) 
         font-weight 400
+      &.more
+        color $accentColor
       &:hover
         color $accentColor
         padding-left .4rem
+        span 
+          opacity .8
       span 
         float right 
+        background-color var(--textColor)
+        color var(--mainBg)
+        border-radius 2px
+        padding 0 .1rem
+        min-width 1rem
+        height 1rem
+        line-height 1rem
+        font-size .65rem
+        text-align center
+        opacity .6
+        transition opacity .3s
       &.active
         background $accentColor
         color var(--mainBg)
         padding-left .8rem
-        border-radius 3px
+        border-radius 1px
+        border-color transparent
+        
 </style>
diff --git a/theme-vdoing/components/CategoriesPage.vue b/theme-vdoing/components/CategoriesPage.vue
@@ -59,12 +59,12 @@ export default {
       this.currentPage = Number(this.$route.query.p)
     }
 
-    // 增强用户体验
+    // 滚动条定位到当前分类（增强用户体验）
     const cateEl = document.querySelector('.categories')
     if (cateEl) {
-      const activeEl = cateEl.querySelector('.active')
-      const topVal = activeEl ? activeEl.offsetTop : 0
       setTimeout(() => {
+        const activeEl = cateEl.querySelector('.active')
+        const topVal = activeEl ? activeEl.offsetTop : 0
         cateEl.scrollTo({ top: topVal, behavior: 'smooth' })
       }, 300)
     }
@@ -128,5 +128,5 @@ export default {
       @media (max-width: $MQMobile)
         display block
       .categories
-        max-height 11.5rem
+        max-height 12.3rem
 </style>
diff --git a/theme-vdoing/components/Footer.vue b/theme-vdoing/components/Footer.vue
@@ -12,7 +12,7 @@
       </a>
     </div>
 
-    <!--vdoing主题遵循MIT协议，完全开源且免费。如果你对主题的修改并不大，请保留主题的链接。-->
+    <!--Vdoing主题遵循MIT协议，完全开源且免费。如果您对主题的修改并不大，希望您保留主题的链接。-->
     Theme by <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
     <template v-if="footer">
        | Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}

diff --git a/theme-vdoing/components/Home.vue b/theme-vdoing/components/Home.vue
@@ -312,7 +312,7 @@ export default {
 };
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .home-wrapper
   .banner
     width 100%
@@ -337,13 +337,13 @@ export default {
           margin 2rem auto 1.5rem
         h1 
           margin 0
-          font-size 3.5rem
+          font-size 3.2rem
         .description, .action 
           margin 1.5rem auto
 
         .description 
           max-width 40rem
-          font-size 1.2rem
+          font-size 1.1rem
           line-height 1.3
           opacity .9
         .action-button 
@@ -376,8 +376,8 @@ export default {
           // color lighten($bannerTextColor,10%)
           color inherit
           .feature-img
-            width 11rem
-            height 11rem
+            width 10rem
+            height 10rem
             animation heart 1.2s ease-in-out 0s infinite alternate
             animation-play-state paused
           h2 
@@ -456,7 +456,7 @@ export default {
         margin-bottom 4rem
       .theme-vdoing-content
         padding 0 2rem
-        clear:both;
+        overflow hidden
         &>:first-child
           padding-top 2rem
         &>:last-child

diff --git a/theme-vdoing/components/PostList.vue b/theme-vdoing/components/PostList.vue
@@ -158,6 +158,7 @@ export default {
           color $accentColor
       h2
         margin .5rem 0
+        font-size 1.4rem
         border none
         a
           @media (max-width: $MQMobile) 
@@ -184,6 +185,7 @@ export default {
       overflow hidden
       .excerpt
         margin-bottom .3rem
+        font-size 0.92rem
         h1,h2,h3
           display none
         img

diff --git a/theme-vdoing/components/TagsBar.vue b/theme-vdoing/components/TagsBar.vue
@@ -60,7 +60,7 @@ export default {
   methods: {
     getTagStyle() {
       const r = Math.random()
-      return r > 0.7 ? 'font-size:1.2rem;opacity: 0.8;' : r < 0.2 ? 'font-size:1rem;opacity: 0.7;' : ''
+      return r > 0.7 ? 'opacity: 0.7;' : r < 0.2 ? 'opacity: 0.6;' : ''
     }
   }
 }
@@ -69,30 +69,35 @@ export default {
 <style lang='stylus'>
 .tags-wrapper 
   .title
-    color $accentColor
+    color var(--textColor)
+    opacity 0.9
     font-size 1.2rem
   .tags
     text-align justify
     padding .6rem .3rem .3rem .3rem
     margin 0 -0.3rem -0.3rem -0.3rem
     a
-      color var(--textColor)
-      opacity .6
-      font-size .95rem
+      opacity .5
       display inline-block
       padding .2rem .4rem
       transition all .4s
+      background-color var(--textColor)
+      color var(--mainBg)
+      border-radius 3px
+      margin 0 .3rem .5rem 0
+      min-width 2rem
+      height 1rem
+      line-height 1rem
+      font-size .8rem
+      text-align center
       @media (max-width: $MQMobile) 
         font-weight 400
       &:hover
-        color $accentColor
         opacity 1
-        transform scale(1.2)
       &.active
         background $accentColor
         color var(--mainBg)
-        // padding .2rem .5rem
-        border-radius 3px
+        transform scale(1.1)
         opacity 1
         &:hover
           text-decoration none

diff --git a/theme-vdoing/components/UpdateArticle.vue b/theme-vdoing/components/UpdateArticle.vue
@@ -88,7 +88,8 @@ export default {
       padding 1rem
       a 
         font-size 1.2rem
-        color $accentColor
+        color var(--textColor)
+        opacity 0.9
         &:before
           margin-right .3rem
           font-size 1.1rem

diff --git a/theme-vdoing/layouts/Layout.vue b/theme-vdoing/layouts/Layout.vue
@@ -84,6 +84,7 @@ import storage from 'good-storage' // 本地存储
 import _ from 'lodash'
 
 const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+const NAVBAR_HEIGHT = 58 // 导航栏高度
 
 export default {
   components: { Home, Navbar, Page, CategoriesPage, TagsPage, ArchivesPage, Sidebar, Footer, Buttons, BodyBgImg },
@@ -195,7 +196,7 @@ export default {
     window.addEventListener('scroll', _.throttle(() => {
       if(!this.isSidebarOpen) { // 侧边栏关闭时
         p = this.getScrollTop()
-        if(t < p) { // 向下滚动
+        if(t < p && p > NAVBAR_HEIGHT) { // 向下滚动
           this.hideNavbar = true
         } else { // 向上
           this.hideNavbar = false

diff --git a/theme-vdoing/package.json b/theme-vdoing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-vdoing",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
   "author": {
     "name": "gaoyi(Evan) Xu"

diff --git a/theme-vdoing/styles/custom-blocks.styl b/theme-vdoing/styles/custom-blocks.styl
@@ -30,4 +30,19 @@
     a
       color var(--textColor)
 
-
+// 深色模式适配
+.theme-mode-dark
+  .custom-block
+    &.warning
+      background-color rgba(255, 247, 208, .2) 
+      color darken(#ffe564, 35%)
+      .custom-block-title
+        color darken(#ffe564, 15%)
+    &.tip
+      background-color rgba(243, 245, 247, .2)
+      color darken(#42b983, 0%)
+    &.danger
+      background-color rgba(255, 230, 230, .4)
+      color darken(red, 50%)
+      a
+        color $accentColor
diff --git a/theme-vdoing/styles/index.styl b/theme-vdoing/styles/index.styl
@@ -18,6 +18,7 @@ body
   font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
+  -webkit-tap-highlight-color transparent
   font-size 16px
   color $textColor
   background var(--bodyBg)
@@ -155,7 +156,6 @@ kbd
 
 blockquote
   font-size 1rem
-  color #666
   opacity .75
   border-left .2rem solid rgba(100,100,100,.3)
   margin 1rem 0