feat: 更新頁腳配置，增加導航欄和版權信息，改進樣式和結構

fix: 修改 getBgPath 函數以使用 this.url_for 獲取圖片的正確路徑
feat: 增加右側配置按鈕的動畫效果

_config.yml

@@ -254,12 +254,15 @@ noticeOutdate:
 # Footer Settings
 # --------------------------------------
 footer:
+  nav:
   owner:
     enable: true
-    since: 2019
-  custom_text:
+    since: 2025
   # Copyright of theme and framework
-  copyright: true
+  copyright:
+    enable: true
+    version: true
+  custom_text:
 
 # --------------------------------------
 # Aside Settings
@@ -399,6 +402,9 @@ rightside_item_order:
   # Default: toc,chat,comment
   show:
 
+# Animation for the bottom right config button
+rightside_config_animation: true
+
 # --------------------------------------
 # Global Settings
 # --------------------------------------

layout/includes/footer.pug

@@ -1,19 +1,39 @@
-#footer-wrap
-  if theme.footer.owner.enable
-    - const currentYear = new Date().getFullYear()
-    - const sinceYear = theme.footer.owner.since
-    .copyright
-      if sinceYear && sinceYear != currentYear
-        != `©${sinceYear} - ${currentYear} By ${config.author}`
-      else
-        != `©${currentYear} By ${config.author}`
-  if theme.footer.copyright
-    - const v = getVersion()
-    .framework-info
-      span= _p('footer.framework') + ' '
-      a(href='https://hexo.io')= `Hexo ${v.hexo}`
-      span.footer-separator |
-      span= _p('footer.theme') + ' '
-      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= `Butterfly ${v.theme}`
+- const { nav, owner, copyright, custom_text } = theme.footer
+
+if nav
+  .footer-flex
+    for block in nav
+      .footer-flex-items(style=`${ block.width ? 'flex-grow:' + block.width : '' }`)
+        for blockItem in block.content
+          .footer-flex-item
+            .footer-flex-title= blockItem.title
+            .footer-flex-content
+              for subitem in blockItem.item
+                if subitem.html
+                  div!= subitem.html
+                else if subitem.url
+                  a(href=url_for(subitem.url), target='_blank' title=subitem.title)= subitem.title
+                else if subitem.title
+                  div!= subitem.title
+.footer-other
+  .footer-copyright
+    if owner.enable
+      - const currentYear = new Date().getFullYear()
+      - const sinceYear = owner.since
+      span.copyright
+        if sinceYear && sinceYear != currentYear
+          != `©${sinceYear} - ${currentYear} By ${config.author}`
+        else
+          != `©${currentYear} By ${config.author}`
+    if copyright.enable
+      - const v = copyright.version ? getVersion() : false
+      span.framework-info
+        if owner.enable && nav
+          span.footer-separator |
+        span= _p('footer.framework') + ' '
+        a(href='https://hexo.io')= `Hexo${ v ? ' ' + v.hexo : '' }`
+        span.footer-separator |
+        span= _p('footer.theme') + ' '
+        a(href='https://github.com/jerryc127/hexo-theme-butterfly')= `Butterfly${ v ? ' ' + v.theme : '' }`
   if theme.footer.custom_text
-    .footer_custom_text!= theme.footer.custom_text
+    .footer_custom_text!= theme.footer.custom_text

layout/includes/rightside.pug

@@ -1,4 +1,5 @@
 - const { readmode, translate, darkmode, aside, chat } = theme
+
 mixin rightsideItem(array)
   each item in array
     case item
@@ -30,30 +31,22 @@ mixin rightsideItem(array)
           a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
             i.fas.fa-comments
 
+- const { enable, hide, show } = theme.rightside_item_order
+- const hideArray = enable && hide ? hide.split(',') : ['readmode','translate','darkmode','hideAside']
+- const showArray = enable && show ? show.split(',') : ['toc','chat','comment']
+- const needCogBtn = (enable && hide) || (!enable && ((globalPageType === 'post' && (readmode || translate.enable || (darkmode.enable && darkmode.button))) || (translate.enable || (darkmode.enable && darkmode.button))))
+
 #rightside
-  - const { enable, hide, show } = theme.rightside_item_order
-  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
-  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
-
-
   #rightside-config-hide
-    if hideArray
+    if hideArray.length
       +rightsideItem(hideArray)
-  #rightside-config-show
-    if enable
-      if hide
-        button#rightside-config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog.fa-spin
-    else
-      if globalPageType === 'post'
-        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
-          button#rightside-config(type="button" title=_p("rightside.setting"))
-            i.fas.fa-cog.fa-spin
-      else if translate.enable || (darkmode.enable && darkmode.button)
-        button#rightside-config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog.fa-spin
 
