Merge branch 'dev'

_config.yml

@@ -776,7 +776,7 @@ snackbar:
   enable: false
   position: bottom-left
   bg_light: '#49b1f5' # The background color of Toast Notification in light mode
-  bg_dark: '#121212' # 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:
   ClickShowText:
 
   # fontawesome
-  fontawesome:
+  fontawesomeV6:
 
   # Conversion between Traditional and Simplified Chinese
   translate:

languages/default.yml

@@ -103,6 +103,7 @@ rightside:
   scroll_to_comment: Scroll To Comments
   setting: Setting
   aside: Toggle between single-column and double-column
+  chat: Chat
 
 copy_copyright:
   author: Author

languages/en.yml

@@ -103,6 +103,7 @@ rightside:
   scroll_to_comment: Scroll To Comments
   setting: Setting
   aside: Toggle between single-column and double-column
+  chat: Chat
 
 copy_copyright:
   author: Author

languages/zh-CN.yml

@@ -104,6 +104,7 @@ rightside:
   scroll_to_comment: 直达评论
   setting: 设置
   aside: 单栏和双栏切换
+  chat: 聊天
 
 copy_copyright:
   author: 作者

languages/zh-TW.yml

@@ -104,6 +104,7 @@ rightside:
   scroll_to_comment: 直達評論
   setting: 設定
   aside: 單欄和雙欄切換
+  chat: 聊天
 
 copy_copyright:
   author: 作者

layout/includes/head.pug

@@ -47,7 +47,7 @@ if (theme.pwa && theme.pwa.enable)
 
 //- main css
 link(rel='stylesheet', href=url_for(theme.CDN.main_css))
-link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload="this.media='all'")
+link(rel='stylesheet', href=url_for(theme.CDN.fontawesomeV6) media="print" onload="this.media='all'")
 
 if (theme.snackbar && theme.snackbar.enable)
   link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'")

layout/includes/rightside.pug

@@ -23,7 +23,7 @@ mixin rightsideItem(array)
             i.fas.fa-list-ul
       when 'chat'
         if chat_btn
-          button#chat_btn(type="button" title=_p("rightside.chat_btn"))
+          button#chat_btn(type="button" title=_p("rightside.chat"))
             i.fas.fa-sms
       when 'comment'
         if commentsJsLoad

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

@@ -7,7 +7,7 @@ script.
     if (typeof FB === 'object') FB.XFBML.parse()
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v11.0')
+      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v13.0&autoLogAppEvents=1')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')

layout/includes/widget/card_announcement.pug

@@ -1,6 +1,6 @@
 if theme.aside.card_announcement.enable
   .card-widget.card-announcement
     .item-headline
-      i.fas.fa-bullhorn.card-announcement-animation
+      i.fas.fa-bullhorn.fa-shake
       span= _p('aside.card_announcement')
     .announcement_content!= theme.aside.card_announcement.content

layout/post.pug

@@ -14,7 +14,7 @@ block content
             a(href=url_for(item.path)).post-meta__tags #[=item.name]
       include includes/third-party/share/index.pug
 
-    if theme.reward.enable
+    if theme.reward.enable && theme.reward.QR_code
       !=partial('includes/post/reward', {}, {cache: true})
 
     //- ad

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "hexo-renderer-stylus": "^2.0.1",
-    "hexo-renderer-pug": "^2.0.0"
+    "hexo-renderer-pug": "^3.0.0"
   },
   "homepage": "https://butterfly.js.org/",
   "author": "Jerry <[email protected]>",

scripts/events/config.js

@@ -80,7 +80,7 @@ hexo.extend.filter.register('before_generate', () => {
     ClickShowText: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js',
 
     // fontawesome
-    fontawesome: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css',
+    fontawesomeV6: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css',
 
     // Conversion between Traditional and Simplified Chinese
     translate: '/js/tw_cn.js',
@@ -122,7 +122,7 @@ hexo.extend.filter.register('before_generate', () => {
     use = use.split(',')
   }
 
-  const newArray = use.map(item => item.toLowerCase().replace(/^\S/, s => s.toUpperCase()))
+  const newArray = use.map(item => item.toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase()))
 
   themeConfig.comments.use = newArray
 })

scripts/events/welcome.js

