feat: 美化 firefox 瀏覽器滾動條

fix: Utterances 評論區在多個頁面顯示的是同一個評論區
fix: 修復評論配置爲 Livere 和 Facebook Comments 時，最新評論模塊仍然顯示的 bug
improvement: blueimp_md5 CDN 可配置
improvement: timeline 優化
improvement: css優化
improvement: 友情鏈接優化

_config.yml

@@ -254,6 +254,7 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
   use: # Valine,Disqus
   text: true # Display the comment name next to the button
   # lazyload: The comment system will be load when comment element enters the browser's viewport.
@@ -466,6 +467,7 @@ site_verification:
 #   toc_color: "#00c4b6"
 #   blockquote_padding_color: "#49b1f5"
 #   blockquote_background_color: "#49b1f5"
+#   scrollbar_color: "#49b1f5"
 
 # The top_img settings of home page
 # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
@@ -836,6 +838,7 @@ CDN:
   # comments
   gitalk:
   gitalk_css:
+  blueimp_md5:
   valine:
   disqusjs:
   disqusjs_css:

layout/includes/page/flink.pug

@@ -40,18 +40,29 @@
 
     else
       if site.data.link
+        - let result = ''
         each i in site.data.link
-          if i.class_name
-            !=markdown(`## ${i.class_name}`)
-          if i.class_desc
-            .flink-desc!=i.class_desc
-          .flink-list
-            each item in i.link_list
-              .flink-list-item
-                a(href=url_for(item.link)  title=item.name target="_blank")
-                  .flink-item-icon
-                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                  .flink-item-name= item.name 
-                  .flink-item-desc(title=item.descr)= item.descr
+          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ''
+          - let classDesc = i.class_desc ? `<div class='flink-desc'>${i.class_desc}</div>` : ''
+
+          - let listResult = ''
+
+          each j in i.link_list
+            - 
+              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="${url_for(theme.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>`
+
+        - page.content = result + page.content
     != page.content
 

layout/includes/third-party/newest-comments/valine.pug

@@ -1,6 +1,6 @@
 - let default_avatar = theme.valine.avatar
 
