feat: twikoo增加 region 配置

fix: 修復twikoo 廣州地域下，最新評論無法讀取的bugs
fix: 修復waline背景設定無效的bugs
fix: 修復twikoo 廣州地域下，page 頁進入post頁，twikoo評論報錯的bugs

README.md

@@ -1,9 +1,9 @@
 # hexo-theme-butterfly
 
-![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/master?color=%231ab1ad&label=master)
+![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-4.2+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-5.0+-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/Utterances/Facebook Comments/Twikoo）
+- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/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,12 +1,11 @@
 # hexo-theme-butterfly
 
-![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/master?color=%231ab1ad&label=master)
+![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-4.2+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-5.0+-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/)
@@ -71,7 +70,7 @@ theme: butterfly
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
+- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/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/Utterances/Facebook Comments/Twikoo
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
   use:
   # - Valine
   # - Disqus
@@ -304,6 +304,15 @@ 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:
@@ -326,6 +335,9 @@ facebook_comments:
 # Twikoo
 # https://github.com/imaegoo/twikoo
 twikoo:
+  envId:
+  region:
+  option:
 
 # Chat Services
 # --------------------------------------
@@ -395,6 +407,14 @@ 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
 # --------------------------------------
 
@@ -609,6 +629,7 @@ aside:
     enable: true
     description:
     button:
+      enable: true
       icon: fab fa-github
       text: Follow Me
       link: https://github.com/xxxxxx
@@ -619,24 +640,29 @@ 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
 # 訪問人數
@@ -654,14 +680,11 @@ 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
-  leancloud:
+  # You can only choose one, or neither
-    enable: false
+  valine: 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:
@@ -670,6 +693,7 @@ newest_comments:
     forum:
     api_key:
   twikoo: false
+  waline: false
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------
@@ -848,6 +872,7 @@ 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,3 +30,14 @@ 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,6 +12,12 @@ 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,23 +66,29 @@
             if block
               block
         
-        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
+        case whichCount
+          when 'Disqus'
+          when 'Disqusjs'
             +countBlock
               span.disqus-comment-count
                 a(href=full_url_for(page.path) + '#disqus_thread')
-        else if whichCount === 'Valine'
+          when 'Valine'
             +countBlock
               a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
                 span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-        else if whichCount === 'Gitalk'
+          when 'Waline'
             +countBlock
               a(href=url_for(page.path) + '#post-comment')
-              span.gitalk-#card-toc
+                span.waline-comment-count(id=url_for(page.path))
-        else if whichCount === 'Twikoo'
+          when 'Gitalk'
+            +countBlock
+              a(href=url_for(page.path) + '#post-comment')
+                span.gitalk-comment-count
+          when 'Twikoo'
             +countBlock
               a(href=url_for(page.path) + '#post-comment')
                 span#twikoo-count
-        else if whichCount === 'Facebook Comments'
+          when 'Facebook Comments'
             +countBlock
               a(href=url_for(page.path) + '#post-comment')
                 span.fb-comments-count(data-href=urlNoIndex())

layout/includes/layout.pug

@@ -1,5 +1,6 @@
 - 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)
@@ -14,7 +15,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       
     !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
 
-    #body-wrap
+    #body-wrap(class=pageType)
       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,6 +31,8 @@ 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,5 +14,7 @@ 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,16 +1,26 @@
