增加控制樱花特效开启按钮，待解决首次进入页面需要点击两次才能控制的问题

themes/butterfly/_config.yml

@@ -133,7 +133,7 @@ error_img:
 # A simple 404 page
 error_404:
   enable: false
-  subtitle: 'Page Not Found'
+  subtitle: "Page Not Found"
   background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
 
 post_meta:
@@ -551,7 +551,7 @@ canvas_fluttering_ribbon:
 # https://github.com/hustcc/canvas-nest.js
 canvas_nest:
   enable: false
-  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
   opacity: 0.7 # the opacity of line (0~1), default: 0.5.
   zIndex: -1 # z-index property of the background, default: -1.
   count: 99 # the number of lines, default: 99.
@@ -669,7 +669,7 @@ aside:
       enable: true
       icon: fab fa-github
       text: Follow Me
-      link: https://github.com/xxxxxx
+      link: https://github.com/wenyongda
   card_announcement:
     enable: true
     content: This is my Blog
@@ -735,9 +735,9 @@ translate:
   # Time delay
   translateDelay: 0
   # The text of the button when the language is Simplified Chinese
-  msgToTraditionalChinese: '繁'
+  msgToTraditionalChinese: "繁"
   # The text of the button when the language is Traditional Chinese
-  msgToSimplifiedChinese: '簡'
+  msgToSimplifiedChinese: "簡"
 
 # Read Mode (閲讀模式)
 readmode: true
@@ -823,8 +823,8 @@ aplayerInject:
 snackbar:
   enable: false
   position: bottom-left
-  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
+  bg_light: "#49b1f5" # The background color of Toast Notification in light mode
-  bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode
+  bg_dark: "#1f1f1f" # The background color of Toast Notification in dark mode
 
 # https://instant.page/
 # prefetch (預加載)
@@ -894,7 +894,7 @@ CDN:
   # when set it to local, you need to install hexo-butterfly-extjs
   third_party_provider: jsdelivr
 
-  # Add version number to CDN, true or false  
+  # Add version number to CDN, true or false
   version: false
 
   # Custom format
@@ -952,4 +952,4 @@ CDN:
     # prismjs_lineNumber_js:
     # prismjs_autoloader:
     # artalk_js:
-    # artalk_css:
+    # artalk_css:

themes/butterfly/languages/default.yml

@@ -40,7 +40,7 @@ search:
   algolia_search:
     input_placeholder: Search for Posts
     hits_empty: "We didn't find any results for the search: ${query}."
-    hits_stats: '${hits} results found in ${time} ms'
+    hits_stats: "${hits} results found in ${time} ms"
 
   local_search:
     input_placeholder: Search for Posts
@@ -103,6 +103,7 @@ rightside:
   setting: Setting
   aside: Toggle between single-column and double-column
   chat: Chat
+  toggle_sakura: Sakura effect toggled on or off
 
 copy_copyright:
   author: Author

themes/butterfly/languages/en.yml

@@ -40,7 +40,7 @@ search:
   algolia_search:
     input_placeholder: Search for Posts
     hits_empty: "We didn't find any results for the search: ${query}."
-    hits_stats: '${hits} results found in ${time} ms'
+    hits_stats: "${hits} results found in ${time} ms"
 
   local_search:
     input_placeholder: Search for Posts
@@ -103,6 +103,7 @@ rightside:
   setting: Setting
   aside: Toggle between single-column and double-column
   chat: Chat
+  toggle_sakura: Sakura effect toggled
 
 copy_copyright:
   author: Author

themes/butterfly/languages/zh-CN.yml

@@ -40,12 +40,12 @@ search:
   load_data: 数据库加载中
   algolia_search:
     input_placeholder: 搜索文章
-    hits_empty: '找不到您查询的内容：${query}'
+    hits_empty: "找不到您查询的内容：${query}"
-    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
+    hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
 
   local_search:
     input_placeholder: 搜索文章
-    hits_empty: '找不到您查询的内容：${query}'
+    hits_empty: "找不到您查询的内容：${query}"
 
 pagination:
   prev: 上一篇
@@ -104,6 +104,7 @@ rightside:
   setting: 设置
   aside: 单栏和双栏切换
   chat: 聊天
+  toggle_sakura: 樱花特效切换
 
 copy_copyright:
   author: 作者

themes/butterfly/languages/zh-TW.yml

@@ -40,12 +40,12 @@ search:
   load_data: 資料庫載入中
   algolia_search:
     input_placeholder: 搜尋文章
-    hits_empty: '找不到您查詢的內容：${query}'
+    hits_empty: "找不到您查詢的內容：${query}"
-    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
+    hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"
 
   local_search:
     input_placeholder: 搜尋文章
-    hits_empty: '找不到您查詢的內容：${query}'
+    hits_empty: "找不到您查詢的內容：${query}"
 
 pagination:
   prev: 上一篇
@@ -104,6 +104,7 @@ rightside:
   setting: 設定
   aside: 單欄和雙欄切換
   chat: 聊天
+  toggle_sakura: 櫻花特效切換
 
 copy_copyright:
   author: 作者

