From 484f036adb2e84f9dcb8fbe15df6218e1712910b Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 1 Sep 2021 16:10:39 +0800 Subject: [PATCH] =?UTF-8?q?breaking=20changes:=20=E5=88=AA=E9=99=A4=20hide?= =?UTF-8?q?=5Fsidebar=5Fmenu=5Fchild=20=E9=85=8D=E7=BD=AE=EF=BC=8C?= =?UTF-8?q?=E6=94=B9=E7=82=BA=E7=9B=B4=E6=8E=A5=E5=9C=A8=20menu=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20close=20#640=20feat:=20sidebar=20menu=20?= =?UTF-8?q?=E9=BB=9E=E6=93=8A=E5=B1=95=E9=96=8B=E4=B8=8D=E5=86=8D=E9=99=90?= =?UTF-8?q?=E5=88=B6=E5=8F=AA=E8=83=BD=E9=BB=9E=E6=93=8A=E6=8C=89=E9=88=95?= =?UTF-8?q?=20#640=20feat:=20TWIKOO=20=E8=A9=95=E8=AB=96=E5=9C=96=E7=89=87?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20lightbox=20feat:=20=E5=8D=87=E7=B4=9A=20fa?= =?UTF-8?q?cebook=20comment=20js=20=E5=88=B0=20v11=20fix:=20=E4=BF=AE?= =?UTF-8?q?=E5=BE=A9=E5=8F=AF=E8=83=BD=E5=B0=8E=E8=87=B4=E7=9B=B8=E9=97=9C?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=8F=88=E6=8E=A5=E5=87=BA=E9=8C=AF=E7=9A=84?= =?UTF-8?q?bug=20#549=20improvement:=20=E8=AA=BF=E6=95=B4=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E6=A1=86=20ocean=20theme=20=E4=B8=8B=E6=BB=BE?= =?UTF-8?q?=E5=8B=95=E6=A2=9D=E9=A1=8F=E8=89=B2=20close=20#651=20improveme?= =?UTF-8?q?nt:=20=E7=95=B6=E5=9C=96=E7=89=87=E6=B2=92=E6=9C=89=20figcaptio?= =?UTF-8?q?n=20=E6=99=82=EF=BC=8C=E4=B8=8D=E6=9C=83=E6=B7=BB=E5=8A=A0=20fi?= =?UTF-8?q?gcaption=20=E4=BB=A3=E7=A2=BC=20improvement:=20=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E5=84=AA=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 9 +- layout/includes/additional-js.pug | 31 ++-- layout/includes/head.pug | 4 +- layout/includes/head/config.pug | 4 - layout/includes/header/menu_item.pug | 29 ++-- .../comments/facebook_comments.pug | 2 +- .../includes/third-party/comments/twikoo.pug | 5 +- .../third-party/comments/utterances.pug | 4 +- package.json | 2 +- scripts/helpers/related_post.js | 34 +---- source/css/_highlight/highlight.styl | 3 +- source/css/_highlight/theme.styl | 2 +- source/css/_layout/head.styl | 6 +- source/css/_layout/sidebar.styl | 24 +-- source/js/main.js | 142 ++++++------------ source/js/utils.js | 29 +++- 16 files changed, 141 insertions(+), 189 deletions(-) diff --git a/_config.yml b/_config.yml index ae2a6f2..f8ae95f 100644 --- a/_config.yml +++ b/_config.yml @@ -1,11 +1,7 @@ # Main menu navigation (導航目錄) +# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單 # -------------------------------------- -# format: name: link || icon -# sub-menu -# name || icon: -# name: link || icon - menu: # Home: / || fas fa-home # Archives: /archives/ || fas fa-archive @@ -17,9 +13,6 @@ menu: # Link: /link/ || fas fa-link # About: /about/ || fas fa-heart -# Hide the child menu items in mobile sidebar -hide_sidebar_menu_child: false - # Code Blocks (代碼相關) # -------------------------------------- diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index d125cd7..56d0f29 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -7,9 +7,11 @@ div if theme.medium_zoom script(src=url_for(theme.CDN.medium_zoom)) + else if theme.fancybox + script(src=url_for(theme.CDN.fancybox)) if theme.instantpage - script(src=url_for(theme.CDN.instantpage) type="module") + script(src=url_for(theme.CDN.instantpage), type='module') if theme.lazyload.enable script(src=url_for(theme.CDN.lazyload)) @@ -18,21 +20,22 @@ div script(src=url_for(theme.CDN.snackbar)) if theme.pangu.enable - !=partial('includes/third-party/pangu.pug', {}, {cache: true}) + != partial("includes/third-party/pangu.pug", {}, { cache: true }) //- search if theme.algolia_search.enable + script(src=url_for(theme.CDN.algolia_search)) script(src=url_for(theme.CDN.algolia_js)) else if theme.local_search.enable script(src=url_for(theme.CDN.local_search)) if theme.preloader - !=partial('includes/loading/loading-js', {}, {cache: true}) + != partial("includes/loading/loading-js", {}, { cache: true }) .js-pjax if needLoadCountJs - !=partial('includes/third-party/card-post-count/index', {}, {cache: true}) - + != partial("includes/third-party/card-post-count/index", {}, { cache: true }) + if loadSubJs include ./third-party/subtitle.pug @@ -41,20 +44,20 @@ div if commentsJsLoad include ./third-party/comments/js.pug - !=partial('includes/third-party/prismjs', {}, {cache: true}) + != partial("includes/third-party/prismjs", {}, { cache: true }) if theme.aside.enable && theme.newest_comments.enable if theme.pjax.enable - !=partial('includes/third-party/newest-comments/index', {}, {cache: true}) + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) else if (!is_post() && page.aside !== false) - !=partial('includes/third-party/newest-comments/index', {}, {cache: true}) + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) - !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) - !=partial('includes/third-party/effect', {}, {cache: true}) + != partial("includes/third-party/effect", {}, { cache: true }) + + != partial("includes/third-party/chat/index", {}, { cache: true }) - !=partial('includes/third-party/chat/index', {}, {cache: true}) - if theme.aplayerInject && theme.aplayerInject.enable if theme.pjax.enable || theme.aplayerInject.per_page include ./third-party/aplayer.pug @@ -62,7 +65,7 @@ div include ./third-party/aplayer.pug if theme.pjax.enable - !=partial('includes/third-party/pjax', {}, {cache: true}) - + != partial("includes/third-party/pjax", {}, { cache: true }) + if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv script(async data-pjax src=url_for(theme.CDN.busuanzi)) diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 3c1c96d..cefb644 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -54,7 +54,9 @@ if (theme.snackbar && theme.snackbar.enable) if theme.algolia_search.enable link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'") - script(src=url_for(theme.CDN.algolia_search) defer) + +if theme.fancybox + link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'") //- google_adsense !=partial('includes/head/google_adsense', {}, {cache: true}) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 9dd4f3b..f669dbe 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -116,10 +116,6 @@ script. justifiedGallery: { js: '!{url_for(theme.CDN.justifiedGallery_js)}', css: '!{url_for(theme.CDN.justifiedGallery_css)}' - }, - fancybox: { - js: '!{url_for(theme.CDN.fancybox)}', - css: '!{url_for(theme.CDN.fancybox_css)}' } }, isPhotoFigcaption: !{theme.photofigcaption}, diff --git a/layout/includes/header/menu_item.pug b/layout/includes/header/menu_item.pug index 5a63994..d172db7 100644 --- a/layout/includes/header/menu_item.pug +++ b/layout/includes/header/menu_item.pug @@ -1,26 +1,27 @@ if theme.menu - //- for mobile sidebar - - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : '' - .menus_items each value, label in theme.menu if typeof value !== 'object' .menus_item - a.site-page(href=url_for(trim(value.split('||')[0]))) - if value.split('||')[1] - i.fa-fw(class=trim(value.split('||')[1])) + - const valueArray = value.split('||') + a.site-page(href=url_for(trim(valueArray[0]))) + if valueArray[1] + i.fa-fw(class=trim(valueArray[1])) span=' '+label else .menus_item - a.site-page(href='javascript:void(0);') - if label.split('||')[1] - i.fa-fw(class=trim(label.split('||')[1])) - span=' '+ trim(label.split('||')[0]) - i.fas.fa-chevron-down.expand(class=sidebarChildHide) + - const labelArray = label.split('||') + - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : '' + a.site-page.group(class=`${hideClass}` href='javascript:void(0);') + if labelArray[1] + i.fa-fw(class=trim(labelArray[1])) + span=' '+ trim(labelArray[0]) + i.fas.fa-chevron-down ul.menus_item_child each val,lab in value + - const valArray = val.split('||') li - a.site-page.child(href=url_for(trim(val.split('||')[0]))) - if val.split('||')[1] - i.fa-fw(class=trim(val.split('||')[1])) + a.site-page.child(href=url_for(trim(valArray[0]))) + if valArray[1] + i.fa-fw(class=trim(valArray[1])) span=' '+ lab \ No newline at end of file diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug index 03cf3cd..54807cc 100644 --- a/layout/includes/third-party/comments/facebook_comments.pug +++ b/layout/includes/third-party/comments/facebook_comments.pug @@ -7,7 +7,7 @@ script. if (typeof FB === 'object') FB.XFBML.parse() else { let ele = document.createElement('script') - ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0') + ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v11.0') ele.setAttribute('async', 'true') ele.setAttribute('defer', 'true') ele.setAttribute('crossorigin', 'anonymous') diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 8fcf32f..c191cec 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -5,7 +5,10 @@ script. twikoo.init(Object.assign({ el: '#twikoo-wrap', envId: '!{theme.twikoo.envId}', - region: '!{theme.twikoo.region}' + region: '!{theme.twikoo.region}', + onCommentLoaded: function () { + btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)')) + } }, !{JSON.stringify(theme.twikoo.option)})) } diff --git a/layout/includes/third-party/comments/utterances.pug b/layout/includes/third-party/comments/utterances.pug index dbd422f..25cccf2 100644 --- a/layout/includes/third-party/comments/utterances.pug +++ b/layout/includes/third-party/comments/utterances.pug @@ -13,13 +13,13 @@ script. } function utterancesTheme () { - if (document.querySelector('.utterances-frame')) { + const iframe = document.querySelector('.utterances-frame') + if (iframe) { const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' const message = { type: 'set-theme', theme: theme }; - const iframe = document.querySelector('.utterances-frame'); iframe.contentWindow.postMessage(message, 'https://utteranc.es'); } } diff --git a/package.json b/package.json index de4578d..b49ca22 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b4", + "version": "4.0.0-b5", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js index 1e7efd4..2f8371a 100644 --- a/scripts/helpers/related_post.js +++ b/scripts/helpers/related_post.js @@ -46,11 +46,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { if (relatedPosts.length > 0) { result += '
' - result += - '
' + - ' ' + - headlineLang + - '
' + result += `
${headlineLang}
` result += '
' for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) { @@ -58,32 +54,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover - result += - '
' - result += - 'cover' + result += `
` + result += `cover` if (dateType === 'created') { - result += - '
' + - ' ' + - this.date(relatedPosts[i].created, hexoConfig.date_format) + - '
' + result += `
${this.date(relatedPosts[i].created, hexoConfig.date_format)}
` } else { - result += - '
' + - ' ' + - this.date(relatedPosts[i].updated, hexoConfig.date_format) + - '
' + result += `
${this.date(relatedPosts[i].updated, hexoConfig.date_format)}
` } - result += - '
' + relatedPosts[i].title + '
' + result += `
${relatedPosts[i].title}
` result += '
' } diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 0e9de72..b69660e 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -212,7 +212,8 @@ blockquote & > i transform: rotate(180deg) - & + table + & + table, + & + pre margin-bottom: 1.8em &:not(.expand-done) diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index 528f18e..c9c45c7 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -63,7 +63,7 @@ if $highlight_theme == 'ocean' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 5) + $highlight-scrollbar = darken($highlight-foreground, 40) if $highlighEnable $highlight-comment = rgba(101, 115, 126, .8) diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index bcd740a..3bb93ae 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -293,10 +293,10 @@ .menus_item_child display: block - i.expand - transform: rotate(180deg) !important + & > a > i:last-child + transform: rotate(180deg) - i.expand + & > a > i:last-child padding: 4px transition: transform .3s diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 933f4ec..783ca20 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -65,18 +65,20 @@ width: 15% text-align: left - .expand - position: absolute - top: .78em - right: .9rem - transition: transform .3s + &.group + & > i:last-child + position: absolute + top: .78em + right: .9rem + transition: transform .3s - &.hide - transform: rotate(90deg) !important + &.hide + & > i:last-child + transform: rotate(90deg) + + & + .menus_item_child + display: none .menus_item_child margin: 0 - list-style: none - - if hexo-config('hide_sidebar_menu_child') - display: none \ No newline at end of file + list-style: none \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index d8de926..be82660 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -67,8 +67,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 首頁top_img底下的箭頭 - */ + * 首頁top_img底下的箭頭 + */ const scrollDownInIndex = () => { const $scrollDownEle = document.getElementById('scroll-down') $scrollDownEle && $scrollDownEle.addEventListener('click', function () { @@ -77,9 +77,9 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 代碼 - * 只適用於Hexo默認的代碼渲染 - */ + * 代碼 + * 只適用於Hexo默認的代碼渲染 + */ const addHighlightTool = function () { const highLight = GLOBAL_CONFIG.highlight if (!highLight) return @@ -220,76 +220,38 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * PhotoFigcaption - */ + * PhotoFigcaption + */ function addPhotoFigcaption () { document.querySelectorAll('#article-container img').forEach(function (item) { const parentEle = item.parentNode - if (!parentEle.parentNode.classList.contains('justified-gallery')) { + const altValue = item.alt + if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) { const ele = document.createElement('div') ele.className = 'img-alt is-center' - ele.textContent = item.getAttribute('alt') + ele.textContent = altValue parentEle.insertBefore(ele, item.nextSibling) } }) } /** - * fancybox和 mediumZoom - */ - const addFancybox = () => { - const runFancybox = () => { - document.querySelectorAll('#article-container img:not(.no-lightbox)').forEach(i => { - const lazyloadSrc = i.dataset.lazySrc || i.src - const dataCaption = i.alt || '' - btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc }) - }) - - Fancybox.destroy() - Fancybox.bind('[data-fancybox]', { - Hash: false - }) - } - - if (typeof Fancybox !== 'function') { - const ele = document.createElement('link') - ele.rel = 'stylesheet' - ele.href = GLOBAL_CONFIG.source.fancybox.css - document.head.appendChild(ele) - - getScript(`${GLOBAL_CONFIG.source.fancybox.js}`).then(() => { - runFancybox() - }) - } else { - runFancybox() - } - } - - const addMediumZoom = () => { - const zoom = mediumZoom(document.querySelectorAll('#article-container img:not(.no-lightbox)')) - zoom.on('open', e => { - const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' - zoom.update({ - background: photoBg - }) - }) - } - - // It needs to call it after the Justified Gallery done, or the fancybox maybe not work + * Lightbox + * It needs to call it after the Justified Gallery done, or the fancybox maybe not work + */ const runLightbox = () => { - GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() - GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox() + btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)')) } /** - * justified-gallery 圖庫排版 - * 需要 jQuery - */ + * justified-gallery 圖庫排版 + * 需要 jQuery + */ let detectJgJsLoad = false const runJustifiedGallery = function (ele) { const $justifiedGallery = $(ele) const $imgList = $justifiedGallery.find('img') - $imgList.unwrap() + $imgList.unwrap() // remove

tag if ($imgList.length) { $imgList.each(function (i, o) { if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) @@ -297,17 +259,15 @@ document.addEventListener('DOMContentLoaded', function () { }) } + runLightbox() + if (detectJgJsLoad) { - runLightbox() btf.initJustifiedGallery($justifiedGallery) return } $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { - runLightbox() - btf.initJustifiedGallery($justifiedGallery) - }) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) }) detectJgJsLoad = true } @@ -323,8 +283,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 滾動處理 - */ + * 滾動處理 + */ const scrollFn = function () { const $rightside = document.getElementById('rightside') const innerHeight = window.innerHeight + 56 @@ -387,8 +347,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * toc - */ + * toc + */ const tocFn = function () { const $cardTocLayout = document.getElementById('card-toc') const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] @@ -517,8 +477,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * Rightside - */ + * Rightside + */ const rightSideFn = { switchReadMode: () => { // read-mode const $body = document.body @@ -582,7 +542,6 @@ document.addEventListener('DOMContentLoaded', function () { } saveToLocal.set('global-font-size', newValue, 2) - // document.getElementById('font-text').innerText = newValue } } @@ -616,34 +575,21 @@ document.addEventListener('DOMContentLoaded', function () { }) /** - * menu - * 側邊欄sub-menu 展開/收縮 - * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) - */ - const clickFnOfSubMenu = function () { - document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) { - e.addEventListener('click', function () { + * menu + * 側邊欄sub-menu 展開/收縮 + * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) + */ + const clickFnOfSubMenu = () => { + document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) { + item.addEventListener('click', function () { this.classList.toggle('hide') - const $dom = this.parentNode.nextElementSibling - if (btf.isHidden($dom)) { - $dom.style.display = 'block' - } else { - $dom.style.display = 'none' - } - }) - }) - - window.addEventListener('touchmove', function (e) { - const $menusChild = document.querySelectorAll('#nav .menus_item_child') - $menusChild.forEach(item => { - if (!btf.isHidden(item)) item.style.display = 'none' }) }) } /** - * 複製時加上版權信息 - */ + * 複製時加上版權信息 + */ const addCopyright = () => { const copyright = GLOBAL_CONFIG.copyright document.body.oncopy = (e) => { @@ -667,8 +613,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 網頁運行時間 - */ + * 網頁運行時間 + */ const addRuntime = () => { const $runtimeCount = document.getElementById('runtimeshow') if ($runtimeCount) { @@ -678,8 +624,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 最後一次更新時間 - */ + * 最後一次更新時間 + */ const addLastPushDate = () => { const $lastPushDateItem = document.getElementById('last-push-date') if ($lastPushDateItem) { @@ -689,8 +635,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * table overflow - */ + * table overflow + */ const addTableWrap = function () { const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table') if ($table.length) { @@ -701,8 +647,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * tag-hide - */ + * tag-hide + */ const clickFnOfTagHide = function () { const $hideInline = document.querySelectorAll('#article-container .hide-button') if ($hideInline.length) { diff --git a/source/js/utils.js b/source/js/utils.js index 8fa5d8a..3e52f1b 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -246,6 +246,33 @@ const btf = { } return actualTop - } + }, + loadLightbox: ele => { + const service = GLOBAL_CONFIG.lightbox + + if (service === 'mediumZoom') { + const zoom = mediumZoom(ele) + zoom.on('open', e => { + const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' + zoom.update({ + background: photoBg + }) + }) + } + + if (service === 'fancybox') { + ele.forEach(i => { + if (i.parentNode.tagName !== 'A') { + const dataSrc = i.dataset.lazySrc || i.src + const dataCaption = i.alt || '' + btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc }) + } + }) + + Fancybox.bind('[data-fancybox]', { + Hash: false + }) + } + } }