diff --git a/_config.yml b/_config.yml index 275b3f9..8515a5f 100644 --- 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 (右下角按鈕) # -------------------------------------- diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug index 9b857d2..5d900d9 100644 --- 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 += '
' if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` } result += `
diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug index 9807cdb..03bb331 100644 --- 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 += '
' if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` } result += `
diff --git a/layout/includes/third-party/newest-comments/index.pug b/layout/includes/third-party/newest-comments/index.pug index 14b1d27..bf422c4 100644 --- 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 \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/leancloud.pug b/layout/includes/third-party/newest-comments/leancloud.pug index 0a4c7d4..2e53917 100644 --- 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 += '
' if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` } result += `
diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug index 0a55eb7..f012760 100644 --- 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 += '
' if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` } result += `
- ${changeContent(array[i].commentText)} + ${changeContent(array[i].commentText)}
${array[i].nick}
` } diff --git a/package.json b/package.json index c098097..1a8bda0 100644 --- 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": { diff --git a/source/js/main.js b/source/js/main.js index 6f08db4..ccac18a 100644 --- 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('
') - }) - } - - if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) - else { - $('head').append(``) - $.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('
') }) } + + if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) + else { + $('head').append(``) + $.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(``) - }) + 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(``) + }) - $().fancybox({ - selector: '[data-fancybox]', - loop: true, - transitionEffect: 'slide', - protect: true, - buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], - hash: false - }) - } - - if (typeof $.fancybox === 'undefined') { - $('head').append(``) - $.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(``) + $.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() diff --git a/source/js/utils.js b/source/js/utils.js index 932a156..a1cdf4c 100644 --- 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 + } }