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

2025-08-17 16:13:00 +08:00 · 2025-08-17 16:13:00 +08:00 · 75593a32c0
commit 75593a32c0
parent fb69d04f92
7 changed files with 74 additions and 56 deletions
--- a/themes/butterfly/_config.yml
+++ b/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_dark: '#1f1f1f' # The background color of Toast Notification in dark 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

 # 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:
--- a/themes/butterfly/languages/default.yml
+++ b/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
--- a/themes/butterfly/languages/en.yml
+++ b/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
--- a/themes/butterfly/languages/zh-CN.yml
+++ b/themes/butterfly/languages/zh-CN.yml
@ -40,12 +40,12 @@ search:
  load_data: 数据库加载中
  algolia_search:
    input_placeholder: 搜索文章
-    hits_empty: '找不到您查询的内容：${query}'
-    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
+    hits_empty: "找不到您查询的内容：${query}"
+    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: 作者
--- a/themes/butterfly/languages/zh-TW.yml
+++ b/themes/butterfly/languages/zh-TW.yml
@ -40,12 +40,12 @@ search:
  load_data: 資料庫載入中
  algolia_search:
    input_placeholder: 搜尋文章
-    hits_empty: '找不到您查詢的內容：${query}'
-    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
+    hits_empty: "找不到您查詢的內容：${query}"
+    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: 作者
--- a/themes/butterfly/layout/includes/rightside.pug
+++ b/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'
-        button#xxxx(type="button" title="测试按钮")
-          i.fas.fa-xxxx
+      when 'sakura'
+        button#toggle_sakura_btn(type="button" title=_p("rightside.toggle_sakura"))
+          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 showArray = enable ? show && show.split(',') : ['toc','chat','comment']
+  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
+  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment','sakura']


  #rightside-config-hide
--- a/themes/butterfly/source/js/main.js
+++ b/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 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: 0.8; transform: translateX(-58px)'
+      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 (currentTop === 0) {
-            $header.classList.remove('nav-fixed', 'nav-visible')
+          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
+          if (isChatBtnHide && isChatShow === false) {
+            chatBtnShow()
+            isChatShow = true
          }
-          $rightside.style.cssText = "opacity: ''; transform: ''"
        }
-
-        if (document.body.scrollHeight <= innerHeight) {
+        $header.classList.add('nav-fixed')
+        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.link + window.location.href + '\n' +
-        copyright.languages.source + '\n' +
-        copyright.languages.info
+          copyright.languages.author + '\n' +
+          copyright.languages.link + window.location.href + '\n' +
+          copyright.languages.source + '\n' +
+          copyright.languages.info
      } else {
        textFont = copyFont
      }