breaking changes: Open_Graph_meta 設置更改，可配置其它參數

feature: 更新 Facebook sdk 到 v15
improvement: 更新 plugins.yml
Remove: 移除 meta keywords

README.md

@@ -89,7 +89,7 @@ npm i hexo-theme-butterfly
 - [x] Typewriter Effect: activate_power_mode
 - [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest)
 - [x] Mouse click effects (Fireworks/Heart/Text)
-- [x] Preloader/Loading Animation
+- [x] Preloader/Loading Animation/pace.js
 - [x] Busuanzi visitor counter
 - [x] Medium Zoom/Fancybox
 - [x] Mermaid

README_CN.md

@@ -89,7 +89,7 @@ theme: butterfly
 - [x] 打字特效 activate_power_mode
 - [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
 - [x] 多種鼠標點擊特效（煙花/文字/愛心）
-- [x] 內置一種 Preloader 加載動畫
+- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
 - [x] 不蒜子訪問統計
 - [x] 兩種大圖模式（Medium Zoom/Fancybox）
 - [x] Mermaid 圖表顯示
@@ -97,7 +97,7 @@ theme: butterfly
 - [x] 圖片懶加載
 - [x] Instantpage/Pangu/Snackbar彈窗/PWA......
 
-## ✨ 贡献者
+## ✨ 貢獻者
 
 <a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />

_config.yml

@@ -168,8 +168,12 @@ index_post_content:
   length: 500 # if you set method to 2 or 3, the length need to config
 
 # anchor
-# when you scroll in post, the URL will update according to header id.
-anchor: false
+anchor:
+  button:
+    enable: false
+    always_show: false
+    icon: # the unicode value of Font Awesome icon, such as '\3423'
+  auto_update: false # when you scroll in post, the URL will update according to header id.
 
 # Post
 # --------------------------------------
@@ -636,7 +640,14 @@ subtitle:
   sub:
 
 # Loading Animation (加載動畫)
-preloader: false
+preloader:
+  enable: false
+  # source
+  # 1. fullpage-loading
+  # 2. pace (progress bar)
+  source: 1
+  # pace theme (see https://codebyzach.github.io/pace/)
+  pace_css_url:
 
 # aside (側邊欄)
 # --------------------------------------
@@ -846,7 +857,16 @@ lazyload:
 
 # Open graph meta tags
 # https://developers.facebook.com/docs/sharing/webmasters/
-Open_Graph_meta: true
+Open_Graph_meta:
+  enable: true
+  option:
+    # twitter_card:
+    # twitter_image:
+    # twitter_id:
+    # twitter_site:
+    # google_plus:
+    # fb_admins:
+    # fb_app_id:
 
 # Add the vendor prefixes to ensure compatibility
 css_prefix: true

layout/includes/additional-js.pug

@@ -30,9 +30,6 @@ div
   else if theme.local_search.enable
     script(src=url_for(theme.asset.local_search))
 
-  if theme.preloader
-    != partial("includes/loading/loading-js", {}, { cache: true })
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })

layout/includes/head.pug

@@ -7,11 +7,6 @@
 
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
-
-- var pageKeywords
-- if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
-- else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
-- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
 - var themeColorLight = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_light || '#ffffff'
@@ -22,8 +17,6 @@ meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
 title= tabTitle
-if pageKeywords
-  meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)
 meta(name ="format-detection" content="telephone=no")

layout/includes/head/Open_Graph.pug

@@ -1,11 +1,13 @@
-if theme.Open_Graph_meta
-  - let contentType = is_post() ? 'article' : 'website'
-  - let metaImage = (page.cover || theme.avatar.img) ? full_url_for(page.cover || theme.avatar.img) : ''
-  - let fb_appId = theme.facebook_comments.app_id || ''
-  - let fb_admins = theme.facebook_comments.user_id || ''
-
-  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
-
+if theme.Open_Graph_meta.enable
+  -
+    let ogOption = Object.assign({
+      type: is_post() ? 'article' : 'website',
+      image: (page.cover || theme.avatar.img) ? full_url_for(page.cover || theme.avatar.img) : '',
+      fb_admins: theme.facebook_comments.user_id || '',
+      fb_app_id: theme.facebook_comments.app_id || '',
+    }, theme.Open_Graph_meta.option)
+  -
+  != open_graph(ogOption)
 else
   meta(name="description" content=page_description())
 

layout/includes/head/config.pug

@@ -120,5 +120,5 @@ script.
     },
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
-    isAnchor: !{theme.anchor}
+    isAnchor: !{theme.anchor.auto_update}
   }

layout/includes/layout.pug

@@ -8,8 +8,8 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
   head
     include ./head.pug
   body
