update

source/css/_global/function.styl

@@ -72,6 +72,30 @@
       cursor: pointer
       transition: all .3s ease-out
 
+.custom-hr
+  position: relative
+  margin: 40px auto
+  border: 2px dashed var(--hr-border)
+
+  if hexo-config('hr_icon.enable')
+    width: calc(100% - 4px)
+
+    &:hover
+      &:before
+        left: calc(95% - 20px)
+
+    &:before
+      position: absolute
+      top: $hr-icon-top
+      left: 5%
+      z-index: 1
+      color: var(--hr-before-color)
+      content: $hr-icon
+      font-size: 20px
+      line-height: 1
+      transition: all 1s ease-in-out
+      @extend .fontawesomeIcon
+
 maxWidth600()
   @media screen and (max-width: 600px)
     {block}

source/css/_global/index.styl

@@ -34,6 +34,8 @@
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
   --default-bg-color: $theme-color
+  --zoom-bg: #fff
+  --mark-bg: alpha($dark-black, .3)
 
 body
   position: relative
@@ -96,30 +98,6 @@ h6
 *
   box-sizing: border-box
 
-hr
-  position: relative
-  margin: 40px auto
-  border: 2px dashed var(--hr-border)
-
-  if hexo-config('hr_icon.enable')
-    width: calc(100% - 4px)
-
-    &:hover
-      &:before
-        left: calc(95% - 20px)
-
-    &:before
-      position: absolute
-      top: $hr-icon-top
-      left: 5%
-      z-index: 1
-      color: var(--hr-before-color)
-      content: $hr-icon
-      font-size: 20px
-      line-height: 1
-      transition: all 1s ease-in-out
-      @extend .fontawesomeIcon
-
 .table-wrap
   overflow-x: scroll
   margin: 0 0 20px

source/css/_layout/footer.styl

@@ -5,12 +5,12 @@
   background-position: bottom
   background-size: cover
 
-  if hexo-config('footer_bg') != false
+  if hexo-config('footer_bg') != false && hexo-config('mask.footer')
     &:before
       position: absolute
       width: 100%
       height: 100%
-      background-color: alpha($dark-black, .5)
+      background-color: var(--mark-bg)
       content: ''
 
 #footer-wrap

source/css/_layout/head.styl

@@ -7,12 +7,13 @@
   background-repeat: no-repeat
   transition: all .5s
 
-  &:not(.not-top-img):before
-    position: absolute
-    width: 100%
-    height: 100%
-    background-color: alpha($dark-black, .3)
-    content: ''
+  if hexo-config('mask.header')
+    &:not(.not-top-img):before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: var(--mark-bg)
+      content: ''
 
   // index
   &.full_page
@@ -97,9 +98,6 @@
     +maxWidth768()
       height: 360px
 
-    &:before
-      background-color: alpha($dark-black, .5)
-
   #post-info
     position: absolute
     bottom: 100px

source/css/_layout/post.styl

@@ -65,6 +65,9 @@ beautify()
 
   ul > li
     list-style-type: circle
+  
+  hr
+    @extend .custom-hr
 
 #article-container
   word-wrap: break-word
@@ -156,14 +159,6 @@ beautify()
     else if hexo-config('beautify.field') == 'post'
       &.post-content
         beautify()
-  else
-    hr
-      margin: 20px 0
-      border: 1px inset
-      width 100%
-
-      &:before
-        content: none
 
 #post
   .tag_share

source/css/_layout/third-party.styl

@@ -82,15 +82,22 @@ if hexo-config('waline.bg')
       display: none
 
 // Mathjax
-.mathjax-overflow
+mjx-container
   overflow-x: auto
   overflow-y: hidden
-
-span.mathjax-overflow
-  display: inline-block
-  padding: 0 2px
+  padding-bottom: 4px
   max-width: 100%
-  vertical-align: bottom
+
+  &[display]
+    display: block !important
+    min-width: auto !important
+
+  &:not([display])
+    display: inline-grid !important
+
+mjx-assistive-mml
+  right: 0
+  bottom: 0
 
 .aplayer
   color: $font-black

source/css/_mode/darkmode.styl

