v1.8.1

xugaoyi · Jan 29, 2021 · ee0ff29 · ee0ff29
1 parent 127b439
commit ee0ff29
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 58 deletions.
diff --git a/package.json b/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": {

diff --git a/theme-vdoing/components/Home.vue b/theme-vdoing/components/Home.vue
@@ -3,35 +3,29 @@
  <!-- 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
  v-if="homeData.heroImage"
  :src="$withBase(homeData.heroImage)"
  :alt="homeData.heroAlt"
  />
- <h1
- v-if="homeData.heroText"
- id="main-title"
- >{{ homeData.heroText }}</h1>
- <p
- v-if="homeData.tagline"
- class="description"
- >{{ homeData.tagline }}</p>
- <p
- class="action"
- v-if="homeData.actionText && homeData.actionLink"
- >
- <NavLink
- class="action-button"
- :item="actionLink"
- />
+ <h1 v-if="homeData.heroText" id="main-title">
+ {{ homeData.heroText }}
+ </h1>
+ <p v-if="homeData.tagline" class="description">
+ {{ homeData.tagline }}
+ </p>
+ <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
- v-if="feature.link"
- :to="feature.link"
- >
+ <router-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
- v-else
- href="javascript:;"
- >
+ <a v-else href="javascript:;">
  <img
  class="feature-img"
  v-if="feature.imgUrl"
@@ -84,20 +72,14 @@
  v-show="isMQMobile"
  >
  <div class="banner-wrapper">
- <div
- class="slide-banner-scroll"
- ref="slide"
- >
+ <div 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
- v-if="feature.link"
- :to="feature.link"
- >
+ <router-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
- v-else
- href="javascript:;"
- >
+ <a 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'">
- <PostList
- :currentPage="currentPage"
- :perPage="perPage"
- />
+ <template
+ v-else-if="!homeData.postList || homeData.postList === 'detailed'"
+ >
+ <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;
- overflow: hidden;
+ padding 0
+ overflow hidden
 @keyframes heart
  from
  transform translate(0, 0)

diff --git a/theme-vdoing/enhanceApp.js b/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'

diff --git a/theme-vdoing/global-components/CodeBlock.vue b/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>
diff --git a/theme-vdoing/index.js b/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,15 +254,15 @@ 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>
  ${item.desc ? `<p class="desc">${item.desc}</p>` : ''}
  </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;
+ }
+}
diff --git a/theme-vdoing/package.json b/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"

diff --git a/theme-vdoing/styles/mobile.styl b/theme-vdoing/styles/mobile.styl
@@ -6,15 +6,15 @@ $mobileSidebarWidth = $sidebarWidth * 0.9
 @media (max-width: $MQNarrow)
  .sidebar
  font-size 15px
- 
+
 @media (max-width: $MQMobile)
  .sidebar
  width $sidebarWidth * 0.95
 
 @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