feat: v1.12.0

Author: xugaoyi

docs/.vuepress/config.ts

@@ -130,12 +130,15 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
     // archive: false, // 是否打开归档功能，默认true
     // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
 
+    // pageStyle: 'line', // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框
+
     // bodyBgImg: [
     //   '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/20200507175846.jpeg'
-    // ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时每隔15秒换一张。
-    // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~ 1.0, 默认0.5
+    // ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
+    // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~1.0, 默认0.5
+    // bodyBgImgInterval: 15, // body多张背景图时的切换间隔, 默认15，单位s
     // titleBadge: false, // 文章标题前的图标是否显示，默认true
     // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
     //   '图标地址1',

package.json

@@ -24,7 +24,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.11.3",
+    "vuepress-theme-vdoing": "^1.12.0",
     "yamljs": "^0.3.0"
   }
 }

vdoing/components/ArchivesPage.vue

@@ -123,6 +123,11 @@ export default {
 <style lang='stylus'>
 @require '../styles/wrapper.styl'
 
+.theme-style-line
+  .archives-page .theme-vdoing-wrapper
+    box-shadow 0 0
+    // border 1px solid var(--borderColor)
+    // border-radius 5px
 .archives-page
   .theme-vdoing-wrapper
     @extend $vdoing-wrapper

vdoing/components/ArticleInfo.vue

@@ -140,6 +140,10 @@ export default {
 <style lang='stylus' scoped>
 @require '../styles/wrapper.styl'
 
+.theme-style-line
+  .articleInfo-wrap
+    .articleInfo
+      padding-top 0.5rem
 .articleInfo-wrap
   @extend $wrapper
   position relative

vdoing/components/BodyBgImg.vue

@@ -8,14 +8,14 @@
 <script>
 import { type } from '../util'
 export default {
-  data () {
+  data() {
     return {
       bgImg: '',
       opacity: 0.5
     }
   },
-  mounted () {
-    let { bodyBgImg, bodyBgImgOpacity,bodyBgImgInterval = 15 } = this.$themeConfig
+  mounted() {
+    let { bodyBgImg, bodyBgImgOpacity, bodyBgImgInterval = 15 } = this.$themeConfig
 
     if (type(bodyBgImg) === 'string') {
       this.bgImg = bodyBgImg
@@ -30,6 +30,12 @@ export default {
           count = 0
         }
         this.bgImg = bodyBgImg[count]
+
+        // 预加载下一张图片
+        if (bodyBgImg[count + 1]) {
+          const img = new Image()
+          img.src = bodyBgImg[count + 1]
+        }
       }, bodyBgImgInterval * 1000);
     }
 

vdoing/components/CategoriesPage.vue

@@ -38,7 +38,7 @@ import Pagination from '@theme/components/Pagination'
 import CategoriesBar from '@theme/components/CategoriesBar'
 
 export default {
-  data () {
+  data() {
     return {
       category: '',
       total: 0, // 总长
@@ -47,7 +47,7 @@ export default {
     }
   },
   components: { MainLayout, PostList, Pagination, CategoriesBar },
-  mounted () {
+  mounted() {
     const queryCategory = this.$route.query.category
     if (queryCategory) {
       this.category = queryCategory
@@ -70,12 +70,12 @@ export default {
     }
   },
   methods: {
-    handlePagination (i) { // 分页
+    handlePagination(i) { // 分页
       this.currentPage = i
     }
   },
   watch: {
-    '$route.query.category' (category) {
+    '$route.query.category'(category) {
       this.category = category ? decodeURIComponent(category) : ''
       if (this.category) {
         this.total = this.$groupPosts.categories[this.category].length
@@ -128,4 +128,13 @@ export default {
         display block
       .categories
         max-height 12.3rem
+.theme-style-line
+  .categories-page
+    .main-left
+      .categories-wrapper
+        @media (max-width $MQMobile)
+          margin-top -0.91rem
+          margin-bottom -1px
+          padding 0.9rem 0.2rem
+          padding-bottom 0.5rem
 </style>

vdoing/components/Home.vue

@@ -469,12 +469,13 @@ export default {
     margin-top 2rem
     .main-left
       .card-box
-        margin-bottom 0.9rem
+        margin-bottom 2rem
       .pagination
-        margin-bottom 4rem
+        margin-bottom 3rem
       .theme-vdoing-content
         padding 0 2rem
         overflow hidden
+        border none
         &>:first-child
           padding-top 2rem
         &>:last-child
@@ -534,4 +535,8 @@ export default {
       .feature
         h2
           font-size 1.25rem
+.theme-style-line
+  .main-wrapper
+    @media (max-width 719px)
+      margin-top -1px
 </style>

vdoing/components/MainLayout.vue

@@ -32,7 +32,7 @@
       @media (max-width 900px)
         width 235px
     .card-box
-      margin 0 0 0.9rem 0.9rem
+      margin 0 0 0.8rem 0.8rem
       padding-top 0.95rem
       padding-bottom 0.95rem
 // 719px以下
@@ -56,4 +56,9 @@
         margin 0 0 0.9rem 0
         border-radius 0
         width 100%
+  .theme-style-line
+    .main-wrapper
+      .main-right
+        .card-box
+          margin -1px 0 0 0
 </style>

vdoing/components/Page.vue

@@ -3,6 +3,7 @@
     <main class="page">
       <div :class="`theme-vdoing-wrapper ${bgStyle}`">
         <ArticleInfo v-if="isArticle()" />
+        <div v-else class="placeholder" />
         <component
           class="theme-vdoing-content"
           v-if="pageComponent"
@@ -124,6 +125,16 @@ export default {
     padding-top: ($navbarHeight + 1.5rem)
   >*
     @extend $vdoing-wrapper
+.theme-style-line
+  .page
+    @media (min-width $MQMobile)
+      padding-top $navbarHeight
+    &>*
+      &:not(.footer)
+        box-shadow 0 0
+    .placeholder
+      @media (min-width 720px)
+        height 1.2rem
 .theme-vdoing-wrapper
   .content-wrapper
     position relative

vdoing/components/Pagination.vue

@@ -2,36 +2,32 @@
   <div class="pagination">
     <span
       class="card-box prev iconfont icon-jiantou-zuo"
-      :class="{disabled: currentPage === 1}"
+      :class="{ disabled: currentPage === 1 }"
       @click="goPrex()"
     >
       <p>上一页</p>
     </span>
 
     <!-- 分页在5页及以下时 -->
-    <div
-      class="pagination-list"
-      v-if="pages <= 5"
-    >
+    <div class="pagination-list" v-if="pages <= 5">
       <span
         class="card-box"
         v-for="item in pages"
         :key="item"
-        :class="{active: currentPage === item}"
+        :class="{ active: currentPage === item }"
         @click="goIndex(item)"
-      >{{item}}</span>
+        >{{ item }}</span
+      >
     </div>
     <!-- 分页在5页以上 -->
-    <div
-      class="pagination-list"
-      v-else
-    >
+    <div class="pagination-list" v-else>
       <!-- 一号位 -->
       <span
         class="card-box"
-        :class="{active: currentPage === 1}"
+        :class="{ active: currentPage === 1 }"
         @click="goIndex(1)"
-      >1</span>
+        >1</span
+      >
 
       <!-- 二号位 -->
       <span
@@ -44,42 +40,46 @@
       <span
         class="card-box"
         v-show="currentPage <= 3"
-        :class="{active: currentPage === 2}"
+        :class="{ active: currentPage === 2 }"
         @click="goIndex(2)"
-      >2</span>
+        >2</span
+      >
 
       <!-- 三号位 -->
       <span
         class="card-box"
-        :class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
+        :class="{ active: currentPage >= 3 && currentPage <= pages - 2 }"
         @click="goIndex(threeNum())"
-      >{{ threeNum() }}</span>
+        >{{ threeNum() }}</span
+      >
 
       <!-- 四号位 -->
       <span
         class="ellipsis ell-four"
-        v-show="currentPage < (pages - 2)"
+        v-show="currentPage < pages - 2"
         @click="goIndex(currentPage + 2)"
         title="下两页"
       />
       <span
         class="card-box"
-        v-show="currentPage >= (pages - 2)"
-        :class="{active: currentPage === pages-1}"
-        @click="goIndex(pages-1)"
-      >{{ pages-1 }}</span>
+        v-show="currentPage >= pages - 2"
+        :class="{ active: currentPage === pages - 1 }"
+        @click="goIndex(pages - 1)"
+        >{{ pages - 1 }}</span
+      >
 
       <!-- 五号位 -->
       <span
         class="card-box"
-        :class="{active: currentPage === pages}"
+        :class="{ active: currentPage === pages }"
         @click="goIndex(pages)"
-      >{{pages}}</span>
+        >{{ pages }}</span
+      >
     </div>
 
     <span
       class="card-box next iconfont icon-jiantou-you"
-      :class="{disabled: currentPage === pages}"
+      :class="{ disabled: currentPage === pages }"
       @click="goNext()"
     >
       <p>下一页</p>
@@ -104,12 +104,12 @@ export default {
     }
   },
   computed: {
-    pages () { // 总页数
+    pages() { // 总页数
       return Math.ceil(this.total / this.perPage)
     }
   },
   methods: {
-    threeNum () { // 三号位页码计算
+    threeNum() { // 三号位页码计算
       let num = 3
       const currentPage = this.currentPage
       const pages = this.pages
@@ -122,24 +122,24 @@ export default {
       }
       return num
     },
-    goPrex () {
+    goPrex() {
       let currentPage = this.currentPage
       if (currentPage > 1) {
         this.handleEmit(--currentPage)
       }
     },
-    goNext () {
+    goNext() {
       let currentPage = this.currentPage
       if (currentPage < this.pages) {
         this.handleEmit(++currentPage)
       }
     },
-    goIndex (i) {
+    goIndex(i) {
       if (i !== this.currentPage) {
         this.handleEmit(i)
       }
     },
-    handleEmit (i) {
+    handleEmit(i) {
       this.$emit('getCurrentPage', i)
     }
   }
@@ -151,6 +151,9 @@ export default {
   position relative
   height 60px
   text-align center
+  @media (max-width 720px)
+    margin-left 1px
+    margin-right 1px
   span
     line-height 1rem
     opacity 0.9
@@ -176,16 +179,20 @@ export default {
     top 0
     padding 1rem 1.2rem
     font-size 0.95rem
+    &::before
+      font-size 0.4rem
     &.disabled
       color rgba(125, 125, 125, 0.5)
     &.prev
       left 0
-      border-top-right-radius 32px
-      border-bottom-right-radius 32px
+      // border-top-right-radius 32px
+      // border-bottom-right-radius 32px
+      &::before
+        margin-right 0.3rem
     &.next
       right 0
-      border-top-left-radius 32px
-      border-bottom-left-radius 32px
+      // border-top-left-radius 32px
+      // border-bottom-left-radius 32px
       &::before
         float right
         margin-left 0.3rem