分页功能优化、bug修复等

deploy.sh

@@ -36,6 +36,5 @@ git push -f $githubUrl master:gh-pages # 推送到github
 # git commit -m "${msg}"
 # git push -f $codingUrl master # 推送到coding
 
-
 cd - # 退回开始所在目录
 rm -rf docs/.vuepress/dist

docs/.vuepress/config.js

@@ -21,7 +21,7 @@ module.exports = {
   markdown: {
     lineNumbers: true // 代码行号
   },
-  theme: require.resolve('../../theme-vdoing'), // 使用的主题
+  theme: require.resolve('../../vuepress-theme-vdoing'), // 使用的主题
   themeConfig: { // 主题配置
     nav,
     sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
@@ -47,11 +47,11 @@ module.exports = {
     //   '图标地址1',
     //   '图标地址2'
     // ],
-    bodyBgImg: [
+    // bodyBgImg: [
-      'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
+    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
-      'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
+    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
-      'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
+    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
-    ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
+    // ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
 
     
     // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'

docs/03.技术/04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md

@@ -137,11 +137,7 @@ module.exports = {
 
 > 访问变量时，如 `$frontmatter` 或 `window`等，请使用  **EJS** 语法。因为在配置中不能使用回调函数，会被vuepress过滤，因此使用 **EJS** 语法。 ——插件作者文档说明
 >
-> **安装EJS**
+
->
-> ```sh
-> npm i ejs
-> ```
 
 
 

package.json

@@ -11,23 +11,22 @@
   "license": "MIT",
   "devDependencies": {
     "chalk": "^4.0.0",
-    "ejs": "^3.0.1",
     "inquirer": "^7.1.0",
     "json2yaml": "^1.1.0",
-    "moment": "^2.24.0",
+    "moment": "^2.25.3",
-    "vuepress": "^1.1.0",
+    "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.1",
+    "vuepress-plugin-one-click-copy": "^1.0.2",
-    "vuepress-plugin-thirdparty-search": "^1.0.0",
+    "vuepress-plugin-thirdparty-search": "^1.0.2",
     "vuepress-plugin-zooming": "^1.1.7",
     "yamljs": "^0.3.0"
   },
   "dependencies": {
-    "@better-scroll/core": "^2.0.0-beta.4",
+    "@better-scroll/core": "^2.0.0-beta.6",
-    "@better-scroll/slide": "^2.0.0-beta.4",
+    "@better-scroll/slide": "^2.0.0-beta.6",
     "good-storage": "^1.1.1",
-    "vuepress-plugin-comment": "^0.7.2"
+    "vuepress-plugin-comment": "^0.7.3"
   }
 }

vuepress-theme-vdoing/components/BodyBgImg.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="body-bg" :style="`background-image: url(${bgImg})`"></div>
+  <div class="body-bg" :style="`background: url(${bgImg}) center center / cover no-repeat`"></div>
 </template>
 
 <script>
@@ -40,6 +40,5 @@ export default {
   z-index -999999
   height 100vh
   width 100vw
-  background-size 100% auto
   transition  background .5s
 </style>

vuepress-theme-vdoing/components/CategoriesPage.vue

@@ -55,6 +55,9 @@ export default {
     } else {
       this.total = this.$sortPosts.length
     }
+    if (this.$route.query.p) {
+      this.currentPage = Number(this.$route.query.p)
+    }
   },
   mounted() {
     // 增强用户体验
@@ -73,7 +76,7 @@ export default {
     }
   },
   watch: {
-    $route() {
+    '$route.query.category'() {
       this.category = this.$route.query.category
       if (this.category) {
         this.total = this.$groupPosts.categories[this.category].length

vuepress-theme-vdoing/components/Home.vue

@@ -2,7 +2,7 @@
   <div class="home-wrapper">
 
     <!-- banner块 s -->
-    <div class="banner" :style="bannerBg">
+    <div class="banner" :style="bannerBg" v-if="showBanner">
       <div class="banner-conent" :style="!homeData.features && `padding-top: 7rem`">
         <header class="hero">
           <img v-if="homeData.heroImage" :src="$withBase(homeData.heroImage)" :alt="homeData.heroAlt || 'hero'" />
@@ -19,7 +19,7 @@
         >
           <div class="feature" v-for="(feature, index) in homeData.features" :key="index">
             <router-link :to="feature.link">
-              <img class="image_title" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
+              <img class="feature-img" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
               <h2>{{ feature.title }}</h2>
               <p>{{ feature.details }}</p>
             </router-link>
@@ -39,7 +39,7 @@
             <div class="slide-banner-wrapper">
               <div class="slide-item" v-for="(feature, index) in homeData.features" :key="index">
                 <router-link :to="feature.link">
-                  <img class="image_title" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
+                  <img class="feature-img" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
                   <h2>{{ feature.title }}</h2>
                   <p>{{ feature.details }}</p>
                 </router-link>
@@ -112,6 +112,7 @@ export default {
   data(){
     return {
       isMQMobile: false,
+
       slide: null,
       currentPageIndex: 0,
       playTimer: 0,
@@ -128,6 +129,11 @@ export default {
   },
   beforeMount(){
     this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
+    
+    if (this.$route.query.p) {
+      this.currentPage = Number(this.$route.query.p)
+    }
+
   },
   mounted() {
     if (this.isMQMobile) {
@@ -149,6 +155,13 @@ export default {
     clearTimeout(this.playTimer)
     this.slide && this.slide.destroy()
   },
+  watch: {
+    '$route.query.p'() {
+      if(!this.$route.query.p){
+        this.currentPage = 1
+      }
+    }
+  },
   methods: {
     init() {
       clearTimeout(this.playTimer)
@@ -188,10 +201,18 @@ export default {
     },
     handlePagination(i) { // 分页
       this.currentPage = i
-    }
+    },
+    getScrollTop () {
+      return window.pageYOffset
+        || document.documentElement.scrollTop
+        || document.body.scrollTop
+    },
   },
 
   computed: {
+    showBanner() { // 当分页不在第一页时隐藏banner栏
+      return this.$route.query.p && this.$route.query.p != 1 ? false : true
+    },
     bannerBg() {
       if (this.homeData.bannerBgImg) {
         return `background: url(${this.$withBase(this.homeData.bannerBgImg)}) center center / cover no-repeat`
@@ -275,7 +296,7 @@ export default {
         text-align center
         a
           color lighten($bannerTextColor,10%)
-          .image_title
+          .feature-img
             width 11rem
             height 11rem
             animation heart 1.2s ease-in-out 0s infinite alternate
@@ -288,7 +309,7 @@ export default {
           p
             opacity 0.8
       .feature:hover 
-        .image_title 
+        .feature-img 
           animation-play-state: running
         h2,p
           opacity .7
@@ -309,17 +330,16 @@ export default {
           height 300px
           width 100%
           text-align center
-          .image_title
+          a 
-            width: 10rem;
+            color lighten($bannerTextColor,10%)
-            height: 10rem;
+            .feature-img
-          h2
+              width 10rem
-            font-size: 1.1rem;
+              height 10rem
-            color: #fff;
+            h2
-            font-weight: 500;
+              font-size 1.1rem
-            border-bottom: none;
+              font-weight 500
-            padding-bottom: 0;
+              border-bottom none
-          p
+              padding-bottom 0
-            color: #b0b6be;
       .docs-wrapper
         position absolute
         bottom 25px
@@ -331,10 +351,16 @@ export default {
           width 8px
           height 8px
           border-radius 50%
-          background #2F455A
+          background var(--textColor)
+          opacity .9
           &.active
-            background #517EA9
+            opacity .5
-
+  
+  // 分页不在第一页时，隐藏banner栏
+  .main-wrapper
+    margin-top ($navbarHeight + .9rem)
+  .banner + *
+    margin-top 2rem
 
 @keyframes heart
   from{transform:translate(0,0)}
@@ -351,11 +377,12 @@ export default {
           .description
             font-size 1rem
         .feature
-          h2
+          a
-            font-size 1.1rem
+            h2
-          .image_title
+              font-size 1.1rem
-            width 10rem
+            .feature-img
-            height 10rem
+              width 9rem
+              height 9rem
   
 // 719px以下
 @media (max-width: $MQMobile)  
@@ -365,26 +392,6 @@ export default {
         .features
           display none!important
 
-    .main-wrapper
-      margin .9rem 0
-      padding 0
-      display block
-      .main-left
-        .post-list
-          margin-bottom 3rem
-          .post
-            border-radius 0
-        .pagination
-          margin-bottom 3rem
-      .main-right
-        .blogger-wrapper
-          display none
-        .card-box
-          margin 0 0 .9rem 0
-          border-radius 0
-          width 100%
-  
-
 // 419px以下
 @media (max-width: $MQMobileNarrow) 
   .home-wrapper

vuepress-theme-vdoing/components/MainLayout.vue

@@ -19,6 +19,7 @@
   display flex
   .main-left
     flex 1
+    width 100%
     .theme-vdoing-content.card-box
       padding 1rem 1.5rem
       margin-bottom .9rem
@@ -33,4 +34,25 @@
     .card-box
       margin 0 0 .9rem .9rem
       padding .95rem
+
+// 719px以下
+@media (max-width: $MQMobile) 
+  .main-wrapper
+    margin .9rem 0
+    padding 0
+    display block
+    .main-left
+      .post-list
+        margin-bottom 3rem
+        .post
+          border-radius 0
+      .pagination
+        margin-bottom 3rem
+    .main-right
+      .blogger-wrapper
+        display none
+      .card-box
+        margin 0 0 .9rem 0
+        border-radius 0
+        width 100%
 </style>

vuepress-theme-vdoing/components/NavLinks.vue

@@ -135,6 +135,12 @@ export default {
   .repo-link
     margin-left 1.5rem
 
+// 959
+@media (max-width: $MQNarrow)
+  .nav-links
+    .nav-item
+      margin-left 1.2rem
+
 @media (max-width: $MQMobile)
   .nav-links
     .nav-item, .repo-link

vuepress-theme-vdoing/components/Navbar.vue

@@ -108,7 +108,6 @@ $navbar-horizontal-padding = 1.5rem
   .links
     padding-left 1.5rem
     box-sizing border-box
-    // background-color white
     white-space nowrap
     font-size 0.9rem
     position absolute
@@ -123,6 +122,12 @@ $navbar-horizontal-padding = 1.5rem
     .navbar
       transform translateY(-100%)
 
+// 959
+@media (max-width: $MQNarrow)
+  .navbar
+    .site-name
+      display none
+
 @media (max-width: $MQMobile)
   .navbar
     padding-left 4rem

vuepress-theme-vdoing/components/Pagination.vue

@@ -198,15 +198,15 @@ export default {
 @media (max-width: $MQMobile)  
   .pagination
     > span // 左右按钮
-      padding .8rem 1.5rem
+      padding .9rem 1.5rem
     .pagination-list
       span
         width 2.3rem
         height 2.3rem
         line-height 2.3rem
-        margin .2rem
+        margin .25rem
 
-@media (max-width: 460px)  
+@media (max-width: 390px)  
   .pagination
     > span // 左右按钮
       padding .8rem 1.3rem

vuepress-theme-vdoing/components/PostList.vue

@@ -80,11 +80,19 @@ export default {
     this.setPosts()
   },
   mounted() {
-    this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 90
+    // this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240
   },
   watch: {
     currentPage() {
-      window.scrollTo({ top: this.postListOffsetTop }) // behavior: 'smooth'
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          p: this.currentPage
+        }
+      })
+      // setTimeout(() => {
+      //   window.scrollTo({ top: this.postListOffsetTop }) // behavior: 'smooth'
+      // },0)
       this.setPosts()
     },
     category() {
@@ -110,12 +118,12 @@ export default {
 
       this.sortPosts = posts.slice((currentPage-1)*perPage, currentPage*perPage)
     },
-    getElementToPageTop(el) {
+    // getElementToPageTop(el) {
-      if(el && el.parentElement) {
+    //   if(el && el.parentElement) {
-        return this.getElementToPageTop(el.parentElement) + el.offsetTop
+    //     return this.getElementToPageTop(el.parentElement) + el.offsetTop
-      }
+    //   }
-      return el.offsetTop
+    //   return el.offsetTop
-    }
+    // }
   }
 }
 </script>

vuepress-theme-vdoing/components/TagsPage.vue

@@ -55,6 +55,9 @@ export default {
     } else {
       this.total = this.$sortPosts.length
     }
+    if (this.$route.query.p) {
+      this.currentPage = Number(this.$route.query.p)
+    }
   },
   methods: {
     handlePagination(i) { // 分页
@@ -62,7 +65,7 @@ export default {
     }
   },
   watch: {
-    $route() {
+    '$route.query.tag'() {
       this.tag = this.$route.query.tag
       if (this.tag) {
         this.total = this.$groupPosts.tags[this.tag].length

vuepress-theme-vdoing/components/UpdateArticle.vue

@@ -85,8 +85,7 @@ export default {
     .article-title
       border-bottom 1px solid var(--borderColor)
       font-size 1.3rem
-      // font-weight bold
+      padding 1rem
-      padding 1rem 0 .5rem 1rem
       a 
         font-size 1.2rem
         color $accentColor

vuepress-theme-vdoing/package.json

@@ -1,8 +1,11 @@
 {
   "name": "vuepress-theme-vdoing",
+  "version": "1.0.0-beta.1",
   "author": {
-    "name": "Evan Xu"
+    "name": "gaoyi(Evan) Xu"
   },
+  "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
+  "homepage": "https://github.com/xugaoyi/vuepress-theme-vdoing#readme",
   "bugs": {
     "url": "https://github.com/xugaoyi/vuepress-theme-vdoing/issues"
   },
@@ -17,8 +20,6 @@
     "vuepress-plugin-container": "^2.0.2",
     "vuepress-plugin-smooth-scroll": "^0.0.3"
   },
-  "description": "Vdoing theme for VuePress",
-  "homepage": "https://github.com/xugaoyi/vuepress-theme-vdoing#readme",
   "keywords": [
     "documentation",
     "vue",
@@ -35,12 +36,8 @@
       "email": "894072666@qq.com"
     }
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/xugaoyi/vuepress-theme-vdoing.git"
-  },
+  }
-  "version": "1.0.0"
 }

vuepress-theme-vdoing/styles/palette.styl

@@ -24,6 +24,7 @@
 //***vdoing主题-变量***//
 
 // 颜色
+ 
 $bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
 $accentColor = #11A8CD
 $arrowBgColor = #ccc
@@ -67,8 +68,6 @@ $lineNumbersWrapperWidth = 2.5rem
   --codeColor: #fff
   codeThemeDark()
 
-//https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg
-
 // 阅读模式
 .theme-mode-read
   --badyBg: rgb(240,240,208)