feat: twikoo 最新評論更新，增加QQ頭像顯示

fix: 修復關閉圖片嬾加載，最新評論圖片無法加載的bugs
fix: 修復某些情況下toc無法滾動的bugs close #442
fix: 修復pjax下，開啟anchor後，文章頁跳轉到其他頁面會出現網址加上toc最後一節錨點ID的bugs #442

_config.yml

@@ -669,9 +669,7 @@ newest_comments:
     enable: false
     forum:
     api_key:
-  twikoo:
+  twikoo: false
-    enable: false
-    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank/404
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------

layout/includes/third-party/newest-comments/disqus-comment.pug

@@ -43,7 +43,11 @@ script.
           result += '<div class=\'aside-list-item\'>'
 
           if (!{theme.newest_comments.avatar}) {
-            result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+            let name = 'src'
+            if(!{theme.lazyload.enable}) {
+              name = 'data-lazy-src'
+            }
+            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
           }
           
           result += `<div class='content'>

layout/includes/third-party/newest-comments/github-issues.pug

@@ -42,7 +42,11 @@ script.
           result += '<div class=\'aside-list-item\'>'
 
           if (!{theme.newest_comments.avatar}) {
-            result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+            let name = 'src'
+            if(!{theme.lazyload.enable}) {
+              name = 'data-lazy-src'
+            }
+            result += `<a href='${array[i].url}' class="thumbnail"><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
           }
 
           result += `<div class='content'>

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

@@ -4,5 +4,5 @@ else if theme.newest_comments.github_issues.enable
   include ./github-issues.pug
 else if theme.newest_comments.disqus.enable
   include ./disqus-comment.pug
-else if theme.newest_comments.twikoo.enable
+else if theme.newest_comments.twikoo
   include ./twikoo-comment.pug

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

@@ -15,7 +15,8 @@ script.
     }
 
     const getIcon = (icon, mail) => {
-      if (icon) return icon 
+      if (icon) return icon
+      
       let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}'
       let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
       return iconUrl
@@ -29,7 +30,11 @@ script.
           result += '<div class=\'aside-list-item\'>'
 
           if (!{theme.newest_comments.avatar}) {
-            result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
+            let name = 'src'
+            if(!{theme.lazyload.enable}) {
+              name = 'data-lazy-src'
+            }
+            result += `<a href='${array[i].url}' class="thumbnail"><img ${name}='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
           }
 
           result += `<div class='content'>

layout/includes/third-party/newest-comments/twikoo-comment.pug

@@ -35,13 +35,6 @@ script.
       }
     }
 
-    const getIcon = (md5) => {
-      let defaultIcon = '!{ theme.newest_comments.twikoo.default_avatar ? `?d=${theme.newest_comments.twikoo.default_avatar}` : ''}'
-      let iconUrl = `https://gravatar.loli.net/avatar/${md5 + defaultIcon}`
-      return iconUrl
-    }
-
-
     const generateHtml = array => {
       let result = ''
 
@@ -50,11 +43,15 @@ script.
           result += '<div class=\'aside-list-item\'>'
 
           if (!{theme.newest_comments.avatar}) {
-            result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${getIcon(array[i].mailMd5)}' alt='${array[i].nick}'></a>`
+            let name = 'src'
+            if(!{theme.lazyload.enable}) {
+              name = 'data-lazy-src'
+            }
+            result += `<a href='${array[i].url + '#' + array[i].id}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
           }
           
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${changeContent(array[i].commentText)}</a>
+          <a class='comment' href='${array[i].url + '#' + array[i].id}'>${changeContent(array[i].commentText)}</a>
           <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].created, true)}</time></div>
           </div></div>`
         }

package.json

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

source/js/main.js

@@ -222,75 +222,81 @@ document.addEventListener('DOMContentLoaded', function () {
  */
 
   let detectJgJsLoad = false
-  const runJustifiedGallery = function () {
+  const runJustifiedGallery = function (ele) {
-    let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery')
+    const $justifiedGallery = $(ele)
-    if ($justifiedGallery.length) {
+    const $imgList = $justifiedGallery.find('img')
-      btf.isJqueryLoad(() => {
+    $imgList.unwrap()
-        $justifiedGallery = $($justifiedGallery)
+    if ($imgList.length) {
-        const $imgList = $justifiedGallery.find('img')
+      $imgList.each(function (i, o) {
-        $imgList.unwrap()
+        if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
-        if ($imgList.length) {
+        $(o).wrap('<div></div>')
-          $imgList.each(function (i, o) {
-            if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
-            $(o).wrap('<div></div>')
-          })
-        }
-
-        if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
-        else {
-          $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-          $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
-            btf.initJustifiedGallery($justifiedGallery)
-          })
-          detectJgJsLoad = true
-        }
       })
     }
+
+    if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
+    else {
+      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
+      $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
+        btf.initJustifiedGallery($justifiedGallery)
+      })
+      detectJgJsLoad = true
+    }
   }
 
   /**
  * fancybox和 mediumZoom
  */
-  const addLightBox = function () {
+  const addFancybox = function (ele) {
-    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
+    if (ele.length) {
-      const images = document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img')
+      const runFancybox = (ele) => {
-      if (images.length) {
+        ele.each(function (i, o) {
-        btf.isJqueryLoad(() => {
+          const $this = $(o)
-          const runFancybox = (ele) => {
+          const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
-            ele.each(function (i, o) {
+          const dataCaption = $this.attr('alt') || ''
-              const $this = $(o)
+          $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`)
-              const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
+        })
-              const dataCaption = $this.attr('alt') || ''
-              $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`)
-            })
 
-            $().fancybox({
+        $().fancybox({
-              selector: '[data-fancybox]',
+          selector: '[data-fancybox]',
-              loop: true,
+          loop: true,
-              transitionEffect: 'slide',
+          transitionEffect: 'slide',
-              protect: true,
+          protect: true,
-              buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
+          buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
-              hash: false
+          hash: false
-            })
-          }
-
-          if (typeof $.fancybox === 'undefined') {
-            $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
-            $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
-              runFancybox($(images))
-            })
-          } else {
-            runFancybox($(images))
-          }
         })
       }
-    } else {
+
-      const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
+      if (typeof $.fancybox === 'undefined') {
-      zoom.on('open', function (event) {
+        $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
-        const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+        $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
-        zoom.update({
+          runFancybox($(ele))
-          background: photoBg
         })
+      } else {
+        runFancybox($(ele))
+      }
+    }
+  }
+
+  const addMediumZoom = () => {
+    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
+    zoom.on('open', e => {
+      const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+      zoom.update({
+        background: photoBg
+      })
+    })
+  }
+
+  const jqLoadAndRun = () => {
+    const isFancybox = GLOBAL_CONFIG.lightbox === 'fancybox'
+    const $fancyboxEle = isFancybox ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') : null
+    const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
+    const jgEleLength = $jgEle.length
+
+    if (jgEleLength || $fancyboxEle !== null) {
+      btf.isJqueryLoad(() => {
+        jgEleLength && runJustifiedGallery($jgEle)
+        isFancybox && addFancybox($fancyboxEle)
       })
     }
   }
@@ -387,7 +393,8 @@ document.addEventListener('DOMContentLoaded', function () {
     const isAnchor = GLOBAL_CONFIG.isanchor
     const updateAnchor = function (anchor) {
       if (window.history.replaceState && anchor !== window.location.hash) {
-        window.history.replaceState(undefined, undefined, anchor)
+        if (!anchor) anchor = location.pathname
+        window.history.replaceState({}, '', anchor)
       }
     }
 
@@ -415,7 +422,7 @@ document.addEventListener('DOMContentLoaded', function () {
       const $target = e.target.classList.contains('toc-link')
         ? e.target
         : e.target.parentElement
-      btf.scrollToDest(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', '')).offsetTop, 300)
+      btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
       if (window.innerWidth < 900) {
         mobileToc.close()
       }
@@ -436,7 +443,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
     let detectItem = ''
     const findHeadPosition = function (top) {
-      if ($tocLink.length === 0) {
+      if ($tocLink.length === 0 || top === 0) {
         return false
       }
 
@@ -444,7 +451,7 @@ document.addEventListener('DOMContentLoaded', function () {
       let currentIndex = ''
 
       list.forEach(function (ele, index) {
-        if (top > ele.offsetTop - 70) {
+        if (top > btf.getEleTop(ele) - 70) {
           currentId = '#' + encodeURI(ele.getAttribute('id'))
           currentIndex = index
         }
@@ -452,6 +459,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
       if (detectItem === currentIndex) return
 
+      if (isAnchor) updateAnchor(currentId)
+
       if (currentId === '') {
         $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') })
         detectItem = currentIndex
@@ -463,7 +472,6 @@ document.addEventListener('DOMContentLoaded', function () {
       $cardToc.querySelectorAll('.active').forEach(item => { item.classList.remove('active') })
       const currentActive = $tocLink[currentIndex]
       currentActive.classList.add('active')
-      if (isAnchor) updateAnchor(currentId)
 
       setTimeout(function () {
         autoScrollToc(currentActive)
@@ -698,7 +706,7 @@ document.addEventListener('DOMContentLoaded', function () {
     backToTop: () => {
       document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
         item.addEventListener('click', function () {
-          btf.scrollToDest(btf.getParents(this, '.tabs').offsetTop, 300)
+          btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300)
         })
       })
     }
@@ -802,8 +810,8 @@ document.addEventListener('DOMContentLoaded', function () {
     GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
     GLOBAL_CONFIG.highlight && addHighlightTool()
     GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
-    runJustifiedGallery()
+    jqLoadAndRun()
-    GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
+    GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
     scrollFn()
     addTableWrap()
     clickFnOfTagHide()

source/js/utils.js

@@ -254,6 +254,18 @@ var btf = {
     }
   },
 
-  isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0
+  isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0,
+
+  getEleTop: (ele) => {
+    let actualTop = ele.offsetTop
+    let current = ele.offsetParent
+
+    while (current !== null) {
+      actualTop += current.offsetTop
+      current = current.offsetParent
+    }
+
+    return actualTop
+  }
 
 }