-    if theme.preloader
-      !=partial('includes/loading/loading', {}, {cache: true})
+    if theme.preloader.enable
+      !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
       #web_bg

layout/includes/loading/fullpage-loading.pug

@@ -0,0 +1,28 @@
+#loading-box
+  .loading-left-bg
+  .loading-right-bg
+  .spinner-box
+    .configure-border-1
+      .configure-core
+    .configure-border-2
+      .configure-core
+    .loading-word= _p('loading')
+
+script.
+  const preloader = {
+    endLoading: () => {
+      document.body.style.overflow = 'auto';
+      document.getElementById('loading-box').classList.add("loaded")
+    },
+    initLoading: () => {
+      document.body.style.overflow = '';
+      document.getElementById('loading-box').classList.remove("loaded")
+
+    }
+  }
+  window.addEventListener('load',()=> { preloader.endLoading() })
+
+  if (!{theme.pjax && theme.pjax.enable}) {
+    document.addEventListener('pjax:send', () => { preloader.initLoading() })
+    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
+  }

layout/includes/loading/index.pug

@@ -0,0 +1,4 @@
+if theme.preloader.source === 1
+  include ./fullpage-loading.pug
+else
+  include ./pace.pug

layout/includes/loading/loading-js.pug

@@ -1,13 +0,0 @@
-script.
-  var preloader = {
-    endLoading: () => {
-      document.body.style.overflow = 'auto';
-      document.getElementById('loading-box').classList.add("loaded")
-    },
-    initLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.remove("loaded")
-
-    }
-  }
-  window.addEventListener('load',preloader.endLoading())

layout/includes/loading/loading.pug

@@ -1,9 +0,0 @@
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')

layout/includes/loading/pace.pug

@@ -0,0 +1,2 @@
+link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
+script(src=url_for(theme.asset.pace_js))

layout/includes/page/flink.pug

@@ -1,5 +1,6 @@
 #article-container
   .flink
