diff --git a/_config.yml b/_config.yml
index d54b1ab23..fa6cadb59 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug
index f0b088c91..65b91d86b 100644
--- a/layout/includes/page/flink.pug
+++ b/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")
-                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 
-                span.flink-item-desc(title=item.descr)= item.descr
+                .flink-item-icon
+                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+                .flink-item-name= item.name 
+                .flink-item-desc(title=item.descr)= item.descr
     != page.content
 
diff --git a/layout/includes/third-party/math/katex.pug b/layout/includes/third-party/math/katex.pug
index 773bb995e..028c62666 100644
--- a/layout/includes/third-party/math/katex.pug
+++ b/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'})
     })
   })()
   
\ No newline at end of file
diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
index 024605165..f3b581271 100644
--- a/layout/includes/third-party/pjax.pug
+++ b/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()
     
diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug
index d9b972ff3..4c3d4beaa 100644
--- a/layout/includes/widget/card_newest_comment.pug
+++ b/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')
diff --git a/package.json b/package.json
index 154e25d33..d9751d2fd 100644
--- a/package.json
+++ b/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"
 }
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 9563f7e43..058667193 100644
--- a/source/css/_global/index.styl
+++ b/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
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index 5f82677b7..1a2523008 100644
--- a/source/css/_highlight/highlight.styl
+++ b/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
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 5e4344cf8..3d88d3669 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -94,7 +94,7 @@
     font-size: 1.2em
 
     span
-      margin-left: .5rem
+      margin-left: .3rem
 
   .sticky_layout
     +minWidth900()
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
index 2b1c5f960..25e8ae581 100644
--- a/source/css/_layout/sidebar.styl
+++ b/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
+
+        &:hover
+          background: var(--text-bg-hover)
 
         i:first-child
-          width: 25%
+          width: 15%
           text-align: left
 
-        span
-          width: 75%
-
-          &:hover
-            color: $light-blue
-
       .expand
         position: absolute
         top: .78em
-        right: .4rem
+        right: .9rem
         transition: transform .3s
 
         &.hide
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index b6eba8d2c..8899d2486 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -1,5 +1,4 @@
-#vcomment,
-#waline
+#vcomment
   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
diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl
index f7e9280e0..1d8dbc08b 100644
--- a/source/css/_page/flink.styl
+++ b/source/css/_page/flink.styl
@@ -50,20 +50,24 @@
           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
-            transition: all .3s
+
+            img
+              width: 100%
+              height: 100%
+              transition: all .3s
 
           .img-alt
             display: none
 
           .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
diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl
index 55ac8c463..be72c4a31 100644
--- a/source/css/_search/algolia.styl
+++ b/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%
diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl
index 2d0b8d4a0..948f41e7f 100644
--- a/source/css/_search/index.styl
+++ b/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
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index 0a0c918b5..e24abd17d 100644
--- a/source/css/_search/local-search.styl
+++ b/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%
diff --git a/source/js/main.js b/source/js/main.js
index 2d73c602e..19f664431 100644
--- a/source/js/main.js
+++ b/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,50 +332,55 @@ 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) {
-      const currentTop = window.scrollY || document.documentElement.scrollTop
-      const isDown = scrollDirection(currentTop)
-      if (currentTop > 56) {
-        if (isDown) {
-          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
-            isChatShow = false
+
+    window.scrollCollect = () => {
+      return btf.throttle(function (e) {
+        const currentTop = window.scrollY || document.documentElement.scrollTop
+        const isDown = scrollDirection(currentTop)
+        if (currentTop > 56) {
+          if (isDown) {
+            if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+            if (isChatBtnShow && isChatShow === true) {
+              chatBtnHide()
+              isChatShow = false
+            }
+          } else {
+            if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
+            if (isChatBtnHide && isChatShow === false) {
+              chatBtnShow()
+              isChatShow = true
+            }
+          }
+          $header.classList.add('nav-fixed')
+          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
+            $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
           }
         } else {
-          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
-            isChatShow = true
+          if (currentTop === 0) {
+            $header.classList.remove('nav-fixed', 'nav-visible')
           }
+          $rightside.style.cssText = "opacity: ''; transform: ''"
         }
-        $header.classList.add('nav-fixed')
-        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
+
+        if (document.body.scrollHeight <= innerHeight) {
           $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
         }
-      } else {
-        if (currentTop === 0) {
-          $header.classList.remove('nav-fixed', 'nav-visible')
-        }
-        $rightside.style.cssText = "opacity: ''; transform: ''"
-      }
-
-      if (document.body.scrollHeight <= innerHeight) {
-        $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
-      }
-    }, 200))
-
-    // find the scroll direction
-    function scrollDirection (currentTop) {
-      const result = currentTop > initTop // true is down & false is up
-      initTop = currentTop
-      return result
+      }, 200)()
     }
+
+    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' })
       })
     }
   }
diff --git a/source/js/utils.js b/source/js/utils.js
index b53e48aae..8fa5d8a0e 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -207,18 +207,18 @@ const btf = {
    *
    * @param {*} selector
    * @param {*} eleType the type of create element
-   * @param {*} id id
-   * @param {*} cn class name
+   * @param {*} options object key: value
    */
-  wrap: function (selector, eleType, id = '', cn = '') {
+  wrap: (selector, eleType, options) => {
     const creatEle = document.createElement(eleType)
-    if (id) creatEle.id = id
-    if (cn) creatEle.className = cn
+    for (const [key, value] of Object.entries(options)) {
+      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