v1.4.4

2020-09-02 21:37:10 +08:00 · 2020-09-02 21:37:10 +08:00 · d9db2fab06
parent 87b3faa080
commit d9db2fab06
4 changed files with 120 additions and 83 deletions
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@ -3,12 +3,12 @@ const nav = require('./config/nav.js');
 module.exports = {
  title: "Evan's blog",
  description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
-  // base: '/vuepress-theme-vdoing/', // '/<github仓库名>/'， 默认'/'
+  // base: '/', // '/<github仓库名>/'， 默认'/'
  head: [ // 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
    ['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
-    ['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
-    ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],// 百度统计的站点拥有者验证
-    ['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
+    ['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown' }],
+    ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc' }],// 百度统计的站点拥有者验证
+    ['meta', { name: 'theme-color', content: '#11a8cd' }], // 移动浏览器主题颜色
    // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放
  ],
  markdown: {
@ -63,12 +63,12 @@ module.exports = {
      name: 'xugaoyi', // 必需
      link: 'https://github.com/xugaoyi' // 可选的
    },
-    blogger:{ // 博主信息，显示在首页侧边栏
+    blogger: { // 博主信息，显示在首页侧边栏
      avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
      name: 'Evan Xu',
      slogan: '前端界的小学生'
    },
-    social:{ // 社交图标，显示于博主信息栏和页脚栏
+    social: { // 社交图标，显示于博主信息栏和页脚栏
      // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
      icons: [
        {
@ -88,7 +88,7 @@ module.exports = {
        }
      ]
    },
-    footer:{ // 页脚信息
+    footer: { // 页脚信息
      createYear: 2019, // 博客创建年份
      copyrightInfo: 'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签
    }
@ -146,7 +146,7 @@ module.exports = {
    [
      'vuepress-plugin-zooming', // 放大图片
      {
-        selector:'.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
+        selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
        options: {
          bgColor: 'rgba(0,0,0,0.6)'
        },
@ -182,7 +182,7 @@ module.exports = {
          id: "<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>", //  页面的唯一标识,长度不能超过50
          title: "「评论」<%- frontmatter.title %>", // GitHub issue 的标题
          labels: ["Gitalk", "Comment"], // GitHub issue 的标签
-          body:"页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
+          body: "页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
        }
      }
    ],
--- a/package.json
+++ b/package.json
@ -21,7 +21,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.4.3",
+    "vuepress-theme-vdoing": "^1.4.4",
    "yamljs": "^0.3.0"
  },
  "dependencies": {
--- a/theme-vdoing/components/Home.vue
+++ b/theme-vdoing/components/Home.vue
@ -1,28 +1,56 @@
 <template>
  <div class="home-wrapper">
-
    <!-- banner块 s -->
-    <div class="banner" :class="{'hide-banner': !showBanner}" :style="bannerBgStyle">
-      <div class="banner-conent" :style="!homeData.features && !homeData.heroImage && `padding-top: 7rem`">
+    <div
+      class="banner"
+      :class="{'hide-banner': !showBanner}"
+      :style="bannerBgStyle"
+    >
+      <div
+        class="banner-conent"
+        :style="!homeData.features && !homeData.heroImage && `padding-top: 7rem`"
+      >
        <header class="hero">
-          <img v-if="homeData.heroImage" :src="$withBase(homeData.heroImage)" :alt="homeData.heroAlt || 'hero'" />
-          <h1 v-if="homeData.heroText !== null" id="main-title">{{ homeData.heroText || $title || 'Hello' }}</h1>
-          <p class="description">{{ homeData.tagline || $description || 'Welcome to your VuePress site' }}</p>
-          <p class="action" v-if="homeData.actionText && homeData.actionLink">
-            <NavLink class="action-button" :item="actionLink" />
+          <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"
+            />
          </p>
        </header>

        <!-- PC端features块 s -->
-        <div class="features"
-         v-if="homeData.features && homeData.features.length && !isMQMobile"
+        <div
+          class="features"
+          v-if="homeData.features && homeData.features.length && !isMQMobile"
        >
-          <div class="feature" v-for="(feature, index) in homeData.features" :key="index">
+          <div
+            class="feature"
+            v-for="(feature, index) in homeData.features"
+            :key="index"
+          >
            <router-link
              v-if="feature.link"
              :to="feature.link"
            >
-              <img class="feature-img"
+              <img
+                class="feature-img"
                v-if="feature.imgUrl"
                :src="$withBase(feature.imgUrl)"
                :alt="feature.title"
@ -34,7 +62,8 @@
              v-else
              href="javascript:;"
            >
-              <img class="feature-img"
+              <img
+                class="feature-img"
                v-if="feature.imgUrl"
                :src="$withBase(feature.imgUrl)"
                :alt="feature.title"
@ -47,21 +76,30 @@
        <!-- PC端features块 e -->
      </div>

-      <!-- 移动端features块 s --> <!-- isMQMobile放到v-if上线后会报错 -->
+      <!-- 移动端features块 s -->
+      <!-- isMQMobile放到v-if上线后会报错 -->
      <div
        class="slide-banner"
        v-if="homeData.features && homeData.features.length"
        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">
+              <div
+                class="slide-item"
+                v-for="(feature, index) in homeData.features"
+                :key="index"
+              >
                <router-link
                  v-if="feature.link"
                  :to="feature.link"
                >
-                  <img class="feature-img"
+                  <img
+                    class="feature-img"
                    v-if="feature.imgUrl"
                    :src="$withBase(feature.imgUrl)"
                    :alt="feature.title"
@ -73,7 +111,8 @@
                  v-else
                  href="javascript:;"
                >
-                  <img class="feature-img"
+                  <img
+                    class="feature-img"
                    v-if="feature.imgUrl"
                    :src="$withBase(feature.imgUrl)"
                    :alt="feature.title"
@ -89,7 +128,8 @@
              class="doc"
              v-for="(item, index) in homeData.features.length"
              :key="index"
-              :class="{'active': currentPageIndex === index}"></span>
+              :class="{'active': currentPageIndex === index}"
+            ></span>
          </div>
        </div>
      </div>
@ -97,22 +137,20 @@
    </div>
    <!-- banner块 e -->

-
    <MainLayout>
      <template #mainLeft>
-
        <!-- 简约版文章列表 -->
        <UpdateArticle
          class="card-box"
          v-if="homeData.postList === 'simple'"
          :length="5"
        />
-        
+
        <!-- 详情版文章列表 -->
        <template v-else-if="!homeData.postList || homeData.postList === 'detailed'">
          <PostList
-          :currentPage="currentPage"
-          :perPage="perPage"
+            :currentPage="currentPage"
+            :perPage="perPage"
          />
          <Pagination
            :total="total"
@ -123,24 +161,23 @@
          />
        </template>

-        <Content class="theme-vdoing-content custom card-box"/>
+        <Content class="theme-vdoing-content custom card-box" />
      </template>

      <template #mainRight>
-        <BloggerBar  v-if="$themeConfig.blogger" />
+        <BloggerBar v-if="$themeConfig.blogger" />
        <CategoriesBar
          v-if="$themeConfig.category !== false && $categoriesAndTags.categories.length"
          :categoriesData="$categoriesAndTags.categories"
          :length="10"
        />
        <TagsBar
-          v-if="$themeConfig.tag !== false && $categoriesAndTags.tags.length" 
+          v-if="$themeConfig.tag !== false && $categoriesAndTags.tags.length"
          :tagsData="$categoriesAndTags.tags"
          :length="30"
        />
      </template>
    </MainLayout>
-
  </div>
 </template>

@ -161,7 +198,7 @@ const MOBILE_DESKTOP_BREAKPOINT = 720 // refer to config.styl
 BScroll.use(Slide)

 export default {
-  data(){
+  data () {
    return {
      isMQMobile: false,

@ -176,13 +213,13 @@ export default {
    }
  },
  components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination },
-  created() {
+  created () {
    this.total = this.$sortPosts.length
  },
-  beforeMount(){
+  beforeMount () {
    this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
  },
-  mounted() {
+  mounted () {
    if (this.$route.query.p) {
      this.currentPage = Number(this.$route.query.p)
    }
@ -193,22 +230,22 @@ export default {

    window.addEventListener('resize', () => {
      this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false;
-      if(this.isMQMobile && !this.slide && !this.mark){
+      if (this.isMQMobile && !this.slide && !this.mark) {
        this.mark++
        setTimeout(() => {
          this.init()
-        },60)
+        }, 60)
      }
    })

  },
-  beforeDestroy() {
+  beforeDestroy () {
    clearTimeout(this.playTimer)
    this.slide && this.slide.destroy()
  },
  watch: {
-    '$route.query.p'() {
-      if(!this.$route.query.p){
+    '$route.query.p' () {
+      if (!this.$route.query.p) {
        this.currentPage = 1
      } else {
        this.currentPage = Number(this.$route.query.p)
@ -223,7 +260,7 @@ export default {
    }
  },
  methods: {
-    init() {
+    init () {
      clearTimeout(this.playTimer)
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true, // x轴滚动
@ -253,13 +290,13 @@ export default {
      })
      this.autoGoNext()
    },
-    autoGoNext() {
+    autoGoNext () {
      clearTimeout(this.playTimer)
      this.playTimer = setTimeout(() => {
        this.slide.next()
      }, 4000)
    },
-    handlePagination(i) { // 分页
+    handlePagination (i) { // 分页
      this.currentPage = i
    },
    getScrollTop () {
@ -270,15 +307,15 @@ export default {
  },

  computed: {
-    showBanner() { // 当分页不在第一页时隐藏banner栏
+    showBanner () { // 当分页不在第一页时隐藏banner栏
      return this.$route.query.p
-       && this.$route.query.p != 1
-       && (!this.homeData.postList || this.homeData.postList === 'detailed')
-       ? false : true
+        && this.$route.query.p != 1
+        && (!this.homeData.postList || this.homeData.postList === 'detailed')
+        ? false : true
    },
-    bannerBgStyle() {
+    bannerBgStyle () {
      let bannerBg = this.homeData.bannerBg
-      if(!bannerBg || bannerBg === 'auto') { // 默认
+      if (!bannerBg || bannerBg === 'auto') { // 默认
        if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景
          return ''
        } else { // 网格纹背景
@ -297,12 +334,12 @@ export default {
      }

    },
-    homeData() {
+    homeData () {
      return {
        ...this.$page.frontmatter
      }
    },
-    actionLink() {
+    actionLink () {
      return {
        link: this.homeData.actionLink,
        text: this.homeData.actionText
@ -327,7 +364,7 @@ export default {
      position relative
      z-index 1
      overflow hidden
-      .hero 
+      .hero
        text-align center
        margin-top 3rem
        img
@ -335,18 +372,18 @@ export default {
          max-height 240px
          display block
          margin 2rem auto 1.5rem
-        h1 
+        h1
          margin 0
          font-size 3.2rem
-        .description, .action 
+        .description, .action
          margin 1.5rem auto

-        .description 
+        .description
          max-width 40rem
          font-size 1.1rem
          line-height 1.3
          opacity .9
-        .action-button 
+        .action-button
          display inline-block
          font-size 1.2rem
          background-color $accentColor
@ -356,10 +393,10 @@ export default {
          box-sizing border-box
          border-bottom 1px solid darken($accentColor, 10%)
          color #fff
-          &:hover 
+          &:hover
            background-color lighten($accentColor, 10%)
      // pc端features
-      .features 
+      .features
        padding 2rem 0
        margin-top 2.5rem
        display flex
@ -380,7 +417,7 @@ export default {
            height 10rem
            animation heart 1.2s ease-in-out 0s infinite alternate
            animation-play-state paused
-          h2 
+          h2
            font-weight 500
            font-size 1.3rem
            border-bottom none
@ -388,12 +425,12 @@ export default {
          p
            opacity 0.8
            padding 0 .8rem
-      .feature:hover 
-        .feature-img 
+      .feature:hover
+        .feature-img
          animation-play-state: running
        h2,p
          color $accentColor
-          
+

    // 移动端滑动图标
    .slide-banner
@ -410,7 +447,7 @@ export default {
          height 300px
          width 100%
          text-align center
-          a 
+          a
            // color lighten($bannerTextColor,10%)
            color inherit
            .feature-img
@ -439,7 +476,7 @@ export default {
          opacity .9
          &.active
            opacity .5
-  
+
  // 分页不在第一页时，隐藏banner栏
  .main-wrapper
    margin-top 2rem
@ -448,8 +485,8 @@ export default {
    & + .main-wrapper
       margin-top ($navbarHeight + .9rem)

-  .main-wrapper   
-    .main-left 
+  .main-wrapper
+    .main-left
      .card-box
        margin-bottom .9rem
      .pagination
@ -483,9 +520,9 @@ export default {
            .feature-img
              width 9rem
              height 9rem
-  
+
 // 719px以下
-@media (max-width: $MQMobile)  
+@media (max-width: $MQMobile)
  .home-wrapper
    .banner
      .banner-conent
@ -493,22 +530,22 @@ export default {
          display none!important

 // 419px以下
-@media (max-width: $MQMobileNarrow) 
+@media (max-width: $MQMobileNarrow)
  .home-wrapper
-    .banner-conent 
+    .banner-conent
      padding-left 1.5rem
      padding-right 1.5rem

-      .hero 
-        img 
+      .hero
+        img
          max-height 210px
          margin 2rem auto 1.2rem
-        h1 
+        h1
          font-size: 2rem
        h1, .description, .action
          margin: 1.2rem auto

-        .description 
+        .description
          font-size: 1.2rem

        .action-button
--- a/theme-vdoing/package.json
+++ b/theme-vdoing/package.json
@ -1,6 +1,6 @@
 {
  "name": "vuepress-theme-vdoing",
-  "version": "1.4.3",
+  "version": "1.4.4",
  "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
  "author": {
    "name": "gaoyi(Evan) Xu"