themes/butterfly/layout/includes/rightside.pug

@@ -29,14 +29,14 @@ mixin rightsideItem(array)
         if commentsJsLoad
           a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
             i.fas.fa-comments
-      when 'xxxx'
+      when 'sakura'
-        button#xxxx(type="button" title="测试按钮")
+        button#toggle_sakura_btn(type="button" title=_p("rightside.toggle_sakura"))
-          i.fas.fa-xxxx
+          i.fas.fa-seedling
 
 #rightside
   - const { enable, hide, show } = theme.rightside_item_order
-  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside', 'xxxx']
+  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
-  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
+  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment','sakura']
 
 
   #rightside-config-hide

themes/butterfly/source/js/main.js

@@ -146,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function () {
       this.classList.toggle('expand-done')
     }
 
-    function createEle (lang, item, service) {
+    function createEle(lang, item, service) {
       const fragment = document.createDocumentFragment()
 
       if (isShowTool) {
@@ -205,7 +205,7 @@ document.addEventListener('DOMContentLoaded', function () {
   /**
    * PhotoFigcaption
    */
-  function addPhotoFigcaption () {
+  function addPhotoFigcaption() {
     document.querySelectorAll('#article-container img').forEach(function (item) {
       const parentEle = item.parentNode
       const altValue = item.title || item.alt
@@ -265,7 +265,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // find the scroll direction
-    function scrollDirection (currentTop) {
+    function scrollDirection(currentTop) {
       const result = currentTop > initTop // true is down & false is up
       initTop = currentTop
       return result
@@ -278,38 +278,38 @@ document.addEventListener('DOMContentLoaded', function () {
     const isChatBtnShow = typeof chatBtnShow === 'function'
 
     const scrollTask = btf.throttle(() => {
-        const currentTop = window.scrollY || document.documentElement.scrollTop
+      const currentTop = window.scrollY || document.documentElement.scrollTop
-        const isDown = scrollDirection(currentTop)
+      const isDown = scrollDirection(currentTop)
-        if (currentTop > 56) {
+      if (currentTop > 56) {
-          if (isDown) {
+        if (isDown) {
-            if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-            if (isChatBtnShow && isChatShow === true) {
+          if (isChatBtnShow && isChatShow === true) {
-              chatBtnHide()
+            chatBtnHide()
-              isChatShow = false
+            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: 0.8; transform: translateX(-58px)'
           }
         } else {
-          if (currentTop === 0) {
+          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-            $header.classList.remove('nav-fixed', 'nav-visible')
+          if (isChatBtnHide && isChatShow === false) {
+            chatBtnShow()
+            isChatShow = true
           }
-          $rightside.style.cssText = "opacity: ''; transform: ''"
         }
-
+        $header.classList.add('nav-fixed')
-        if (document.body.scrollHeight <= innerHeight) {
+        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
           $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
         }
-      }, 200)
+      } 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: 0.8; transform: translateX(-58px)'
+      }
+    }, 200)
+
     window.scrollCollect = scrollTask
 
     window.addEventListener('scroll', scrollCollect)
@@ -455,7 +455,7 @@ document.addEventListener('DOMContentLoaded', function () {
       newEle.className = 'fas fa-sign-out-alt exit-readmode'
       $body.appendChild(newEle)
 
-      function clickFn () {
+      function clickFn() {
         $body.classList.remove('read-mode')
         newEle.remove()
         newEle.removeEventListener('click', clickFn)
@@ -501,6 +501,17 @@ document.addEventListener('DOMContentLoaded', function () {
         : saveToLocal.set('aside-status', 'hide', 2)
       $htmlDom.toggle('hide-aside')
     },
+    toggleSakuraBtn: () => {
+      const toggleBtn = document.getElementById('toggle_sakura_btn');
+      if (toggleBtn) {
+        // toggleBtn.addEventListener('click', function () {
+        const sakuraEffect = document.getElementById('canvas_sakura');
+        if (sakuraEffect) {
+          sakuraEffect.style.display = (sakuraEffect.style.display === 'none' || sakuraEffect.style.display === '') ? 'block' : 'none';
+        }
+        // });
+      }
+    },
 
     runMobileToc: () => {
       if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
@@ -529,6 +540,9 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
+      case 'toggle_sakura_btn':
+        rightSideFn.toggleSakuraBtn()
+        break
       default:
         break
     }
@@ -556,10 +570,10 @@ document.addEventListener('DOMContentLoaded', function () {
       let textFont; const copyFont = window.getSelection(0).toString()
       if (copyFont.length > copyright.limitCount) {
         textFont = copyFont + '\n' + '\n' + '\n' +
-        copyright.languages.author + '\n' +
+          copyright.languages.author + '\n' +
-        copyright.languages.link + window.location.href + '\n' +
+          copyright.languages.link + window.location.href + '\n' +
-        copyright.languages.source + '\n' +
+          copyright.languages.source + '\n' +
-        copyright.languages.info
+          copyright.languages.info
       } else {
         textFont = copyFont
       }