+    - let pageContent = page.content
     if page.flink_url
       script.
         (()=>{
@@ -63,6 +64,6 @@
 
           - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
 
-        - page.content = result + page.content
-    != page.content
+        - pageContent = result + pageContent
+    != pageContent
 

layout/includes/third-party/card-post-count/fb.pug

@@ -1,4 +1,4 @@
-- const fbSDKVer = 'v14.0'
+- const fbSDKVer = 'v15.0'
 - const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
 
 script.

layout/includes/third-party/chat/messenger.pug

@@ -9,7 +9,7 @@ script.
   window.fbAsyncInit = function() {
     FB.init({
       xfbml: true,
-      version: 'v14.0'
+      version: 'v15.0'
     });
   };
 

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

@@ -1,4 +1,4 @@
-- const fbSDKVer = 'v14.0'
+- const fbSDKVer = 'v15.0'
 - const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
 
 script.

layout/includes/third-party/pjax.pug

@@ -7,7 +7,7 @@ if theme.pjax.exclude
 
 - let choose = theme.comments.use
 if choose
-  if theme.Open_Graph_meta && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+  if theme.Open_Graph_meta.enable && (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"]')
@@ -30,7 +30,6 @@ script.
     window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
     window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
 
-    typeof preloader === 'object' && preloader.initLoading()
     document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
     
     if (window.aplayers) {
@@ -76,8 +75,6 @@ script.
 
     // prismjs
     typeof Prism === 'object' && Prism.highlightAll()
-
-    typeof preloader === 'object' && preloader.endLoading()
   })
 
   document.addEventListener('pjax:error', (e) => {

package.json

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

plugins.yml

@@ -5,7 +5,7 @@ algolia_search_v4:
 instantsearch_v4:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.44.0
+  version: 4.48.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -13,11 +13,11 @@ pjax:
 gitalk:
   name: gitalk
   file: dist/gitalk.min.js
-  version: 1.7.2
+  version: 1.8.0
 gitalk_css:
   name: gitalk
   file: dist/gitalk.css
-  version: 1.7.2
+  version: 1.8.0
 blueimp_md5:
   name: blueimp-md5
   file: js/md5.min.js
@@ -29,25 +29,25 @@ valine:
 disqusjs:
   name: disqusjs
   file: dist/browser/disqusjs.es2015.umd.min.js
-  version: 3.0.1
+  version: 3.0.2
 disqusjs_css:
   name: disqusjs
   file: dist/browser/styles/disqusjs.css
-  version: 3.0.1
+  version: 3.0.2
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.5
+  version: 1.6.7
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.6.3
+  version: 2.13.0
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.6.3
+  version: 2.13.0
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -64,16 +64,16 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.0
+  version: 0.16.2
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.0
+  version: 0.16.2
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.1.5
+  version: 9.1.7
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -105,7 +105,7 @@ ClickShowText:
 lazyload:
   name: vanilla-lazyload
   file: dist/lazyload.iife.min.js
-  version: 17.3.1
+  version: 17.8.3
 instantpage:
   name: instant.page
   file: instantpage.js
@@ -144,7 +144,7 @@ fontawesomeV6:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 6.1.2
+  version: 6.2.0
 flickr_justified_gallery_js:
   name: flickr-justified-gallery
   file: dist/fjGallery.min.js
@@ -169,22 +169,32 @@ prismjs_js:
   name: prismjs
   file: prism.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
 prismjs_lineNumber_js:
   name: prismjs
   file: plugins/line-numbers/prism-line-numbers.min.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
 prismjs_autoloader:
   name: prismjs
   file: plugins/autoloader/prism-autoloader.min.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
 artalk_js:
   name: artalk
   file: dist/Artalk.js
-  version: 2.3.4
+  version: 2.4.2
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.3.4
+  version: 2.4.2
+pace_js:
+  name: pace-js
+  other_name: pace
+  file: pace.min.js
+  version: 1.2.4
+pace_default_css:
+  name: pace-js
+  other_name: pace
+  file: themes/blue/pace-theme-minimal.css
+  version: 1.2.4

source/css/_layout/loading.styl

@@ -1,4 +1,4 @@
-if hexo-config('preloader')
+if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
   .loading-bg
     position: fixed
     z-index: 1000

source/css/_layout/post.styl

@@ -102,31 +102,35 @@ beautify()
     font-family: Monaco, 'Ubuntu Mono', monospace
     line-height: 1em
 
-  if hexo-config('anchor')
+  if hexo-config('anchor.button.enable')
     a.headerlink
       &:after
         @extend .fontawesomeIcon
         float: right
         color: var(--headline-presudo)
-        content: '\f0c1'
+        content: $archor-button-icon
         font-size: .95em
-        opacity: 0
         transition: all .3s
 
       &:hover
         &:after
           color: var(--pseudo-hover)
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6
-      &:hover
-        a.headerlink
-          &:after
-            opacity: 1
+    if !hexo-config('anchor.button.always_show')
+      a.headerlink
+        &:after
+          opacity: 0
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
+        &:hover
+          a.headerlink
+            &:after
+              opacity: 1
 
   ol,
   ul

source/css/_layout/third-party.styl

@@ -25,11 +25,8 @@
   --waline-theme-color: $button-bg
   --waline-active-color: $button-hover-color
 
-  .vuser
-    transition: all .5s
-
-    &:hover
-      transform: rotate(360deg)
+  .wl-comment-actions > button:not(last-child)
+    padding-right: 4px
 
 if hexo-config('valine.bg')
   #vcomment

source/css/var.styl

@@ -71,7 +71,7 @@ $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover
 $button-bg = $theme-color
 $pseudo-hover = $button-hover-color
 // scrollbar
-$scrollbar-color= $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
+$scrollbar-color = $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
 // table
 $table-thead-bg = #99a9bf
 // reward
@@ -180,4 +180,6 @@ $tab-active-border-color = $theme-color
 $tab-button-active-bg = $card-bg
 $tab-to-top-color = #99a9bf
 // Tag Plugins - timeline
-$timeline-default-color = $theme-color
+$timeline-default-color = $theme-color
+// archor
+$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'

source/js/main.js

@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     let hideMenuIndex = ''
-    if (window.innerWidth < 768) hideMenuIndex = true
+    if (window.innerWidth <= 768) hideMenuIndex = true
     else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
 
     if (hideMenuIndex) {
@@ -277,8 +277,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const isChatBtnHide = typeof chatBtnHide === 'function'
     const isChatBtnShow = typeof chatBtnShow === 'function'
 
-    window.scrollCollect = () => {
-      return btf.throttle(function (e) {
+    const scrollTask = btf.throttle(() => {
         const currentTop = window.scrollY || document.documentElement.scrollTop
         const isDown = scrollDirection(currentTop)
         if (currentTop > 56) {
@@ -309,8 +308,9 @@ document.addEventListener('DOMContentLoaded', function () {
         if (document.body.scrollHeight <= innerHeight) {
           $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
         }
-      }, 200)()
-    }
+      }, 200)
+    
+    window.scrollCollect = scrollTask
 
     window.addEventListener('scroll', scrollCollect)
   }
@@ -477,7 +477,7 @@ document.addEventListener('DOMContentLoaded', function () {
       // handle some cases
       typeof utterancesTheme === 'function' && utterancesTheme()
       typeof changeGiscusTheme === 'function' && changeGiscusTheme()
-      typeof FB === 'object' && window.loadFBComment()
+      typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
       typeof runMermaid === 'function' && window.runMermaid()
     },
     showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開