feat: 右下角增加字體調整按鈕

fix: 修復沒有滾動條時，右下角按鈕顯示問題  close #439
remove: 刪除ICP配置， 如需要，請使用custom_text配置 close #435

_config.yml

@@ -375,11 +375,6 @@ footer:
     since: 2020
   custom_text:
   copyright: true # Copyright of theme and framework
-  ICP: # Chinese ICP License
-    enable: false
-    url:
-    text:
-    icon: /img/icp.png
 
 # Analysis
 # --------------------------------------
@@ -681,6 +676,9 @@ newest_comments:
 # Bottom right button (右下角按鈕)
 # --------------------------------------
 
+# Change font size
+change_font_size: false
+
 # Conversion between Traditional and Simplified Chinese (簡繁轉換)
 translate:
   enable: false

languages/default.yml

@@ -88,6 +88,8 @@ share: Share
 
 rightside:
   readmode_title: Read Mode
+  font_plus_title: Increase font size
+  font_minus_title: Decrease font size
   translate_title: Toggle Between Traditional Chinese And Simplified Chinese
   night_mode_title: Toggle Between Light And Dark Mode
   back_to_top: Back To Top

languages/en.yml

@@ -88,6 +88,8 @@ share: Share
 
 rightside:
   readmode_title: Read Mode
+  font_plus_title: Increase font size
+  font_minus_title: Decrease font size
   translate_title: Switch Between Traditional Chinese And Simplified Chinese
   night_mode_title: Switch Between Light And Dark Mode
   back_to_top: Back To Top

languages/zh-CN.yml

@@ -89,6 +89,8 @@ share: 分享
 
 rightside:
   readmode_title: 阅读模式
+  font_plus_title: 放大字体
+  font_minus_title: 缩小字体
   translate_title: 简繁转换
   night_mode_title: 浅色和深色模式转换
   back_to_top: 回到顶部

languages/zh-TW.yml

@@ -89,6 +89,8 @@ share: 分享
 
 rightside:
   readmode_title: 閱讀模式
+  font_plus_title: 放大字型
+  font_minus_title: 縮小字型
   translate_title: 簡繁轉換
   night_mode_title: 淺色和深色模式轉換
   back_to_top: 回到頂部

layout/includes/footer.pug

@@ -15,9 +15,3 @@
       a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
   if theme.footer.custom_text
     .footer_custom_text!=`${theme.footer.custom_text}`
-  if theme.footer.ICP.enable
-    .icp
-      a(href=theme.footer.ICP.url)
-        if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
-        span=theme.footer.ICP.text

layout/includes/head/js.pug

@@ -61,5 +61,11 @@ script
     |    }
     | }
   
+  if theme.change_font_size
+    | const fontSizeVal = saveToLocal.get('global-font-size')
+    | if (fontSizeVal !== undefined) {
+    |   document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
+    | }
+
   | })()
 

layout/includes/rightside.pug

@@ -3,6 +3,11 @@
     if is_post() && theme.readmode
       button#readmode(type="button" title=_p('rightside.readmode_title'))
         i.fas.fa-book-open
+    if theme.change_font_size
+      button#font-plus(type="button" title=_p('rightside.font_plus_title'))
+        i.fas.fa-plus
+      button#font-minus(type="button" title=_p('rightside.font_minus_title'))
+        i.fas.fa-minus
     if theme.translate.enable
       button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
     if theme.darkmode.enable && theme.darkmode.button
@@ -13,13 +18,13 @@
         i.fas.fa-arrows-alt-h
   #rightside-config-show
     if is_post()
-      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
+      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size)
         button#rightside_config(type="button" title=_p("rightside.setting"))
           i.fas.fa-cog.fa-spin
       if showToc && theme.aside.mobile
         button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
           i.fas.fa-list-ul
-    else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)
+    else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
       button#rightside_config(type="button" title=_p("rightside.setting"))
         i.fas.fa-cog.fa-spin
 

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

@@ -33,7 +33,7 @@ script.
     }
 
     if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
-      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
+      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
       else loadTwikoo(true)
     } else {
       window.loadOtherComment = () => {

package.json

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

source/js/main.js

@@ -299,10 +299,11 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const scrollFn = function () {
     const $rightside = document.getElementById('rightside')
+    const innerHeight = window.innerHeight + 56
 
-    // 當沒有滾動條的時候
+    // 當滾動條小于 56 的時候
-    if (document.body.scrollHeight <= window.innerHeight) {
+    if (document.body.scrollHeight <= innerHeight) {
-      $rightside.style.display = 'block'
+      $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
       return
     }
 
@@ -338,6 +339,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }
         $rightside.style.cssText = "opacity: ''; transform: ''"
       }
+
+      if (document.body.scrollHeight <= innerHeight) {
+        $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+      }
     }, 200))
 
     // find the scroll direction
@@ -506,27 +511,28 @@ document.addEventListener('DOMContentLoaded', function () {
         ? saveToLocal.set('aside-status', 'show', 2)
         : saveToLocal.set('aside-status', 'hide', 2)
       $htmlDom.toggle('hide-aside')
-    }
+    },
+
+    adjustFontSize: (plus) => {
+      const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
+      let newValue = ''
+      detectFontSizeChange = true
+      if (plus) {
+        if (fontSizeVal >= 20) return
+        newValue = fontSizeVal + 1
+        document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
+        !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
+      } else {
+        if (fontSizeVal <= 10) return
+        newValue = fontSizeVal - 1
+        document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
+        document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
       }
 
-  // function aa (num,target) {
+      saveToLocal.set('global-font-size', newValue, 2)
-  //   const a = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
-  //   let newValue = ''
-  //   detectFontSizeChange = true
-  //   if (num) {
-  //     if (a >= 20) return
-  //     newValue = a + 1
-  //     document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
-  //     !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
-  //   } else {
-  //     if (a <= 10) return
-  //     newValue = a - 1
-  //     document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
-  //     document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
-  //   }
-
       // document.getElementById('font-text').innerText = newValue
-  // }
+    }
+  }
 
   document.getElementById('rightside').addEventListener('click', function (e) {
     const $target = e.target.id || e.target.parentNode.id
@@ -546,12 +552,12 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
-      // case 'font-plus':
+      case 'font-plus':
-      //   aa(true)
+        rightSideFn.adjustFontSize(true)
-      //   break
+        break
-      // case 'font-minus':
+      case 'font-minus':
-      //   aa()
+        rightSideFn.adjustFontSize()
-      //   break
+        break
       default:
         break
     }