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秒换一张。
- // 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