+- let option = theme.twikoo.option ? JSON.stringify(theme.twikoo.option) : false
+
 script.
   (()=>{
     const $countDom = document.getElementById('twikoo-count')
     const init = () => {
-      twikoo.init({
+      let initData = {
-        envId: '!{theme.twikoo}',
+        el: '#twikoo-wrap',
-        el: '#twikoo-wrap'
+        envId: '!{theme.twikoo.envId}',
-      })
+        region: '!{theme.twikoo.region}'
+      }
+
+      if (!{Boolean(option)}) {
+        const otherData = !{option}
+        initData = Object.assign(initData, otherData)
+      }
+      
+      twikoo.init(initData)
     }
 
     const getCount = () => {
       twikoo.getCommentsCount({
-        envId: '!{theme.twikoo}',
+        envId: '!{theme.twikoo.envId}',
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {
@@ -23,11 +33,11 @@ script.
     const loadTwikoo = (bool = false) => {
       if (typeof twikoo === 'object') {
         init()
-        bool && $countDom && setTimeout(()=>{getCount()},0)
+        bool && $countDom && setTimeout(getCount,0)
       } else {
         getScript('!{theme.CDN.twikoo}').then(()=> {
           init()
-          bool && $countDom && setTimeout(()=>{getCount()},0)
+          bool && $countDom && setTimeout(getCount,0)
         })
       }
     }

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,8 +40,8 @@ script.
   }
 
   if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
-    else setTimeout(() => loadValine(), 0)
+    else setTimeout(loadValine, 0)
   } else {
     function loadOtherComment () {
       loadValine()

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

@@ -0,0 +1,39 @@
+- 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,8 +1,12 @@
-if theme.newest_comments.leancloud.enable
+- let config = theme.newest_comments
-  include ./leancloud.pug
+
-else if theme.newest_comments.github_issues.enable
+if config.valine
+  include ./valine.pug
+else if config.waline
+  include ./waline.pug
+else if config.github_issues.enable
   include ./github-issues.pug
-else if theme.newest_comments.disqus.enable
+else if config.disqus.enable
   include ./disqus-comment.pug
-else if theme.newest_comments.twikoo
+else if config.twikoo
   include ./twikoo-comment.pug

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

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

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

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

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

@@ -0,0 +1,95 @@
+- 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,6 +1,5 @@
 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,6 +1,5 @@
 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,6 +1,5 @@
 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")
@@ -28,6 +27,7 @@ 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,7 +1,6 @@
 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,6 +1,5 @@
 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,7 +1,6 @@
 - 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,6 +1,5 @@
 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

@@ -0,0 +1,9 @@
+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,7 +1,6 @@
 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,6 +1,5 @@
 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,3 +24,4 @@
       !=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.4.0",
+  "version": "3.5.1",
   "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,6 +20,7 @@
     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)
@@ -53,7 +54,7 @@
 
     .card-info-data
       display: table
-      padding: .7rem 0
+      margin: .7rem 0 .2rem
       width: 100%
       table-layout: fixed
 
@@ -88,6 +89,7 @@
 
     #card-info-btn
       display: block
+      margin-top: .7rem
       background-color: var(--btn-bg)
       color: var(--btn-color)
       text-align: center
@@ -96,9 +98,6 @@
       span
         padding-left: .5rem
 
-  .card-content
-    padding: 1rem 1.2rem
-
   .item-headline
     padding-bottom: .3rem
     font-size: 1.2em
@@ -353,8 +352,37 @@
     .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,4 +1,5 @@
-#vcomment
+#vcomment,
+#waline
   font-size: 1.1em
 
   .vbtn
@@ -9,10 +10,7 @@
     &: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
 
@@ -27,6 +25,16 @@
     &: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-wrap
+    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,7 +7,10 @@ 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
@@ -18,12 +21,32 @@ 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)
 
-    #aside_content
+    .exit-readmode
+      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
@@ -54,20 +77,11 @@ 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,
-      display: none !important
+    #rightside,
-
+    .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

@@ -247,7 +247,6 @@ document.addEventListener('DOMContentLoaded', function () {
  * fancybox和 mediumZoom
  */
   const addFancybox = function (ele) {
-    if (ele.length) {
     const runFancybox = (ele) => {
       ele.each(function (i, o) {
         const $this = $(o)
@@ -275,12 +274,11 @@ document.addEventListener('DOMContentLoaded', function () {
       runFancybox($(ele))
     }
   }
-  }
 
   const addMediumZoom = () => {
     const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
     zoom.on('open', e => {
-      const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+      const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
       zoom.update({
         background: photoBg
       })
@@ -288,15 +286,17 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   const jqLoadAndRun = () => {
-    const isFancybox = GLOBAL_CONFIG.lightbox === 'fancybox'
+    const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
-    const $fancyboxEle = isFancybox ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') : null
+      ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img')
+      : []
+    const fbLengthNoZero = $fancyboxEle.length > 0
     const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
-    const jgEleLength = $jgEle.length
+    const jgLengthNoZero = $jgEle.length > 0
 
-    if (jgEleLength || $fancyboxEle !== null) {
+    if (jgLengthNoZero || fbLengthNoZero) {
       btf.isJqueryLoad(() => {
-        jgEleLength && runJustifiedGallery($jgEle)
+        jgLengthNoZero && runJustifiedGallery($jgEle)
-        isFancybox && addFancybox($fancyboxEle)
+        fbLengthNoZero && addFancybox($fancyboxEle)
       })
     }
   }
@@ -471,7 +471,7 @@ document.addEventListener('DOMContentLoaded', function () {
       const currentActive = $tocLink[currentIndex]
       currentActive.classList.add('active')
 
-      setTimeout(function () {
+      setTimeout(() => {
         autoScrollToc(currentActive)
       }, 0)
 
@@ -488,7 +488,20 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const rightSideFn = {
     switchReadMode: () => { // read-mode
-      document.body.classList.toggle('read-mode')
+      const $body = document.body
+      $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'
@@ -626,7 +639,7 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const addRuntime = () => {
     const $runtimeCount = document.getElementById('runtimeshow')
-    if ($runtimeCount !== null) {
+    if ($runtimeCount) {
       const publishDate = $runtimeCount.getAttribute('data-publishDate')
       $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
     }
@@ -637,7 +650,7 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const addLastPushDate = () => {
     const $lastPushDateItem = document.getElementById('last-push-date')
-    if ($lastPushDateItem !== null) {
+    if ($lastPushDateItem) {
       const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
       $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
     }
@@ -685,7 +698,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
           if (!$tabItem.classList.contains('active')) {
             const $tabContent = $tabItem.parentNode.nextElementSibling
-            btf.siblings($tabItem, '.active')[0].classList.remove('active')
+            const $siblings = btf.siblings($tabItem, '.active')[0]
+            $siblings && $siblings.classList.remove('active')
             $tabItem.classList.add('active')
             const tabId = $this.getAttribute('data-href').replace('#', '')
             const childList = [...$tabContent.children]
@@ -712,7 +726,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const toggleCardCategory = function () {
     const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
-    if ($cardCategory.length > 0) {
+    if ($cardCategory.length) {
       $cardCategory.forEach(function (item) {
         item.addEventListener('click', function (e) {
           e.preventDefault()

source/js/tw_cn.js

@@ -88,8 +88,9 @@ document.addEventListener('DOMContentLoaded', function () {
     translateButtonObject = document.getElementById('translateLink')
     if (translateButtonObject) {
       if (currentEncoding !== targetEncoding) {
-        setTimeout(function () { translateBody() }, translateDelay)
+        setTimeout(translateBody, translateDelay)
-        if (targetEncoding === 1) { translateButtonObject.innerHTML = msgToSimplifiedChinese } else translateButtonObject.innerHTML = msgToTraditionalChinese
+        if (targetEncoding === 1) translateButtonObject.innerHTML = msgToSimplifiedChinese
+        else translateButtonObject.innerHTML = msgToTraditionalChinese
       }
       translateButtonObject.addEventListener('click', translatePage, false)
     }