@@ -38,10 +38,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
     --scrollbar-color: lighten(#121212, 5)
     --timeline-bg: lighten(#121212, 5)
+    --zoom-bg: #121212
+    --mark-bg: alpha($dark-black, .6)
 
-    #web_bg:before,
-    #footer:before,
-    #page-header:before
+    #web_bg:before
       position: absolute
       width: 100%
       height: 100%

source/css/_mode/readmode.styl

@@ -54,8 +54,7 @@ if hexo-config('readmode')
       display: none
 
     #page-header.post-bg
-      background-color: transparent
-      background-image: none !important
+      background: none !important
 
       &:before
         opacity: 0

source/css/_page/common.styl

@@ -18,7 +18,7 @@
     padding: 20px 5px
 
   +minWidth2000()
-    max-width: 1700px
+    max-width: 70%
 
   & > div:first-child:not(.recent-posts)
     @extend .cardHover

source/css/_page/homepage.styl

@@ -8,7 +8,7 @@
     flex-direction: row
     align-items: center
     overflow: hidden
-    height: 18em
+    height: 16.8em
 
     +maxWidth768()
       flex-direction: column
@@ -24,7 +24,7 @@
 
     .post_cover
       overflow: hidden
-      width: 44%
+      width: 42%
       height: 100%
 
       +maxWidth768()
@@ -42,7 +42,7 @@
 
     & >.recent-post-info
       padding: 0 40px
-      width: 57%
+      width: 58%
 
       +maxWidth768()
         padding: 20px 20px 30px
@@ -57,7 +57,7 @@
       & > .article-title
         @extend .limit-more-line
         color: var(--text-highlight-color)
-        font-size: 1.72em
+        font-size: 1.55em
         line-height: 1.4
         transition: all .2s ease-in-out
         -webkit-line-clamp: 2
@@ -71,7 +71,7 @@
       & > .article-meta-wrap
         margin: 6px 0
         color: $theme-meta-color
-        font-size: 90%
+        font-size: .9em
 
         & > .post-meta-date
           cursor: default

source/css/_search/index.styl

@@ -38,6 +38,10 @@
 
       &:hover
         color: $search-color
+  
+  hr
+    margin: 20px auto
+    @extend .custom-hr
 
 #search-mask
   position: fixed
@@ -47,4 +51,10 @@
   left: 0
   z-index: 1000
   display: none
-  background: rgba($dark-black, .6)
+  background: rgba($dark-black, .6)
+
+if hexo-config('algolia_search.enable')
+  @require 'algolia'
+
+if hexo-config('local_search.enable')
+  @require 'local-search'

source/css/index.styl

@@ -12,10 +12,4 @@ if hexo-config('css_prefix')
 @import '_mode/*'
 
 // search
-if hexo-config('algolia_search.enable')
-  @import '_search/index'
-  @import '_search/algolia'
-
-if hexo-config('local_search') && hexo-config('local_search.enable')
-  @import '_search/index'
-  @import '_search/local-search'
+@import '_search/index'

source/js/main.js

@@ -301,8 +301,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let initTop = 0
     let isChatShow = true
     const $header = document.getElementById('page-header')
-    const isChatBtnHide = typeof chatBtnHide === 'function'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
+    const isChatBtn = typeof chatBtn !== 'undefined'
     const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     // 當滾動條小于 56 的時候
@@ -324,14 +323,14 @@ document.addEventListener('DOMContentLoaded', function () {
       if (currentTop > 56) {
         if (isDown) {
           if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
+          if (isChatBtn && isChatShow === true) {
+            window.chatBtn.hide()
             isChatShow = false
           }
         } else {
           if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
+          if (isChatBtn && isChatShow === false) {
+            window.chatBtn.show()
             isChatShow = true
           }
         }
@@ -545,10 +544,12 @@ document.addEventListener('DOMContentLoaded', function () {
       saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
-
     runMobileToc: () => {
       if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
       else window.mobileToc.close()
+    },
+    toggleChatDisplay: () => {
+      window.chatBtnFn()
     }
   }
 
@@ -573,6 +574,9 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
+      case 'chat-btn':
+        rightSideFn.toggleChatDisplay()
+        break
       default:
         break
     }

source/js/utils.js

@@ -186,10 +186,9 @@ const btf = {
   },
 
   unwrap: el => {
-    const elParentNode = el.parentNode
-    if (elParentNode !== document.body) {
-      elParentNode.parentNode.insertBefore(el, elParentNode)
-      elParentNode.parentNode.removeChild(elParentNode)
+    const parent = el.parentNode
+    if (parent && parent !== document.body) {
+      parent.replaceChild(el, parent)
     }
   },
 
@@ -211,13 +210,7 @@ const btf = {
     const service = GLOBAL_CONFIG.lightbox
 
     if (service === 'mediumZoom') {
-      const zoom = mediumZoom(ele)
-      zoom.on('open', e => {
-        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
-        zoom.update({
-          background: photoBg
-        })
-      })
+      mediumZoom(ele, { background: 'var(--zoom-bg)' })
     }
 
     if (service === 'fancybox') {