-    if showArray
+  #rightside-config-show
+    if needCogBtn
+      button#rightside-config(type="button" title=_p("rightside.setting"))
+        i.fas.fa-cog(class=theme.rightside_config_animation ? 'fa-spin' : '')
+
+    if showArray.length
       +rightsideItem(showArray)
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))

layout/includes/third-party/abcjs/abcjs.pug

@@ -1,8 +1,8 @@
 script.
-  (function() {
-    const abcjsInit = function() {
-      const abcjsFn = function() {
-        setTimeout(function() {
+  (() = {
+    const abcjsInit = () => {
+      const abcjsFn = () => {
+        setTimeout(() => {
           const sheets = document.querySelectorAll(".abc-music-sheet")
           for (let i = 0; i < sheets.length; i++) {
             const ele = sheets[i]

layout/includes/third-party/pjax.pug

@@ -60,9 +60,9 @@ script.
     document.addEventListener('pjax:error', e => {
       if (e.request.status === 404) {
         const usePjax = !{theme.pjax && theme.pjax.enable}
-        !{theme.error_404 && theme.error_404.enable} 
+        !{theme.error_404 && theme.error_404.enable}
           ? (usePjax ? pjax.loadUrl('!{url_for("/404.html")}') : window.location.href = '!{url_for("/404.html")}')
           : window.location.href = e.request.responseURL
       }
     })
-  })()
+  })()

layout/includes/third-party/subtitle.pug

@@ -87,7 +87,7 @@ case source
   when 3
     script.
       function subtitleType () {
-        btf.getScript('https://sdk.jinrishi8ci.com/v2/browser/jinrishici.js')
+        btf.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js')
           .then(() => {
             jinrishici.load(result => {
               if (result && result.data && result.data.content) {

package.json

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

scripts/events/merge_config.js

@@ -119,12 +119,16 @@ hexo.extend.filter.register('before_generate', () => {
       message_next: 'days since the last update, the content of the article may be outdated.'
     },
     footer: {
+      nav: null,
       owner: {
         enable: true,
-        since: 2019
+        since: 2024
       },
-      custom_text: null,
-      copyright: true
+      copyright: {
+        enable: true,
+        version: true
+      },
+      custom_text: null
     },
     aside: {
       enable: true,
@@ -223,6 +227,7 @@ hexo.extend.filter.register('before_generate', () => {
       hide: null,
       show: null
     },
+    rightside_config_animation: true,
     anchor: {
       auto_update: false,
       click_to_scroll: false

scripts/helpers/page.js

@@ -81,7 +81,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   return loop(menu) || defaultTitle
 })
 
-hexo.extend.helper.register('getBgPath', path => {
+hexo.extend.helper.register('getBgPath', function(path) {
   if (!path) return ''
 
   const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
@@ -91,7 +91,7 @@ hexo.extend.helper.register('getBgPath', path => {
   if (colorPattern.test(path)) {
     return `background-color: ${path};`
   } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path)) {
-    return `background-image: url(${path});`
+    return `background-image: url(${this.url_for(path)});`
   } else {
     return `background: ${path};`
   }

source/css/_layout/footer.styl

@@ -13,17 +13,16 @@
       background-color: var(--mark-bg)
       content: ''
 
-#footer-wrap
-  position: relative
-  padding: 40px 20px
-  color: var(--light-grey)
-  text-align: center
+  & > *
+    position: relative
+    color: var(--light-grey)
 
   a
     color: var(--light-grey)
+    transition: all .3s ease-in-out
 
     &:hover
-      text-decoration: underline
+      color: $light-blue
 
   .footer-separator
     margin: 0 4px
@@ -33,3 +32,56 @@
     max-height: 1.4em
     width: auto
     vertical-align: text-bottom
+
+  .footer-flex
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: space-between
+    margin: 0 auto
+    padding: 40px 60px
+    max-width: 1200px
+    width: 100%
+    text-align: left
+    gap: 13px
+
+    +maxWidth768()
+      padding: 30px
+      gap: 10px
+
+    .footer-flex-items
+      flex-shrink: 0
+      min-width: 100px
+      text-align: left
+      white-space: nowrap
+
+    .footer-flex-title
+      margin-bottom: 5px
+      white-space: nowrap
+      font-weight: 600
+      font-size: 1.4em
+
+    .footer-flex-item
+      margin: 10px 0
+      white-space: nowrap
+
+    a
+      display: block
+      white-space: nowrap
+
+  .footer-other
+    padding: 40px 20px
+    width: 100%
+    text-align: center
+
+    if hexo-config('footer.nav')
+      padding: 10px 8px
+      background-color: rgba(0, 0, 0, .1)
+
+      .copyright,
+      .framework-info,
+      .footer_custom_text
+        font-size: .9em
+    else
+      .framework-info
+        display: block