feat: v1.12.0

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秒换一张。
+    // ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
-    // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~ 1.0, 默认0.5
+    // 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 () {
+  mounted() {
-    let { bodyBgImg, bodyBgImgOpacity,bodyBgImgInterval = 15 } = this.$themeConfig
+    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
+    <div class="pagination-list" v-if="pages <= 5">
-      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
+    <div class="pagination-list" v-else>
-      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)"
+        v-show="currentPage >= pages - 2"
-        :class="{active: currentPage === pages-1}"
+        :class="{ active: currentPage === pages - 1 }"
-        @click="goIndex(pages-1)"
+        @click="goIndex(pages - 1)"
-      >{{ pages-1 }}</span>
+        >{{ 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-top-right-radius 32px
-      border-bottom-right-radius 32px
+      // border-bottom-right-radius 32px
+      &::before
+        margin-right 0.3rem
     &.next
       right 0
-      border-top-left-radius 32px
+      // border-top-left-radius 32px
-      border-bottom-left-radius 32px
+      // border-bottom-left-radius 32px
       &::before
         float right
         margin-left 0.3rem

vdoing/components/PostList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="post-list" ref="postList">
+  <div class="post-list card-box" ref="postList">
     <transition-group tag="div" name="post">
       <div
-        class="post card-box"
+        class="post"
         :class="item.frontmatter.sticky && 'iconfont icon-zhiding'"
         v-for="item in sortPosts"
         :key="item.key"
@@ -169,8 +169,11 @@ export default {
   .post
     position relative
     padding 1rem 1.5rem
-    margin-bottom 0.9rem
+    // margin-bottom 0.9rem
     transition all 0.3s
+    border-bottom 1px solid var(--borderColor)
+    &:last-child
+      border-bottom none
     &.post-leave-active
       display none
     &.post-enter
@@ -243,4 +246,15 @@ export default {
           float right
           font-size 0.8rem
           margin 0.1rem 0 0 0.2rem
+.theme-style-line
+  .post-list
+    border 1px solid var(--borderColor)
+    // border-bottom none
+    border-radius 5px
+    overflow hidden
+    .post
+      // margin-bottom 0
+      // border none
+      // border-bottom 1px solid var(--borderColor)
+      // border-radius 0
 </style>

vdoing/components/RightMenu.vue

@@ -49,6 +49,10 @@ export default {
 </script>
 
 <style lang='stylus'>
+.theme-style-line
+  .right-menu-wrapper
+    .right-menu-margin
+      border-left 1px solid var(--borderColor)
 .right-menu-wrapper
   width $rightMenuWidth
   float right
@@ -56,7 +60,7 @@ export default {
   // margin-top -($navbarHeight *2 + 1.5rem)
   position sticky
   top 0
-  font-size 0.75rem
+  font-size 0.8rem
   .right-menu-margin
     margin-top: ($navbarHeight + 1rem)
     border-radius 3px

vdoing/components/TagsPage.vue

@@ -7,11 +7,7 @@
           :tagsData="$categoriesAndTags.tags"
           :tag="tag"
         />
-        <PostList
+        <PostList :currentPage="currentPage" :perPage="perPage" :tag="tag" />
-          :currentPage="currentPage"
-          :perPage="perPage"
-          :tag="tag"
-        />
         <Pagination
           :total="total"
           :perPage="perPage"
@@ -38,7 +34,7 @@ import Pagination from '@theme/components/Pagination'
 import TagsBar from '@theme/components/TagsBar'
 
 export default {
-  data () {
+  data() {
     return {
       tag: '',
       total: 0, // 总长
@@ -47,7 +43,7 @@ export default {
     }
   },
   components: { MainLayout, PostList, Pagination, TagsBar },
-  mounted () {
+  mounted() {
     const queryTag = this.$route.query.tag
 
     if (queryTag) {
@@ -61,12 +57,12 @@ export default {
     }
   },
   methods: {
-    handlePagination (i) { // 分页
+    handlePagination(i) { // 分页
       this.currentPage = i
     }
   },
   watch: {
-    '$route.query.tag' (tag) {
+    '$route.query.tag'(tag) {
       this.tag = tag ? decodeURIComponent(tag) : ''
 
       if (this.tag) {
@@ -85,7 +81,7 @@ export default {
 .tags-page
   .tags-wrapper
     position sticky
-    top ($navbarHeight + 0.9rem)
+    top: ($navbarHeight + 0.9rem)
     max-height calc(100vh - 10rem)
     min-height 4.2rem
     @media (max-width $MQMobile)
@@ -119,4 +115,11 @@ export default {
         display block
       .tags
         max-height 11.5rem
+.theme-style-line
+  .tags-page
+    .main-left
+      .tags-wrapper
+        @media (max-width $MQMobile)
+          margin-top -0.91rem
+          margin-bottom -1px
 </style>

vdoing/layouts/Layout.vue

@@ -262,7 +262,6 @@ export default {
         setTimeout(() => { t = p }, 0)
       }
     }, 300))
-
   },
   watch: {
     isSidebarOpen() {
@@ -280,7 +279,9 @@ export default {
       return htmlModules ? htmlModules[module] : ''
     },
     setBodyClass() {
-      document.body.className = 'theme-mode-' + this.themeMode
+      let { pageStyle = 'card', bodyBgImg } = this.$themeConfig
+      if (pageStyle !== 'card' && pageStyle !== 'line' || bodyBgImg) { pageStyle = 'card' }
+      document.body.className = `theme-mode-${this.themeMode} theme-style-${pageStyle}`
     },
     getScrollTop() {
       return window.pageYOffset

vdoing/package.json

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

vdoing/styles/index.styl

@@ -47,11 +47,19 @@ a,input,button
 .card-box // 卡片
   border-radius 5px
   background var(--mainBg)
-  box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
+  box-shadow 0px 0px 4px 0 rgba(0,0,0,.1)
   transition box-shadow .5s
   &:hover
     box-shadow 0 1px 15px 0 rgba(0,0,0,.1)
 
+.theme-style-line
+  @media (max-width: 719px)
+    margin-left: -1px;
+    margin-right: -1px;
+  .card-box
+    box-shadow 0 0
+    border: 1px solid var(--borderColor)
+
 .blur // 模糊滤镜
   backdrop-filter saturate(200%) blur(20px)
 
@@ -210,7 +218,7 @@ p,pre,.custom-block
 
 
 h1
-  font-size 1.8rem
+  font-size 1.9rem
   {$contentClass}:not(.custom) > & // 页面内容的首个h1标签隐藏
     &:first-child
       display none

vdoing/styles/palette.styl

@@ -53,7 +53,7 @@ $lineNumbersWrapperWidth = 2.5rem
   --customBlockBg: #f1f1f1
   --textColor: #00323c
   --textLightenColor: #0085AD
-  --borderColor: rgba(0,0,0,.15)
+  --borderColor: rgba(0,0,0,.12)
   --codeBg: #f6f6f6
   --codeColor: #525252
   codeThemeLight()
@@ -67,7 +67,8 @@ $lineNumbersWrapperWidth = 2.5rem
   --customBlockBg: rgb(39,39,43)
   --textColor: rgb(155,155,170)
   --textLightenColor: #0085AD
-  --borderColor: #2C2C3A
+  // --borderColor: #2C2C3A
+  --borderColor: #30363d
   --codeBg: #252526
   --codeColor: #fff
   codeThemeDark()
@@ -85,3 +86,11 @@ $lineNumbersWrapperWidth = 2.5rem
   --codeBg: #282c34
   --codeColor: #fff
   codeThemeDark()
+
+// 背景色整体一致
+.theme-style-line.theme-mode-light
+  --bodyBg: rgba(255,255,255,1)
+.theme-style-line.theme-mode-dark
+  --bodyBg: rgba(30,30,34,1)
+.theme-style-line.theme-mode-read
+  --bodyBg: rgba(245,245,213,1)

vdoing/styles/wrapper.styl

@@ -5,6 +5,7 @@ $vdoing-wrapper
   &:not(.footer)
     background var(--mainBg)
     box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
+    // box-shadow 0 0 3px 0 rgba(0,0,0,.1)
     margin-bottom 1rem
     @media (min-width $contentWidth + 80)
       border-radius 2px

vdoing/types/index.ts

@@ -31,6 +31,12 @@ export interface VdoingThemeConfig extends NoSidebar4DefaultThemeConfig {
    */
   categoryText?: string;
 
+  /**
+   * 页面风格
+   * @default 'card'
+   */
+  pageStyle?: 'card' | 'line';
+
   /**
    * body背景大图链接。单张图片 string | 多张图片 string[], 多张图片时每隔15秒换一张。
    * @default ''