fix: Optimize HomeBlog.vue

components/Home.vue

@@ -3,33 +3,33 @@
     <div class="hero">
       <ModuleTransition>
         <img
-          v-if="data.isShowHeroImage !== false && recoShowModule"
+          v-if="recoShowModule && $frontmatter.isShowHeroImage !== false"
           :style="heroImageStyle"
-          :src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
+          :src="$frontmatter.heroImage ? $withBase($frontmatter.heroImage) : require('../images/icon_vuepress_reco.png')"
           alt="hero">
       </ModuleTransition>
       <ModuleTransition delay="0.08">
-        <h1 v-if="data.isShowTitleInHome !== false && recoShowModule">{{ data.heroText || $title || '午后南杂' }}</h1>
+        <h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
       </ModuleTransition>
       <ModuleTransition delay="0.16">
         <p v-if="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
       </ModuleTransition>
       <ModuleTransition delay="0.24">
-        <p class="huawei" v-if="$themeConfig.huawei === true && recoShowModule">
+        <p class="huawei" v-if="recoShowModule && $themeConfig.huawei === true">
           <i class="iconfont reco-huawei" style="color: #fc2d38"></i>
           &nbsp;&nbsp;&nbsp;华为，为中华而为之！
         </p>
       </ModuleTransition>
       <ModuleTransition delay="0.32">
-        <p class="action" v-if="data.actionText && data.actionLink && recoShowModule">
+        <p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
           <NavLink class="action-button" :item="actionLink"/>
         </p>
       </ModuleTransition>
     </div>
 
     <ModuleTransition delay="0.4">
-      <div class="features" v-if="data.features && data.features.length && recoShowModule">
-        <div v-for="(feature, index) in data.features" :key="index" class="feature">
+      <div class="features" v-if="recoShowModule && $frontmatter.features && $frontmatter.features.length">
+        <div v-for="(feature, index) in $frontmatter.features" :key="index" class="feature">
           <h2>{{ feature.title }}</h2>
           <p>{{ feature.details }}</p>
         </div>