-script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js")
+script(src=url_for(theme.CDN.blueimp_md5))
 script.
   window.addEventListener('load', () => {
     const changeContent = (content) => {

layout/includes/third-party/pjax.pug

@@ -3,20 +3,18 @@ if theme.pjax.exclude
   each val in theme.pjax.exclude
     - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
 
+- let pjaxSelectors = ['title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+
+- let choose = theme.comments.use
+if choose
+  if theme.Open_Graph_meta && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+    - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
+  if choose.includes('Utterances') || choose.includes('Giscus')
+    - pjaxSelectors.unshift('link[rel="canonical"]')
+
 script(src=url_for(theme.CDN.pjax))
 script.
-  let pjaxSelectors = [
-    'title',
-    '#config-diff',
-    '#body-wrap',
-    '#rightside-config-hide',
-    '#rightside-config-show',
-    '.js-pjax'
-  ]
-
-  if (!{Boolean(theme.Open_Graph_meta && theme.comments.use && theme.comments.use.includes('Livere'))}) {
-    pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
-  }
+  let pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
 
   var pjax = new Pjax({
     elements: '!{pjaxExclude}',

layout/includes/widget/card_newest_comment.pug

@@ -1,4 +1,4 @@
-if theme.newest_comments.enable
+if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
   .card-widget#card-newest-comments
     .item-headline
       i.fas.fa-comment-dots

layout/includes/widget/index.pug

@@ -1,7 +1,7 @@
 #aside-content.aside-content
   //- post
   if is_post()
-    - const tocStyle = page.style_simple
+    - const tocStyle = page.toc_style_simple
     - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
     if showToc && tocStyleVal
       .sticky_layout

package.json

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

scripts/events/config.js

@@ -24,6 +24,7 @@ hexo.extend.filter.register('before_generate', () => {
     // comments
     gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js',
     gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css',
+    blueimp_md5: 'https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js',
     valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
     disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js',
     disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css',

scripts/filters/random_cover.js

@@ -39,7 +39,7 @@ function randomCover () {
       return cover
     }
   } else {
-    cover = theme.default_top_img || 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'
+    cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
     return cover
   }
 }

scripts/tag/timeline.js

@@ -9,9 +9,12 @@ function timeLineFn (args, content) {
   const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g
 
   let result = ''
+  let color = ''
   if (args.length) {
-    args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' })
-    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${args}</div></div></div>`
+    args = args.join(' ').split(',')
+    color = args[1]
+    const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' })
+    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${mdContent}</div></div></div>`
   }
 
   const matches = []
@@ -32,7 +35,7 @@ function timeLineFn (args, content) {
     result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
   }
 
-  return `<div class="timeline">${result}</div>`
+  return `<div class="timeline ${color}">${result}</div>`
 }
 
 hexo.extend.tag.register('timeline', timeLineFn, { ends: true })

source/css/_global/index.styl

@@ -30,8 +30,6 @@
   --toc-link-color: $toc-link-color
   --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
   --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
-  --timeline-bg: $timeline-content-bg
-  --timeline-border-color: $timeline-border-color
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
@@ -49,6 +47,7 @@ body
   if !hexo-config('copy.enable')
     user-select: none
 
+// scrollbar - chrome/safari
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -59,6 +58,11 @@ body
 *::-webkit-scrollbar-track
   background-color: transparent
 
+// scrollbar - firefox
+*
+  scrollbar-width: thin
+  scrollbar-color: var(--scrollbar-color) transparent
+
 input::placeholder
   color: var(--font-color)
 

source/css/_highlight/highlight/diff.styl

@@ -1,5 +1,7 @@
 figure.highlight
   table
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 

source/css/_highlight/prismjs/index.styl

@@ -6,6 +6,8 @@ if $highlight_theme != false
 
 #article-container
   pre[class*='language-']
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 

source/css/_layout/aside.styl

@@ -173,9 +173,9 @@
   .card-archives ul.card-archive-list > .card-archive-list-item,
   .card-categories ul.card-category-list > .card-category-list-item
     a
-      display: inline-block
+      display: flex
+      flex-direction: row
       padding: 3px 10px
-      width: 100%
       color: var(--font-color)
       transition: all .4s
 
@@ -185,15 +185,9 @@
 
       span
         @extend .limit-one-line
-        display: inline-block
-        vertical-align: bottom
 
         &:first-child
-          width: 80%
-
-        &:last-child
-          width: 20%
-          text-align: right
+          flex: 1
 
   .card-categories
     .card-category-list
@@ -269,8 +263,8 @@
       +maxWidth900()
         max-height: calc(100vh - 140px)
 
-      & > .toc
-        margin: 0 20px
+      & > *
+        margin: 0 20px !important
 
         & > .toc-item > .toc-child
           margin-left: 10px

source/css/_layout/pagination.styl

@@ -57,13 +57,15 @@
   & > .recent-posts
     .pagination
       & > *
-        @extend .cardHover
         display: inline-block
         margin: 0 6px
         width: w = 2.5em
         height: w
         line-height: w
 
+      & > *:not(.space)
+        @extend .cardHover
+
         &:hover
           background: var(--btn-hover-color)
           color: var(--btn-color)

source/css/_mode/darkmode.styl

@@ -36,8 +36,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hlnumber-color: alpha(#FFFFFF, .4)
     --hlscrollbar-bg: lighten(#121212, 5)
     --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
-    --timeline-bg: lighten(#121212, 5)
     --scrollbar-color: lighten(#121212, 5)
+    --timeline-bg: lighten(#121212, 5)
 
     #web_bg:before,
     #footer:before,

source/css/_mode/readmode.styl

@@ -11,8 +11,6 @@ if hexo-config('readmode')
     --exit-btn-bg: #C0C0C0
     --exit-btn-color: #fff
     --exit-btn-hover: darken(#C0C0C0, 20)
-    --timeline-bg: none
-    --timeline-border-color: none
     --pseudo-hover: none
 
   [data-theme='dark']

source/css/_tags/button.styl

@@ -7,10 +7,14 @@
     display: inline-block
     margin: 0 4px 6px
     padding: 0 15px
-    background-color: $btn-default-color
+    background-color: var(--btn-beautify-color, $btn-default-color)
     color: $btn-color
     line-height: 2
 
+    for $type in $color-types
+      &.{$type}
+        --btn-beautify-color: lookup('$tagsP-' + $type + '-color')
+
     &:hover
       background-color: var(--btn-hover-color)
 
@@ -38,29 +42,14 @@
     &:hover
       text-decoration: none
 
-    for $type in $tagsP-types
-      &.{$type}
-        background-color: lookup('$tagsP-' + $type + '-color')
-
-        &:hover
-          background-color: var(--btn-hover-color)
-
     &.outline
       border: 1px solid transparent
-      border-color: $btn-default-color
+      border-color: var(--btn-beautify-color, $btn-default-color)
       background-color: transparent
-      color: $btn-default-color
+      color: var(--btn-beautify-color, $btn-default-color)
 
       &:hover
-        background-color: $btn-default-color
+        background-color: var(--btn-beautify-color, $btn-default-color)
 
       &:hover
         color: white !important
-
-      for $type in $tagsP-types
-        &.{$type}
-          border-color: lookup('$tagsP-' + $type + '-color')
-          color: lookup('$tagsP-' + $type + '-color')
-
-          &:hover
-            background-color: lookup('$tagsP-' + $type + '-color')

source/css/_tags/label.styl

@@ -6,6 +6,6 @@
   &.default
     background-color: $btn-default-color
 
-  for $type in $tagsP-types
+  for $type in $color-types
     &.{$type}
       background-color: lookup('$tagsP-' + $type + '-color')

source/css/_tags/note.styl

@@ -16,7 +16,7 @@
     left: .8em
     font-size: larger
 
-  for $type in $tagsP-types
+  for $type in $color-types
     &.{$type}
       &:not(.disabled)
         border-left-color: lookup('$tagsP-' + $type + '-color') !important

source/css/_tags/timeline.styl

@@ -1,8 +1,13 @@
 #article-container
   .timeline
-    margin: 0 0 20px
+    margin: 0 0 20px 10px
     padding: 14px 20px 5px
-    border-left: 2px solid var(--timeline-border-color)
+    border-left: 2px solid var(--timeline-color, $theme-color)
+
+    for $type in $color-types
+      &.{$type}
+        --timeline-color: lookup('$tagsP-' + $type + '-color')
+        --timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))
 
     .timeline-item
       margin: 0 0 15px
@@ -10,7 +15,7 @@
       &:hover
         .item-circle
           &:before
-            border: 3px solid var(--pseudo-hover)
+            border-color: var(--timeline-color, $theme-color)
 
       &.headline
         .timeline-item-title
@@ -21,7 +26,12 @@
 
             &:before
               left: -28px
-              border: 4px solid var(--pseudo-hover)
+              border: 4px solid var(--timeline-color, $theme-color)
+
+        &:hover
+          .item-circle
+            &:before
+              border-color: var(--pseudo-hover)
 
       .timeline-item-title
         position: relative
@@ -33,7 +43,7 @@
           left: -27px
           width: 6px
           height: 6px
-          border: 3px solid var(--timeline-border-color)
+          border: 3px solid var(--pseudo-hover)
           border-radius: 50%
           background: var(--card-bg)
           content: ''
@@ -46,9 +56,9 @@
 
       .timeline-item-content
         position: relative
-        padding: 12px 10px
+        padding: 12px 15px
         border-radius: 8px
-        background: var(--timeline-bg)
+        background: var(--timeline-bg, lighten($theme-color, 85%))
         font-size: .93em
 
         & > :last-child

source/css/var.styl

@@ -162,7 +162,7 @@ $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($l
 $note-modern-danger-text = #a94442
 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
 // Tag Plugins - Button/note
-$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
 $tagsP-blue-color = #428bca
@@ -179,7 +179,5 @@ $tab-button-hover-bg = darken($tab-border-color, 8)
 $tab-active-border-color = $theme-color
 $tab-button-active-bg = $card-bg
 $tab-to-top-color = #99a9bf
-
-// timeline
-$timeline-content-bg = #f6f6f6
-$timeline-border-color = $theme-color
+// Tag Plugins - timeline
+$timeline-default-color = $theme-color