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 背景顏色更改

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

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
-    padding: 6px 10px
+  & > .toggle-button
+    padding: 6px 15px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
     cursor: pointer
 
-    & > i
-      font-size: 1.2em
-      transition: all .3s
-
-    &.open
-      i
-        transform: rotate(90deg)
-
-      & + div
-        display: block
-
-  & > .hide-content
-    display: none
+  & > .toggle-content
     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.toggle('open')
-          if ($this.classList.contains('open')) {
-            if ($hideContent.querySelectorAll('.fj-gallery').length > 0) {
-              btf.initJustifiedGallery($hideContent.querySelectorAll('.fj-gallery'))
-            }
-          }
+          $this.classList.add('open')
+          const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
+          $fjGallery.length && btf.initJustifiedGallery($fjGallery)
         })
       })
     }

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() === '') {
-          data.title = ''
-        }
-        let dataTitle = data.title.trim().toLowerCase()
+        let dataTitle = data.title ? 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) {
-              end = content.length
+            if (end > dataContent.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'
     })
   },