fix: 修復開啟gitalk評論數後與toc衝突的bug close #462

fix: 修復jquery在一些介面仍然載入問題
fix: 修復medium zoom 報錯的 bug

README.md

@@ -1,9 +1,9 @@
 # hexo-theme-butterfly
 
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master)
+![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly)
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
 ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c)
+![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)
 
 Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [JerryC](https://jerryc.me/)
@@ -71,7 +71,7 @@ npm i hexo-theme-butterfly
 - [x] Related articles
 - [x] Displays outdated notice for a post
 - [x] Share (AddThis/Sharejs/Addtoany)
-- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo)
+- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
 - [x] Multiple Comment System Support
 - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp)
 - [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics)

README_CN.md

@@ -1,11 +1,12 @@
 # hexo-theme-butterfly
 
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master)
+![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly)
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
 ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c)
+![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)
 
+
 預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [JerryC](https://jerryc.me/)
 
 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
@@ -70,7 +71,7 @@ theme: butterfly
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo）
+- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
 - [x] 支持雙評論部署
 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
 - [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析）

_config.yml

@@ -240,7 +240,7 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
-  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo
   use:
   # - Valine
   # - Disqus
@@ -304,15 +304,6 @@ valine:
   requiredFields: nick,mail # required fields (nick/mail)
   option:
 
-# waline - A simple comment system with backend support fork from Valine
-# https://waline.js.org/
-waline:
-  serverURL: # Waline server address url
-  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
-  emojiCDN: # emoji CDN
-  bg: /image/comment_bg.png # waline background
-  option:
-
 # utterances
 # https://utteranc.es/
 utterances:
@@ -335,8 +326,6 @@ facebook_comments:
 # Twikoo
 # https://github.com/imaegoo/twikoo
 twikoo:
-  envId:
-  option:
 
 # Chat Services
 # --------------------------------------
@@ -406,14 +395,6 @@ tencent_analytics:
 # https://www.umeng.com/
 cnzz_analytics:
 
-# Cloudflare Analytics
-# https://www.cloudflare.com/zh-tw/web-analytics/
-cloudflare_analytics:
-
-# Microsoft Clarity
-# https://clarity.microsoft.com/
-microsoft_clarity:
-
 # Advertisement
 # --------------------------------------
 
@@ -628,7 +609,6 @@ aside:
     enable: true
     description:
     button:
-      enable: true
       icon: fab fa-github
       text: Follow Me
       link: https://github.com/xxxxxx
@@ -639,29 +619,24 @@ aside:
     enable: true
     limit: 5 # if set 0 will show all
     sort: date # date or updated
-    sort_order: # Don't modify the setting unless you know how it works
   card_categories:
     enable: true
     limit: 8 # if set 0 will show all
     expand: none # none/true/false
-    sort_order: # Don't modify the setting unless you know how it works
   card_tags:
     enable: true
     limit: 40 # if set 0 will show all
     color: false
-    sort_order: # Don't modify the setting unless you know how it works
   card_archives:
     enable: true
     type: monthly # yearly or monthly
     format: MMMM YYYY # eg: YYYY年MM月
     order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
     limit: 8 # if set 0 will show all
-    sort_order: # Don't modify the setting unless you know how it works
   card_webinfo:
     enable: true
     post_count: true
     last_push_date: true
-    sort_order: # Don't modify the setting unless you know how it works
 
 # busuanzi count for PV / UV in site
 # 訪問人數
@@ -679,11 +654,14 @@ runtimeshow:
 # Aside widget - Newest Comments
 newest_comments:
   enable: false
-  sort_order: # Don't modify the setting unless you know how it works
   limit: 6
   avatar: true
-  # You can only choose one, or neither
+  leancloud:
-  valine: false
+    enable: false
+    appId: # leancloud application app id
+    appKey: # leancloud application app key
+    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
+    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
   github_issues:
     enable: false
     repo:
@@ -692,7 +670,6 @@ newest_comments:
     forum:
     api_key:
   twikoo: false
-  waline: false
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------
@@ -871,7 +848,6 @@ CDN:
   disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
   utterances: https://utteranc.es/client.js
   twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
-  waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js

layout/includes/head/analytics.pug

@@ -30,14 +30,3 @@ if theme.tencent_analytics
 
 if theme.cnzz_analytics
   script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`)
-
-if theme.cloudflare_analytics
-  script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
-
-if theme.microsoft_clarity
-  script.
-    (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "!{theme.microsoft_clarity}");

layout/includes/head/preconnect.pug

@@ -12,12 +12,6 @@ if theme.tencent_analytics
 if theme.cnzz_analytics
   link(rel="preconnect" href="//s4.cnzz.com")
 
-if theme.cloudflare_analytics
-  link(rel="preconnect" href="//static.cloudflareinsights.com")
-
-if theme.microsoft_clarity
-  link(rel="preconnect" href="//www.clarity.ms")
-
 if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
   link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
 

layout/includes/header/post-info.pug

@@ -66,29 +66,23 @@
             if block
               block
 
-        case whichCount
+        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
-          when 'Disqus'
-          when 'Disqusjs'
           +countBlock
             span.disqus-comment-count
               a(href=full_url_for(page.path) + '#disqus_thread')
-          when 'Valine'
+        else if whichCount === 'Valine'
           +countBlock
             a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
               span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-          when 'Waline'
+        else if whichCount === 'Gitalk'
-            +countBlock
-              a(href=url_for(page.path) + '#post-comment')
-                span.waline-comment-count(id=url_for(page.path))
-          when 'Gitalk'
           +countBlock
             a(href=url_for(page.path) + '#post-comment')
               span.gitalk-comment-count
-          when 'Twikoo'
+        else if whichCount === 'Twikoo'
           +countBlock
             a(href=url_for(page.path) + '#post-comment')
               span#twikoo-count
-          when 'Facebook Comments'
+        else if whichCount === 'Facebook Comments'
           +countBlock
             a(href=url_for(page.path) + '#post-comment')
               span.fb-comments-count(data-href=urlNoIndex())

layout/includes/layout.pug

@@ -1,6 +1,5 @@
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
-- var pageType = is_post() ? 'post' : 'page'
 
 doctype html
 html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
@@ -15,7 +14,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       
     !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
 
-    #body-wrap(class=pageType)
+    #body-wrap
       include ./header/index.pug
 
       main#content-inner.layout(class=hideAside)

layout/includes/page/artitalk.pug

@@ -13,7 +13,7 @@ script.
 
     if (!{Boolean(option)}) {
       const otherSetting = !{option}
-      setting = Object.assign(setting, otherSetting)
+      setting = Object.assign({}, setting, otherSetting)
     }
 
     const init = () => {

layout/includes/third-party/comments/index.pug

@@ -31,8 +31,6 @@ hr
             #utterances-wrap
           when 'Twikoo'
             #twikoo-wrap
-          when 'Waline'
-            #waline-wrap
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10

layout/includes/third-party/comments/js.pug

@@ -14,7 +14,5 @@ each name in theme.comments.use
       !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache})
     when 'Twikoo'
       !=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache})
-    when 'Waline'
-      !=partial('includes/third-party/comments/waline', {}, {cache:theme.fragment_cache})
     when 'Facebook Comments'
       !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache})

layout/includes/third-party/comments/twikoo.pug

@@ -1,25 +1,16 @@
-- let option = theme.twikoo.option ? JSON.stringify(theme.twikoo.option) : false
-
 script.
   (()=>{
     const $countDom = document.getElementById('twikoo-count')
     const init = () => {
-      let initData = {
+      twikoo.init({
-        envId: '!{theme.twikoo.envId}',
+        envId: '!{theme.twikoo}',
         el: '#twikoo-wrap'
-      }
+      })
-
-      if (!{Boolean(option)}) {
-        const otherData = !{option}
-        initData = Object.assign(initData, otherData)
-      }
-      
-      twikoo.init(initData)
     }
 
     const getCount = () => {
       twikoo.getCommentsCount({
-        envId: '!{theme.twikoo.envId}',
+        envId: '!{theme.twikoo}',
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {

layout/includes/third-party/comments/valine.pug

@@ -29,7 +29,7 @@ script.
       
       if (!{Boolean(option)}) {
         const otherData = !{option}
-        initData = Object.assign(initData, otherData)
+        initData = Object.assign({}, initData, otherData)
       }
       
       const valine = new Valine(initData)
@@ -40,7 +40,7 @@ script.
   }
 
   if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
     else setTimeout(loadValine, 0)
   } else {
     function loadOtherComment () {

layout/includes/third-party/comments/waline.pug

@@ -1,39 +0,0 @@
-- let option = theme.waline.option ? JSON.stringify(theme.waline.option) : false
-- let emojiMaps = '""'
-if site.data.waline
-  - emojiMaps = JSON.stringify(site.data.waline)
-
-script.
-  function loadWaline () {
-    function initWaline () {
-      let initData = {
-        el: '#waline-wrap',
-        serverURL: '!{theme.waline.serverURL}',
-        avatar: '#{theme.waline.avatar}',
-        path: location.pathname,
-        emojiCDN: '#{theme.waline.emojiCDN}',
-        emojiMaps: !{emojiMaps},
-      }
-      
-      if (!{Boolean(option)}) {
-        const otherData = !{option}
-        initData = Object.assign(initData, otherData)
-      }
-      
-      const waline = new Waline(initData)
-    }
-
-    if (typeof Waline === 'function') initWaline() 
-    else getScript('!{url_for(theme.CDN.waline)}').then(initWaline)
-  }
-
-  if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
-    else setTimeout(loadWaline, 0)
-  } else {
-    function loadOtherComment () {
-      loadWaline()
-    }
-  }
-  
-

layout/includes/third-party/newest-comments/index.pug

@@ -1,12 +1,8 @@
-- let config = theme.newest_comments
+if theme.newest_comments.leancloud.enable
-
+  include ./leancloud.pug
-if config.valine
+else if theme.newest_comments.github_issues.enable
-  include ./valine.pug
-else if config.waline
-  include ./waline.pug
-else if config.github_issues.enable
   include ./github-issues.pug
-else if config.disqus.enable
+else if theme.newest_comments.disqus.enable
   include ./disqus-comment.pug
-else if config.twikoo
+else if theme.newest_comments.twikoo
   include ./twikoo-comment.pug

layout/includes/third-party/newest-comments/leancloud.pug

@@ -1,5 +1,3 @@
-- let default_avatar = theme.valine.avatar
-
 script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js")
 script.
   window.addEventListener('load', () => {
@@ -19,7 +17,7 @@ script.
     const getIcon = (icon, mail) => {
       if (icon) return icon
       
-      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
+      let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}'
       let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
       return iconUrl
     }
@@ -56,17 +54,17 @@ script.
 
     const getComment = () => {
         let serverURL = ''
-        if (!{Boolean(theme.valine.serverURLs)}) {
+        if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
-          serverURL = '!{theme.valine.serverURLs}'
+          serverURL = '!{theme.newest_comments.leancloud.serverURL}'
         } else {
-          serverURL = 'https://!{theme.valine.appId.substring(0,8)}.api.lncldglobal.com'
+          serverURL = 'https://!{theme.newest_comments.leancloud.appId.substring(0,8)}.api.lncldglobal.com'
         }
 
       var settings = {
         "method": "GET",
         "headers": {
-          "X-LC-Id": '!{theme.valine.appId}',
+          "X-LC-Id": '!{theme.newest_comments.leancloud.appId}',
-          "X-LC-Key": '!{theme.valine.appKey}',
+          "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}',
           "Content-Type": "application/json"
         },
       }
@@ -80,7 +78,7 @@ script.
               'content': changeContent(e.comment),
               'mail': e.mail,
               'nick': e.nick,
-              'url': e.url + '#' + e.objectId,
+              'url': e.url,
               'date': e.createdAt,
             }
           })

layout/includes/third-party/newest-comments/twikoo-comment.pug

@@ -16,7 +16,7 @@ script.
     const getComment = () => {
       const runTwikoo = () => {
         twikoo.getRecentComments({
-          envId: '!{theme.twikoo.envId}',
+          envId: '!{theme.twikoo}',
           pageSize: !{theme.newest_comments.limit},
           includeReply: true
         }).then(function (res) {

layout/includes/third-party/newest-comments/waline.pug

@@ -1,95 +0,0 @@
-- let default_avatar = theme.waline.avatar
-
-script.
-  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
-
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-      content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
-      content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const getIcon = (mail) => {
-      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
-      let iconUrl = `https://gravatar.loli.net/avatar/${mail + defaultIcon}`
-      return iconUrl
-    }
-
-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            let name = 'src'
-            if(!{theme.lazyload.enable}) {
-              name = 'data-lazy-src'
-            }
-            result += `<a href='${array[i].url}' class="thumbnail"><img ${name}='${getIcon(array[i].mail)}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom.innerHTML= result
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const getComment = () => {
-      const loadWaline = () => {
-        Waline.Widget.RecentComments({
-          el: '#card-newest-comments .aside-list',
-          serverURL: '!{theme.waline.serverURL}',
-          count: !{theme.newest_comments.limit}
-        }).then(comments => {
-          const walineArray = comments.map(function (e) {
-            return {
-              'content': changeContent(e.comment),
-              'mail': e.mail,
-              'nick': e.nick,
-              'url': e.url + '#' + e.objectId,
-              'date': e.createdAt,
-            }
-          })
-          saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10/(60*24))
-          generateHtml(walineArray)
-        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        }) 
-      }
-
-      if (typeof Waline === 'function') loadWaline() 
-      else getScript('!{url_for(theme.CDN.waline)}').then(loadWaline)
-    }
-
-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('waline-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
-  })

layout/includes/widget/card_announcement.pug

@@ -1,5 +1,6 @@
 if theme.aside.card_announcement.enable
   .card-widget.card-announcement
+    .card-content
       .item-headline
         i.fas.fa-bullhorn.card-announcement-animation
         span= _p('aside.card_announcement')

layout/includes/widget/card_archives.pug

@@ -1,5 +1,6 @@
 if theme.aside.card_archives.enable
   .card-widget.card-archives
+    .card-content
       .item-headline
         i.fas.fa-archive
         span= _p('aside.card_archives')

layout/includes/widget/card_author.pug

@@ -1,5 +1,6 @@
 if theme.aside.card_author.enable
   .card-widget.card-info
+    .card-content
       .card-info-avatar.is-center
         if theme.lazyload.enable
           img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
@@ -27,7 +28,6 @@ if theme.aside.card_author.enable
               .headline= _p('aside.categories') 
               .length-num= site.categories.length
 
-    if theme.aside.card_author.button.enable
       a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
         i(class=theme.aside.card_author.button.icon)
         span=theme.aside.card_author.button.text

layout/includes/widget/card_categories.pug

@@ -1,6 +1,7 @@
 if theme.aside.card_categories.enable
   if site.categories.length
     .card-widget.card-categories
+        .card-content
           .item-headline
             i.fas.fa-folder-open
             span= _p('aside.card_categories')

layout/includes/widget/card_newest_comment.pug

@@ -1,5 +1,6 @@
 if theme.newest_comments.enable
   .card-widget#card-newest-comments
+    .card-content
       .item-headline
         i.fas.fa-bolt
         span= _p('aside.card_newest_comments.headline')

layout/includes/widget/card_post_toc.pug

@@ -1,6 +1,7 @@
 - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
 
 #card-toc.card-widget
+  .card-content
     .item-headline
       i.fas.fa-stream
       span= _p('aside.card_toc')

layout/includes/widget/card_recent_post.pug

@@ -1,5 +1,6 @@
 if theme.aside.card_recent_post.enable
   .card-widget.card-recent-post
+    .card-content
       .item-headline
         i.fas.fa-history
         span= _p('aside.card_recent_post')

layout/includes/widget/card_self.pug

@@ -1,9 +0,0 @@
-if site.data.widget
-  each item in site.data.widget
-    .card-widget(class=item.class_name id=item.id_name style=item.order ? `order: ${item.order}` : '')
-      .item-headline
-        i(class=item.icon)
-        span=item.name
-      .item-content
-        !=item.html
-

layout/includes/widget/card_tags.pug

@@ -1,6 +1,7 @@
 if theme.aside.card_tags.enable
   if site.tags.length
     .card-widget.card-tags
+      .card-content
         .item-headline
           i.fas.fa-tags
           span= _p('aside.card_tags')

layout/includes/widget/card_webinfo.pug

@@ -1,5 +1,6 @@
 if theme.aside.card_webinfo.enable
   .card-widget.card-webinfo
+    .card-content
       .item-headline
         i.fas.fa-chart-line
         span= _p('aside.card_webinfo.headline')

layout/includes/widget/index.pug

@@ -1,4 +1,4 @@
-#aside-content.aside-content
+#aside_content.aside_content
   //- post
   if is_post()
     if showToc && theme.toc.style_simple
@@ -24,4 +24,3 @@
       !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
-      !=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.5.0",
+  "version": "3.4.2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_global/index.styl

@@ -157,8 +157,8 @@ if $site-name-font
   #site-title,
   #site-subtitle,
   #site-name,
-  #aside-content .author-info__name,
+  #aside_content .author-info__name,
-  #aside-content .author-info__description
+  #aside_content .author-info__description
     font-family: $site-name-font
 
 .is-center

source/css/_layout/aside.styl

@@ -1,4 +1,4 @@
-#aside-content
+#aside_content
   width: 25%
 
   +minWidth900()
@@ -20,7 +20,6 @@
     position: relative
     overflow: hidden
     margin-top: 1rem
-    padding: 1rem 1.2rem
     border-radius: 8px
     background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
@@ -54,7 +53,7 @@
 
     .card-info-data
       display: table
-      margin: .7rem 0 .2rem
+      padding: .7rem 0
       width: 100%
       table-layout: fixed
 
@@ -89,7 +88,6 @@
 
     #card-info-btn
       display: block
-      margin-top: .7rem
       background-color: var(--btn-bg)
       color: var(--btn-color)
       text-align: center
@@ -98,6 +96,9 @@
       span
         padding-left: .5rem
 
+  .card-content
+    padding: 1rem 1.2rem
+
   .item-headline
     padding-bottom: .3rem
     font-size: 1.2em
@@ -352,37 +353,8 @@
     .layout
       justify-content: center
 
-      > .aside-content
+      > .aside_content
         display: none
 
       > div:first-child
         width: 80%
-
-.page
-  .sticky_layout
-    display: flex
-    flex-direction: column
-
-  if hexo-config('aside.card_recent_post.sort_order')
-    .card-recent-post
-      order: hexo-config('aside.card_recent_post.sort_order')
-
-  if hexo-config('newest_comments.sort_order')
-    #card-newest-comments
-      order: hexo-config('newest_comments.sort_order')
-
-  if hexo-config('aside.card_categories.sort_order')
-    .card-categories
-      order: hexo-config('aside.card_categories.sort_order')
-
-  if hexo-config('aside.card_tags.sort_order')
-    .card-tags
-      order: hexo-config('aside.card_tags.sort_order')
-
-  if hexo-config('aside.card_archives.sort_order')
-    .card-archives
-      order: hexo-config('aside.card-archives.sort_order')
-
-  if hexo-config('aside.card_webinfo.sort_order')
-    .card-webinfo
-      order: hexo-config('aside.card_webinfo.sort_order')

source/css/_layout/third-party.styl

@@ -1,5 +1,4 @@
-#vcomment,
+#vcomment
-#waline
   font-size: 1.1em
 
   .vbtn
@@ -10,7 +9,10 @@
     &:hover
       background: var(--btn-hover-color)
 
+  if hexo-config('valine.bg')
     textarea
+      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+
       &:focus
         background-image: none
 
@@ -25,16 +27,6 @@
     &:after
       z-index: 22
 
-if hexo-config('valine.bg')
-  #vcomment
-    textarea
-      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
-
-if hexo-config('waline.bg')
-  #waline
-    textarea
-      background: url(hexo-config('waline.bg')) 100% 100% no-repeat
-
 .fireworks
   position: fixed
   top: 0

source/css/_mode/darkmode.styl

@@ -110,7 +110,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     .ads-wrap
       filter: brightness(.8)
 
-    #aside-content .aside-list > .aside-list-item:not(:last-child)
+    #aside_content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)
 
     // 第三方

source/css/_mode/readmode.styl

@@ -7,10 +7,7 @@ if hexo-config('readmode')
     --gray: #d6dbdf
     --hr-border: #d6dbdf
     --hr-before-color: darken(#d6dbdf, 10)
-    --highlight-bg: #f7f7f7
+    -highlight-bg: #f7f7f7
-    --exit-btn-bg: #C0C0C0
-    --exit-btn-color: #fff
-    --exit-btn-hover: darken(#C0C0C0, 20)
 
   [data-theme='dark']
     .read-mode
@@ -21,32 +18,12 @@ if hexo-config('readmode')
       --gray: rgba(255, 255, 255, .7)
       --hr-border: rgba(255, 255, 255, .5)
       --hr-before-color: rgba(255, 255, 255, .7)
-      --highlight-bg: #171717
+      -highlight-bg: #171717
-      --exit-btn-bg: #1f1f1f
-      --exit-btn-color: rgba(255, 255, 255, .9)
-      --exit-btn-hover: lighten(#1f1f1f, 20)
 
   .read-mode
     background: var(--readmode-light-color)
 
-    .exit-readmode
+    #aside_content
-      position: fixed
-      top: 30px
-      right: 30px
-      width: 40px
-      height: 40px
-      border-radius: 8px
-      background: var(--exit-btn-bg)
-      color: var(--exit-btn-color)
-      text-align: center
-      font-size: 16px
-      cursor: pointer
-      transition: background .3s
-
-      &:hover
-        background: var(--exit-btn-hover)
-
-    #aside-content
       display: none
 
     #body-wrap
@@ -77,11 +54,20 @@ if hexo-config('readmode')
     .highlight-tools,
     #footer,
     #post > *:not(#post-info):not(.post-content),
+    #to_comment,
+    #mobile-toc-button,
     #nav,
     .post-outdate-notice,
-    #web_bg,
+    #web_bg
-    #rightside,
+      display: none !important
-    .no-top-img
+
+    if !hexo-config('chat_btn')
+      #chatra,
+      #tidio-chat-code,
+      #tidio-chat,
+      #daodream-container,
+      .gitter-chat-embed,
+      .gitter-open-chat-button
         display: none !important
 
     #article-container

source/js/main.js

@@ -488,20 +488,7 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const rightSideFn = {
     switchReadMode: () => { // read-mode
-      const $body = document.body
+      document.body.classList.toggle('read-mode')
-      $body.classList.add('read-mode')
-      const newEle = document.createElement('button')
-      newEle.type = 'button'
-      newEle.className = 'fas fa-sign-out-alt exit-readmode'
-      $body.appendChild(newEle)
-
-      function clickFn () {
-        $body.classList.remove('read-mode')
-        newEle.remove()
-        newEle.removeEventListener('click', clickFn)
-      }
-
-      newEle.addEventListener('click', clickFn)
     },
     switchDarkMode: () => { // Switch Between Light And Dark Mode
       const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'