@@ -48,19 +48,16 @@ import ModuleTransition from '@theme/components/ModuleTransition'
 export default {
   components: { NavLink, ModuleTransition },
   computed: {
-    data () {
-      return this.$frontmatter
-    },
 
     actionLink () {
       return {
-        link: this.data.actionLink,
-        text: this.data.actionText
+        link: this.$frontmatter.actionLink,
+        text: this.$frontmatter.actionText
       }
     },
 
     heroImageStyle () {
-      return this.data.heroImageStyle || {
+      return this.$frontmatter.heroImageStyle || {
         maxHeight: '200px',
         margin: '6rem auto 1.5rem'
       }

components/HomeBlog.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="home-blog">
-    <div 
-      class="hero" 
-      :style="{
-        background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
+    <div class="hero" :style="{ ...bgImageStyle }">
+      <div
+        class="mask"
+        :style="{
+      background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
       <ModuleTransition>
-        <h1 v-if="recoShowModule">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
+        <img
+          v-if="$frontmatter.isShowHeroImage !== false && recoShowModule"
+          :style="heroImageStyle"
+          :src="$frontmatter.heroImage ? $withBase($frontmatter.heroImage) : require('../images/icon_vuepress_reco.png')"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition>
+        <h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
       </ModuleTransition>
 
       <ModuleTransition delay="0.08">
@@ -15,8 +23,8 @@
       </ModuleTransition>
 
       <ModuleTransition delay="0.16">
-        <p 
-          class="huawei" 
+        <p
+          class="huawei"
           v-if="recoShowModule && $themeConfig.huawei === true">
           <i class="iconfont reco-huawei" style="color: #fc2d38"></i>&nbsp;&nbsp;&nbsp;华为，为中华而为之！
         </p>
@@ -169,6 +177,27 @@ export default {
   margin: 0px auto;
 
   .hero {
+    position relative
+    .mask {
+      position absolute
+      top 0
+      bottom 0
+      left 0
+      right 0
+      z-index 0
+      &:after {
+        display block
+        content ' '
+        background var(--mask-color)
+        position absolute
+        top 0
+        bottom 0
+        left 0
+        right 0
+        z-index 0
+        opacity .2
+      }
+    }
     figure {
       position absolute
       background yellow
@@ -222,6 +251,7 @@ export default {
         margin 2rem auto
         width 8rem
         height 8rem
+        border-radius 50%
       }
       .name {
         text-align center

components/Mode/modeOptions.js

@@ -6,7 +6,8 @@ const modeOptions = {
     '--text-color': '#2c3e50',
     '--border-color': '#eaecef',
     '--bgm-bg-color': 'rgba(255, 255, 255, .7)',
-    '--code-color': 'rgba(27, 31, 35, 0.05)'
+    '--code-color': 'rgba(27, 31, 35, 0.05)',
+    '--mask-color': '#888'
   },
   dark: {
     '--background-color': '#25272a',
@@ -15,7 +16,8 @@ const modeOptions = {
     '--text-color': '#aaa',
     '--border-color': 'rgba(0, 0, 0, .3)',
     '--bgm-bg-color': 'rgba(0, 0, 0, .7)',
-    '--code-color': 'rgba(0, 0, 0, .3)'
+    '--code-color': 'rgba(0, 0, 0, .3)',
+    '--mask-color': '#000'
   }
 }
 

styles/loadMixin.styl

@@ -1,11 +0,0 @@
-load-start(){
-  transform:translateY(-20px);
-  opacity 0
-}
-
-load-end($delayTime){
-  transition:all .25s;
-  transform:translateY(0);
-  transition-delay: $delayTime
-  opacity 1
-}

styles/mode.styl

@@ -6,6 +6,7 @@
   --border-color $borderColor
   --bgm-bg-color $bgmBgColor
   --code-color $codeColor
+  --mask-color $maskColor
   @media (prefers-color-scheme: dark)
     --background-color $backgroundColorDark
     --box-shadow $boxShadowDark
@@ -14,3 +15,4 @@
     --border-color $borderColorDark
     --bgm-bg-color $bgmBgColorDark
     --code-color $codeColorDark
+    --mask-color $maskColorDark

styles/palette.styl

@@ -21,3 +21,6 @@ $codeColorDark ?= rgba(0, 0, 0, .3)
 
 $bgmBgColor ?= rgba(255, 255, 255, .7)
 $bgmBgColorDark ?= rgba(0, 0, 0, .7)
+
+$maskColor ?= #888
+$maskColorDark ?= #000

styles/theme.styl

@@ -238,12 +238,20 @@ th, td
 .comments-wrapper
   .valine-wrapper
     #valine.v
+      .vbtn
+        color: var(--text-color)
+        border: 1px solid var(--border-color)
+        &:hover
+          color: $accentColor
+          border-color: $accentColor
       .vwrap
         background: var(--code-color)
-        // box-shadow: var(--box-shadow)
+        border: 1px dashed var(--border-color)
         .vcontrol
           .vsubmit
             background: var(--code-color)
+        .vheader .vinput
+          border-bottom: 1px dashed var(--border-color)
       .vinfo
         padding-left: .6rem
       .vlist
@@ -254,14 +262,14 @@ th, td
             margin-left: 0
             border-left: 1px dashed var(--border-color)
           .vimg
+            width: 2.8rem;
+            height: 2.8rem;
             border-radius: $borderRadius
-            box-shadow: var(--box-shadow)
             border: none
         .vh
           border-bottom: 1px dashed var(--border-color)
           .vhead
             .vsys
-              box-shadow: var(--box-shadow)
               background: var(--code-color)
               color: var(--text-color)
           .vmeta
@@ -269,14 +277,15 @@ th, td
             .vat
               margin-right: .3rem
               background: var(--code-color)
-              box-shadow: var(--box-shadow)
               border-radius: $borderRadius
               padding: 0 .4rem
               color: var(--text-color)
               border: 1px solid var(--border-color)
+              &:hover
+                color: $accentColor
+                border-color: $accentColor
           .vcontent
             background: var(--code-color)
-            box-shadow: var(--box-shadow)
             border-radius: $borderRadius
             margin: 0 .3rem
             padding: .1rem .6rem .05rem .6rem