breaking changes: 升級 fontawesome 到 v6 #689

feat: snackbar 增加圓角
feat: 增加 flink 標籤外掛
fix: 修復點擊 toc 外圍,控制檯報錯的 bug
fix: Facebook Comments 無法使用 #787
fix: chat_btn 聊天按鈕翻譯缺失 #791
fix: local search 的 content 設爲 false, 搜索無法運行的 bug #764
fix: Mermaid 圖表渲染後元素高度過大 #773
fix: 文章頁分享按鈕另開一行時， 導航頁寬度沒有 100% 的 bug #765
improvement: 語義化 toggle 標籤外掛
improvement: darkmode 下 toc 背景顏色更改

_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

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 <my@crazywong.com>",

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/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>
+  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>`
-    <div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
 }
 
 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-family: 'Font Awesome 6 Free'
-  font-variant: normal
-  font-family: 'Font Awesome 5 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
+          animation: sidebarItem (i / 5) s
-
-.card-announcement-animation
-  color: #FF0000
-  animation: announ_animation .8s linear infinite
 
 .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
@@ -106,3 +109,6 @@ mjx-container[display],
 
           &:before
             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
+          .flink-item-icon
-            transform: rotate(360deg)
+            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
+    .flink-item-name
-            @extend .limit-one-line
+      @extend .limit-one-line
-            padding: 16px 10px 0 0
+      padding: 16px 10px 0 0
-            height: 40px
+      height: 40px
-            font-weight: bold
+      font-weight: bold
-            font-size: 1.43em
+      font-size: 1.43em
 
-          .flink-item-desc
+    .flink-item-desc
-            @extend .limit-one-line
+      @extend .limit-one-line
-            padding: 16px 10px 16px 0
+      padding: 16px 10px 16px 0
-            height: 50px
+      height: 50px
-            font-size: .93em
+      font-size: .93em
+
+    .flink-name
+      margin-bottom: 5px
+      font-weight: bold
+      font-size: 1.5em

source/css/_tags/hide.styl

@@ -3,7 +3,7 @@
 .hide-block
   & > .hide-button
     display: inline-block
-    padding: 6px 20px
+    padding: 5px 18px
     background: $tag-hide-bg
     color: var(--white)
 
@@ -32,27 +32,15 @@
 .hide-block
   margin: 0 0 16px
 
-.hide-toggle
+.toggle
   margin-bottom: 20px
   border: 1px solid $tag-hide-toggle-bg
 
-  & > .hide-button
+  & > .toggle-button
-    padding: 6px 10px
+    padding: 6px 15px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
     cursor: pointer
 
-    & > i
+  & > .toggle-content
-      font-size: 1.2em
-      transition: all .3s
-
-    &.open
-      i
-        transform: rotate(90deg)
-
-      & + div
-        display: block
-
-  & > .hide-content
-    display: none
     margin: 30px 24px

source/js/main.js

@@ -361,7 +361,9 @@ document.addEventListener('DOMContentLoaded', function () {
       // toc元素點擊
       $cardToc.addEventListener('click', e => {
         e.preventDefault()
-        const $target = e.target.classList.contains('toc-link')
+        const target = e.target.classList
+        if (target.contains('toc-content')) return
+        const $target = target.contains('toc-link')
           ? e.target
           : e.target.parentElement
         btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
@@ -613,13 +615,9 @@ document.addEventListener('DOMContentLoaded', function () {
       $hideInline.forEach(function (item) {
         item.addEventListener('click', function (e) {
           const $this = this
-          const $hideContent = $this.nextElementSibling
+          $this.classList.add('open')
-          $this.classList.toggle('open')
+          const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
-          if ($this.classList.contains('open')) {
+          $fjGallery.length && btf.initJustifiedGallery($fjGallery)
-            if ($hideContent.querySelectorAll('.fj-gallery').length > 0) {
-              btf.initJustifiedGallery($hideContent.querySelectorAll('.fj-gallery'))
-            }
-          }
         })
       })
     }

source/js/search/local-search.js

@@ -56,7 +56,7 @@ window.addEventListener('load', () => {
       datas = [...a.querySelectorAll('entry')].map(function (item) {
         return {
           title: item.querySelector('title').textContent,
-          content: item.querySelector('content').textContent,
+          content: item.querySelector('content') && item.querySelector('content').textContent,
           url: item.querySelector('url').textContent
         }
       })
@@ -76,15 +76,12 @@ window.addEventListener('load', () => {
 
       $resultContent.innerHTML = ''
       let str = '<div class="search-result-list">'
-      if (this.value.trim().length <= 0) return
+      if (keywords.length <= 0) return
       let count = 0
       // perform local searching
       datas.forEach(function (data) {
         let isMatch = true
-        if (!data.title || data.title.trim() === '') {
+        let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
-          data.title = ''
-        }
-        let dataTitle = data.title.trim().toLowerCase()
         const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
         const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
         let indexTitle = -1
@@ -112,11 +109,10 @@ window.addEventListener('load', () => {
 
         // show search results
         if (isMatch) {
-          const content = data.content.trim().replace(/<[^>]+>/g, '')
           if (firstOccur >= 0) {
             // cut out 130 characters
             // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30
-            // let end = firstOccur + 50 > content.length ? content.length : firstOccur + 50
+            // let end = firstOccur + 50 > dataContent.length ? dataContent.length : firstOccur + 50
             let start = firstOccur - 30
             let end = firstOccur + 100
 
@@ -128,11 +124,11 @@ window.addEventListener('load', () => {
               end = 100
             }
 
-            if (end > content.length) {
+            if (end > dataContent.length) {
-              end = content.length
+              end = dataContent.length
             }
 
-            let matchContent = content.substring(start, end)
+            let matchContent = dataContent.substring(start, end)
 
             // highlight all keywords
             keywords.forEach(function (keyword) {

source/js/utils.js

@@ -66,7 +66,8 @@ const btf = {
       backgroundColor: bg,
       showAction: showAction,
       duration: duration,
-      pos: position
+      pos: position,
+      customClass: 'snackbar-css'
     })
   },