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

fix: 修復關閉圖片嬾加載，最新評論圖片無法加載的bugs fix: 修復某些情況下toc無法滾動的bugs close #442 fix: 修復pjax下，開啟anchor後，文章頁跳轉到其他頁面會出現網址加上toc最後一節錨點ID的bugs #442
2026-04-12 22:17:06 +08:00 · 2020-12-10 21:47:47 +08:00
parent 9536df735c
commit ecca2621c2
9 changed files with 113 additions and 85 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -669,9 +669,7 @@ newest_comments:
    enable: false
    forum:
    api_key:
-  twikoo:
-    enable: false
-    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank/404
+  twikoo: false

 # Bottom right button (右下角按鈕)
 # --------------------------------------
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/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'>
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/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'>
--- a/layout/includes/third-party/newest-comments/index.pug
+++ b/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
--- a/layout/includes/third-party/newest-comments/leancloud.pug
+++ b/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'>
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/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>`
        }
--- a/package.json
+++ b/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": {
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -222,75 +222,81 @@ document.addEventListener('DOMContentLoaded', function () {
 */

  let detectJgJsLoad = false
-  const runJustifiedGallery = function () {
-    let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery')
-    if ($justifiedGallery.length) {
-      btf.isJqueryLoad(() => {
-        $justifiedGallery = $($justifiedGallery)
-        const $imgList = $justifiedGallery.find('img')
-        $imgList.unwrap()
-        if ($imgList.length) {
-          $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
-        }
+  const runJustifiedGallery = function (ele) {
+    const $justifiedGallery = $(ele)
+    const $imgList = $justifiedGallery.find('img')
+    $imgList.unwrap()
+    if ($imgList.length) {
+      $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
+    }
  }

  /**
 * fancybox和 mediumZoom
 */
-  const addLightBox = function () {
-    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
-      const images = document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img')
-      if (images.length) {
-        btf.isJqueryLoad(() => {
-          const runFancybox = (ele) => {
-            ele.each(function (i, o) {
-              const $this = $(o)
-              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>`)
-            })
+  const addFancybox = function (ele) {
+    if (ele.length) {
+      const runFancybox = (ele) => {
+        ele.each(function (i, o) {
+          const $this = $(o)
+          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({
-              selector: '[data-fancybox]',
-              loop: true,
-              transitionEffect: 'slide',
-              protect: true,
-              buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
-              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))
-          }
+        $().fancybox({
+          selector: '[data-fancybox]',
+          loop: true,
+          transitionEffect: 'slide',
+          protect: true,
+          buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
+          hash: false
        })
      }
-    } else {
-      const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
-      zoom.on('open', function (event) {
-        const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
-        zoom.update({
-          background: photoBg
+
+      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($(ele))
        })
+      } 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()
-    GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
+    jqLoadAndRun()
+    GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
    scrollFn()
    addTableWrap()
    clickFnOfTagHide()
--- a/source/js/utils.js
+++ b/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
+  }

 }