@@ -12,6 +12,6 @@ hexo.on('ready', () => {
       #    # #    #   #     #   #      #   #  #      #        #    
       #####   ####    #     #   ###### #    # #      ######   #  
 
-                            ${version}                       
+                            ${version}
   ===================================================================`)
 })

scripts/tag/flink.js

@@ -0,0 +1,39 @@
+/**
+ * flink
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+const flinkFn = (args, content) => {
+  content = hexo.render.renderSync({ text: content, engine: 'yaml' })
+
+  let result = ''
+
+  content.forEach(i => {
+    const className = i.class_name ? `<div class="flink-name">${i.class_name}</div>` : ''
+    const classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ''
+
+    let listResult = ''
+
+    i.link_list.forEach(j => {
+      listResult += `
+          <div class="flink-list-item">
+            <a href="${j.link}" title="${j.name}" target="_blank">
+              <div class="flink-item-icon">
+                <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${urlFor(hexo.theme.config.error_img.flink)}"' alt="${j.name}" />
+              </div>
+              <div class="flink-item-name">${j.name}</div> 
+              <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
+            </a>
+          </div>`
+    })
+
+    result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
+  })
+
+  return `<div class="flink">${result}</div>`
+}
+
+hexo.extend.tag.register('flink', flinkFn, { ends: true })

scripts/tag/hide.js

@@ -62,8 +62,7 @@ function hideToggle (args, content) {
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<div class="hide-toggle" ${border}><div class="hide-button toggle-title" ${group}><i class="fas fa-caret-right fa-fw"></i><span>${display}</span></div>
-    <div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
+  return `<details class="toggle" ${border}><summary class="toggle-button" ${group}>${display}</summary><div class="toggle-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></details>`
 }
 
 hexo.extend.tag.register('hideInline', hideInline)

source/css/_global/function.styl

@@ -11,9 +11,7 @@
 .fontawesomeIcon
   display: inline-block
   font-weight: 600
-  font-style: normal
-  font-variant: normal
-  font-family: 'Font Awesome 5 Free'
+  font-family: 'Font Awesome 6 Free'
   text-rendering: auto
   -webkit-font-smoothing: antialiased
 
@@ -55,7 +53,7 @@
 
   li
     position: relative
-    padding 0.12em 0.4em 0.12em 1.4em
+    padding: .12em .4em .12em 1.4em
 
     &:hover
       &:before
@@ -133,11 +131,7 @@ if hexo-config('enter_transitions')
     &.open
       for i in 1 2 3 4
         > :nth-child({i})
-          animation: sidebarItem (i / 5)s
-
-.card-announcement-animation
-  color: #FF0000
-  animation: announ_animation .8s linear infinite
+          animation: sidebarItem (i / 5) s
 
 .scroll-down-effects
   animation: scroll-down-effect 1.5s infinite
@@ -251,14 +245,6 @@ if hexo-config('avatar.effect') == true
     opacity: 1
     transform: translateY(0)
 
-@keyframes announ_animation
-  0%,
-  to
-    transform: scale(1)
-
-  50%
-    transform: scale(1.2)
-
 @keyframes sidebarItem
   0%
     transform: translateX(200px)

source/css/_highlight/highlight.styl

@@ -96,7 +96,7 @@ $code-block
       transition: transform .3s
 
       & + .code-lang
-        left: 1.6em
+        left: 1.7em
 
       &.closed
         transition: all .3s
@@ -112,7 +112,7 @@ $code-block
 
     .copy-notice
       position: absolute
-      right: 2.1em
+      right: 2.4em
       opacity: 0
       transition: opacity .4s
 
@@ -160,7 +160,7 @@ $code-block
             transform: rotate(90deg) !important
 
           & ~ .copy-notice
-            right: 3.3em
+            right: 3.45em
 
           & ~ .copy-button
             right: 2.1em

source/css/_layout/aside.styl

@@ -319,6 +319,11 @@
     &:hover
       animation: more-btn-move 1s infinite
 
+  .card-announcement
+    .item-headline
+      i
+        color: #FF0000
+
 .avatar-img
   overflow: hidden
   margin: 0 auto

source/css/_layout/pagination.styl

@@ -51,6 +51,7 @@
   &.pagination-post
     overflow: hidden
     margin-top: 40px
+    width: 100%
     background: $dark-black
 
 .layout

source/css/_layout/post.styl

@@ -174,7 +174,7 @@ beautify()
     .post_share
       display: inline-block
       float: right
-      margin: 8px 0
+      margin: 8px 0 20px
       width: fit-content
 
       .social-share

source/css/_layout/third-party.styl

@@ -65,6 +65,9 @@ if hexo-config('waline.bg')
   margin: 0 0 20px
   text-align: center
 
+  & > svg
+    height: 100%
+
 .utterances,
 .fb-comments iframe
   width: 100% !important
@@ -105,4 +108,7 @@ mjx-container[display],
           padding: 0 15px
 
           &:before
-            content: none
+            content: none
+
+.snackbar-css
+  border-radius: 5px !important

source/css/_mode/darkmode.styl

@@ -142,3 +142,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     #operare_artitalk .c2
       background: #121212
+
+    #card-toc
+      +maxWidth900()
+        background: lighten(#121212, 5)

source/css/_page/flink.styl

@@ -1,5 +1,7 @@
 #article-container
   .flink
+    margin-bottom: 20px
+
     .flink-list
       overflow: auto
       padding: 10px 10px 0
@@ -23,8 +25,9 @@
           width: calc(100% - 15px) !important
 
         &:hover
-          img
-            transform: rotate(360deg)
+          .flink-item-icon
+            margin-left: -10px
+            width: 0
 
         &:before
           position: absolute
@@ -54,25 +57,31 @@
             width: 60px
             height: 60px
             border-radius: 35px
+            transition: width .3s ease-out
 
             img
               width: 100%
               height: 100%
+              transition: filter 375ms ease-in .2s, transform .3s
               object-fit: cover
-              transition: filter 375ms ease-in 0.2s, transform .3s
 
           .img-alt
             display: none
 
-          .flink-item-name
-            @extend .limit-one-line
-            padding: 16px 10px 0 0
-            height: 40px
-            font-weight: bold
-            font-size: 1.43em
+    .flink-item-name
+      @extend .limit-one-line
+      padding: 16px 10px 0 0
+      height: 40px
+      font-weight: bold
+      font-size: 1.43em
+
+    .flink-item-desc
+      @extend .limit-one-line
+      padding: 16px 10px 16px 0
+      height: 50px
+      font-size: .93em
 
-          .flink-item-desc
-            @extend .limit-one-line
-            padding: 16px 10px 16px 0
-            height: 50px
-            font-size: .93em
+    .flink-name
+      margin-bottom: 5px
+      font-weight: bold
+      font-size: 1.5em