label 3.8.0

_config.yml

@@ -746,7 +746,7 @@ fancybox: true
 # --------------------------------------
 
 # mermaid
-# see https://github.com/knsv/mermaid
+# see https://github.com/mermaid-js/mermaid
 mermaid:
   enable: false
   # built-in themes: default/forest/dark/neutral

layout/includes/page/flink.pug

@@ -13,8 +13,9 @@
           each item in i.link_list
             .flink-list-item
               a(href=url_for(item.link)  title=item.name target="_blank")
+                .flink-item-icon
                   img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                span.flink-item-name= item.name 
+                .flink-item-name= item.name 
-                span.flink-item-desc(title=item.descr)= item.descr
+                .flink-item-desc(title=item.descr)= item.descr
     != page.content
 

layout/includes/third-party/math/katex.pug

@@ -4,7 +4,7 @@ link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
 script.
   (() => {
     document.querySelectorAll('#article-container span.katex-display').forEach(item => {
-      btf.wrap(item, 'div', '', 'katex-wrap')
+      btf.wrap(item, 'div', { class: 'katex-wrap'})
     })
   })()
   

layout/includes/third-party/pjax.pug

@@ -28,8 +28,9 @@ script.
 
   document.addEventListener('pjax:send', function () {
 
-    // removeEventListener toc scroll 
+    // removeEventListener scroll 
     window.removeEventListener('scroll', window.tocScrollFn)
+    window.removeEventListener('scroll', scrollCollect)
 
     typeof preloader === 'object' && preloader.initLoading()
     

layout/includes/widget/card_newest_comment.pug

@@ -1,7 +1,7 @@
 if theme.newest_comments.enable
   .card-widget#card-newest-comments
     .item-headline
-      i.fas.fa-bolt
+      i.fas.fa-comment-dots
       span= _p('aside.card_newest_comments.headline')
     .aside-list
       span= _p('aside.card_newest_comments.loading_text')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.8.0-b3",
+  "version": "3.8.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -27,6 +27,6 @@
     "hexo-renderer-pug": "^1.0.0"
   },
   "homepage": "https://butterfly.js.org/",
-  "author": "Jerry <btf@immyw.com>",
+  "author": "Jerry <i@immyw.com>",
   "license": "Apache-2.0"
 }

source/css/_global/index.styl

@@ -19,7 +19,7 @@
   --btn-hover-color: $button-hover-color
   --btn-color: $button-color
   --btn-bg: $button-bg
-  --text-bg-hover: $text-bg-hover
+  --text-bg-hover: rgba($text-bg-hover, .7)
   --light-grey: $light-grey
   --white: $white
   --text-highlight-color: $text-highlight-color

source/css/_highlight/highlight.styl

@@ -110,7 +110,7 @@ blockquote
     color: var(--hltools-color)
     font-size: $code-font-size
 
-    &.closed + table
+    &.closed ~ *
       display: none
 
     .expand

source/css/_layout/aside.styl

@@ -94,7 +94,7 @@
     font-size: 1.2em
 
     span
-      margin-left: .5rem
+      margin-left: .3rem
 
   .sticky_layout
     +minWidth900()

source/css/_layout/sidebar.styl

@@ -55,25 +55,21 @@
         @extend .limit-one-line
         position: relative
         display: block
-        padding: .3rem 1.5rem
+        padding: .3rem 1.5rem .3rem 1.1rem
         color: var(--font-color)
         font-size: 1.15em
-        cursor: pointer
-
-        i:first-child
-          width: 25%
-          text-align: left
-
-        span
-          width: 75%
 
         &:hover
-            color: $light-blue
+          background: var(--text-bg-hover)
+
+        i:first-child
+          width: 15%
+          text-align: left
 
       .expand
         position: absolute
         top: .78em
-        right: .4rem
+        right: .9rem
         transition: transform .3s
 
         &.hide

source/css/_layout/third-party.styl

@@ -1,5 +1,4 @@
-#vcomment,
+#vcomment
-#waline
   font-size: 1.1em
 
   .vbtn
@@ -21,6 +20,18 @@
     &:after
       z-index: 22
 
+#waline-wrap
+  --waline-font-size: 1.1em
+  --waline-theme-color: $button-bg
+  --waline-active-color: $button-hover-color
+  --waline-avatar-size: 2.75rem
+
+  .vuser
+    transition: all .5s
+
+    &:hover
+      transform: rotate(360deg)
+
 if hexo-config('valine.bg')
   #vcomment
     textarea

source/css/_page/flink.styl

@@ -50,12 +50,17 @@
           color: var(--font-color)
           text-decoration: none
 
-          img
+          .flink-item-icon
             float: left
+            overflow: hidden
             margin: 15px 10px
             width: 60px
             height: 60px
             border-radius: 35px
+
+            img
+              width: 100%
+              height: 100%
               transition: all .3s
 
           .img-alt
