v1.8.1

package.json

@@ -22,7 +22,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.8.0",
+    "vuepress-theme-vdoing": "^1.8.1",
     "yamljs": "^0.3.0"
   },
   "dependencies": {

theme-vdoing/components/Home.vue

@@ -3,12 +3,14 @@
     <!-- banner块 s -->
     <div
       class="banner"
-      :class="{'hide-banner': !showBanner}"
+      :class="{ 'hide-banner': !showBanner }"
       :style="bannerBgStyle"
     >
       <div
         class="banner-conent"
-        :style="!homeData.features && !homeData.heroImage && `padding-top: 7rem`"
+        :style="
+          !homeData.features && !homeData.heroImage && `padding-top: 7rem`
+        "
       >
         <header class="hero">
           <img
@@ -16,22 +18,14 @@
             :src="$withBase(homeData.heroImage)"
             :alt="homeData.heroAlt"
           />
-          <h1
+          <h1 v-if="homeData.heroText" id="main-title">
-            v-if="homeData.heroText"
+            {{ homeData.heroText }}
-            id="main-title"
+          </h1>
-          >{{ homeData.heroText }}</h1>
+          <p v-if="homeData.tagline" class="description">
-          <p
+            {{ homeData.tagline }}
-            v-if="homeData.tagline"
+          </p>
-            class="description"
+          <p class="action" v-if="homeData.actionText && homeData.actionLink">
-          >{{ homeData.tagline }}</p>
+            <NavLink class="action-button" :item="actionLink" />
-          <p
-            class="action"
-            v-if="homeData.actionText && homeData.actionLink"
-          >
-            <NavLink
-              class="action-button"
-              :item="actionLink"
-            />
           </p>
         </header>
 
@@ -45,10 +39,7 @@
             v-for="(feature, index) in homeData.features"
             :key="index"
           >
-            <router-link
+            <router-link v-if="feature.link" :to="feature.link">
-              v-if="feature.link"
-              :to="feature.link"
-            >
               <img
                 class="feature-img"
                 v-if="feature.imgUrl"
@@ -58,10 +49,7 @@
               <h2>{{ feature.title }}</h2>
               <p>{{ feature.details }}</p>
             </router-link>
-            <a
+            <a v-else href="javascript:;">
-              v-else
-              href="javascript:;"
-            >
               <img
                 class="feature-img"
                 v-if="feature.imgUrl"
@@ -84,20 +72,14 @@
         v-show="isMQMobile"
       >
         <div class="banner-wrapper">
-          <div
+          <div class="slide-banner-scroll" ref="slide">
-            class="slide-banner-scroll"
-            ref="slide"
-          >
             <div class="slide-banner-wrapper">
               <div
                 class="slide-item"
                 v-for="(feature, index) in homeData.features"
                 :key="index"
               >
-                <router-link
+                <router-link v-if="feature.link" :to="feature.link">
-                  v-if="feature.link"
-                  :to="feature.link"
-                >
                   <img
                     class="feature-img"
                     v-if="feature.imgUrl"
@@ -107,10 +89,7 @@
                   <h2>{{ feature.title }}</h2>
                   <p>{{ feature.details }}</p>
                 </router-link>
-                <a
+                <a v-else href="javascript:;">
-                  v-else
-                  href="javascript:;"
-                >
                   <img
                     class="feature-img"
                     v-if="feature.imgUrl"
@@ -128,7 +107,7 @@
               class="doc"
               v-for="(item, index) in homeData.features.length"
               :key="index"
-              :class="{'active': currentPageIndex === index}"
+              :class="{ active: currentPageIndex === index }"
             ></span>
           </div>
         </div>
@@ -147,11 +126,10 @@
         />
 
         <!-- 详情版文章列表 -->
-        <template v-else-if="!homeData.postList || homeData.postList === 'detailed'">
+        <template
-          <PostList
+          v-else-if="!homeData.postList || homeData.postList === 'detailed'"
-            :currentPage="currentPage"
+        >
-            :perPage="perPage"
+          <PostList :currentPage="currentPage" :perPage="perPage" />
-          />
           <Pagination
             :total="total"
             :perPage="perPage"
@@ -167,7 +145,10 @@
       <template #mainRight>
         <BloggerBar v-if="$themeConfig.blogger" />
         <CategoriesBar
-          v-if="$themeConfig.category !== false && $categoriesAndTags.categories.length"
+          v-if="
+            $themeConfig.category !== false &&
+            $categoriesAndTags.categories.length
+          "
           :categoriesData="$categoriesAndTags.categories"
           :length="10"
         />
@@ -176,7 +157,11 @@
           :tagsData="$categoriesAndTags.tags"
           :length="30"
         />
-        <div class="custom-html-box card-box" v-if="homeSidebarB" v-html="homeSidebarB"></div>
+        <div
+          class="custom-html-box card-box"
+          v-if="homeSidebarB"
+          v-html="homeSidebarB"
+        ></div>
       </template>
     </MainLayout>
   </div>
@@ -214,7 +199,7 @@ export default {
     }
   },
   computed: {
-    homeSidebarB() {
+    homeSidebarB () {
       const { htmlModules } = this.$themeConfig
       return htmlModules ? htmlModules.homeSidebarB : ''
     },
@@ -499,8 +484,8 @@ export default {
           padding-bottom 2rem
     .main-right
       .custom-html-box
-        padding: 0;
+        padding 0
-        overflow: hidden;
+        overflow hidden
 @keyframes heart
   from
     transform translate(0, 0)

theme-vdoing/enhanceApp.js

@@ -1,3 +1,10 @@
+// 解决代码选项卡无法加载的问题
+import Vue from 'vue'
+import CodeBlock from "@theme/global-components/CodeBlock.vue"
+import CodeGroup from "@theme/global-components/CodeGroup.vue"
+// Register the Vue global component
+Vue.component(CodeBlock)
+Vue.component(CodeGroup)
 
 //  注：此文件在浏览器端运行
 import postsMixin from '@theme/mixins/posts'

theme-vdoing/global-components/CodeBlock.vue

@@ -30,4 +30,9 @@ export default {
 .theme-code-block > pre {
   background-color: orange;
 }
+@media (max-width: 419px) {
+  .theme-code-group div[class*='language-'] {
+    margin: 0;
+  }
+}
 </style>

theme-vdoing/index.js

@@ -10,10 +10,17 @@ const log = console.log
 const CARD_LIST = 'cardList'
 const CARD_IMG_LIST = 'cardImgList'
 
+// siteConfig base 配置
+let base = ''
+
+
 // Theme API.
 module.exports = (options, ctx) => {
   const { sourceDir, themeConfig, siteConfig } = ctx
 
+  // base路径
+  base = siteConfig.base || ''
+
   // 自动设置front matter
   setFrontmatter(sourceDir, themeConfig)
 
@@ -227,7 +234,7 @@ function getCardListDOM (dataList, row) {
       <${item.link ? 'a href="' + item.link + '" target="_blank"' : 'span'} class="card-item ${row ? 'row-' + row : ''}"
          style="${item.bgColor ? 'background-color:' + item.bgColor + ';--randomColor:' + item.bgColor + ';' : '--randomColor: var(--bodyBg);'}${item.textColor ? 'color:' + item.textColor + ';' : ''}"
       >
-        ${item.avatar ? '<img src="' + item.avatar + '" class="no-zoom">' : ''}
+        ${item.avatar ? '<img src="' + withBase(item.avatar) + '" class="no-zoom">' : ''}
         <div>
           <p class="name">${item.name}</p>
           <p class="desc">${item.desc}</p>
@@ -247,7 +254,7 @@ function getCardImgListDOM (dataList, row) {
       <div class="card-item ${row ? 'row-' + row : ''}" >
         <a href="${item.link}" target="_blank">
           <div class="box-img">
-              <img src="${item.img}" class="no-zoom">
+              <img src="${withBase(item.img)}" class="no-zoom">
           </div>
           <div class="box-info">
               <p class="name">${item.name}</p>
@@ -255,7 +262,7 @@ function getCardImgListDOM (dataList, row) {
           </div>
 
           ${item.avatar || item.author ? `<div class="box-footer">
-              ${item.avatar ? `<img src="${item.avatar}" class="no-zoom">` : ''}
+              ${item.avatar ? `<img src="${withBase(item.avatar)}" class="no-zoom">` : ''}
               ${item.author ? `<span>${item.author}</span>` : ''}
           </div>`: ''}
         </a>
@@ -264,3 +271,12 @@ function getCardImgListDOM (dataList, row) {
   })
   return listDOM
 }
+
+// 添加base路径
+function withBase (path) {
+  if (base && path.charAt(0) === '/') {
+    return base + path.slice(1);
+  } else {
+    return path;
+  }
+}

theme-vdoing/package.json

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

theme-vdoing/styles/mobile.styl

@@ -6,7 +6,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.9
 @media (max-width: $MQNarrow)
   .sidebar
     font-size 15px
-    
+
 @media (max-width: $MQMobile)
   .sidebar
     width $sidebarWidth * 0.95
@@ -14,7 +14,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.9
 @media (min-width: ($MQMobile + 1px)) and (max-width: $MQNarrow)
   .sidebar
     width $mobileSidebarWidth
-  .theme-container 
+  .theme-container
     &.sidebar-open
       .page
         padding-left ($mobileSidebarWidth + .8rem)!important
@@ -50,7 +50,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.9
 
 // 侧边栏显示隐藏的适配
 @media (min-width: ($MQMobile + 1px)) // 720px
-  .theme-container 
+  .theme-container
     &.sidebar-open
       .sidebar-mask
         display: none
@@ -75,4 +75,4 @@ $mobileSidebarWidth = $sidebarWidth * 0.9
           left $mobileSidebarWidth
   .theme-container.no-sidebar
     .sidebar-button
-      display none
+      display none