@@ -63,7 +68,6 @@
 
           .flink-item-name
             @extend .limit-one-line
-            display: block
             padding: 16px 10px 0 0
             height: 40px
             font-weight: bold
@@ -71,7 +75,6 @@
 
           .flink-item-desc
             @extend .limit-one-line
-            display: block
             padding: 16px 10px 16px 0
             height: 50px
             font-size: .93em

source/css/_search/algolia.styl

@@ -1,7 +1,5 @@
 #algolia-search
   .search-dialog
-    animation: titlescale .5s
-
     .ais-search-box
       margin: 0 auto
       max-width: 100%

source/css/_search/index.styl

@@ -7,7 +7,9 @@
   margin-left: -15rem
   padding: 1rem
   width: 30rem
+  border-radius: 8px
   background: var(--search-bg)
+  animation: titlescale .5s
 
   +maxWidth768()
     top: 0
@@ -15,6 +17,7 @@
     margin: 0
     width: 100%
     height: 100%
+    border-radius: 0
 
   hr
     margin: 1rem auto

source/css/_search/local-search.styl

@@ -1,7 +1,5 @@
 #local-search
   .search-dialog
-    animation: titlescale .5s
-
     .local-search-box
       margin: 0 auto
       max-width: 100%

source/js/main.js

@@ -194,7 +194,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $figureHighlight.forEach(function (item) {
           const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
-          btf.wrap(item, 'figure', '', 'highlight')
+          btf.wrap(item, 'figure', { class: 'highlight' })
           createEle(highlightLangEle, item)
         })
       } else {
@@ -208,7 +208,7 @@ document.addEventListener('DOMContentLoaded', function () {
     } else {
       if (isPrismjs) {
         $figureHighlight.forEach(function (item) {
-          btf.wrap(item, 'figure', '', 'highlight')
+          btf.wrap(item, 'figure', { class: 'highlight' })
           createEle('', item)
         })
       } else {
@@ -332,12 +332,21 @@ document.addEventListener('DOMContentLoaded', function () {
       return
     }
 
+    // find the scroll direction
+    function scrollDirection (currentTop) {
+      const result = currentTop > initTop // true is down & false is up
+      initTop = currentTop
+      return result
+    }
+
     let initTop = 0
     let isChatShow = true
     const $header = document.getElementById('page-header')
     const isChatBtnHide = typeof chatBtnHide === 'function'
     const isChatBtnShow = typeof chatBtnShow === 'function'
-    window.addEventListener('scroll', btf.throttle(function (e) {
+
+    window.scrollCollect = () => {
+      return btf.throttle(function (e) {
         const currentTop = window.scrollY || document.documentElement.scrollTop
         const isDown = scrollDirection(currentTop)
         if (currentTop > 56) {
@@ -368,14 +377,10 @@ document.addEventListener('DOMContentLoaded', function () {
         if (document.body.scrollHeight <= innerHeight) {
           $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
         }
-    }, 200))
+      }, 200)()
-
-    // find the scroll direction
-    function scrollDirection (currentTop) {
-      const result = currentTop > initTop // true is down & false is up
-      initTop = currentTop
-      return result
     }
+
+    window.addEventListener('scroll', scrollCollect)
   }
 
   /**
@@ -687,7 +692,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
     if ($table.length) {
       $table.forEach(item => {
-        btf.wrap(item, 'div', '', 'table-wrap')
+        btf.wrap(item, 'div', { class: 'table-wrap' })
       })
     }
   }

source/js/utils.js

@@ -207,18 +207,18 @@ const btf = {
    *
    * @param {*} selector
    * @param {*} eleType the type of create element
-   * @param {*} id id
+   * @param {*} options object key: value
-   * @param {*} cn class name
    */
-  wrap: function (selector, eleType, id = '', cn = '') {
+  wrap: (selector, eleType, options) => {
     const creatEle = document.createElement(eleType)
-    if (id) creatEle.id = id
+    for (const [key, value] of Object.entries(options)) {
-    if (cn) creatEle.className = cn
+      creatEle.setAttribute(key, value)
+    }
     selector.parentNode.insertBefore(creatEle, selector)
     creatEle.appendChild(selector)
   },
 
-  unwrap: function (el) {
+  unwrap: el => {
     const elParentNode = el.parentNode
     if (elParentNode !== document.body) {
       elParentNode.parentNode.insertBefore(el, elParentNode)
@@ -226,7 +226,7 @@ const btf = {
     }
   },
 
-  isJqueryLoad: (fn) => {
+  isJqueryLoad: fn => {
     if (typeof jQuery === 'undefined') {
       getScript(GLOBAL_CONFIG.source.jQuery).then(fn)
     } else {
@@ -234,9 +234,9 @@ const btf = {
     }
   },
 
-  isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0,
+  isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
 
-  getEleTop: (ele) => {
+  getEleTop: ele => {
     let actualTop = ele.offsetTop
     let current = ele.offsetParent