From f1bf2413a0f67bd410c7ca0a8a5fcf577ee4318f Mon Sep 17 00:00:00 2001 From: Jerry Date: Sun, 8 Aug 2021 15:36:22 +0800 Subject: [PATCH] =?UTF-8?q?breaking=20changes:=20=E6=9B=B4=E6=96=B0=20fanc?= =?UTF-8?q?ybox=20=E5=88=B0=204=20improvement:=20=E7=B6=B2=E7=AB=99?= =?UTF-8?q?=E8=B3=87=E6=96=99=E9=A1=AF=E7=A4=BA=EF=BC=8C=E4=BD=86=E6=A8=99?= =?UTF-8?q?=E7=B1=A4=E5=92=8C=E5=88=86=E9=A1=9E=E7=82=BA0=E6=99=82?= =?UTF-8?q?=EF=BC=8C=E6=95=B8=E9=87=8F=E9=A1=AF=E7=A4=BA=E7=82=BA=200?= =?UTF-8?q?=EF=BC=8C=E8=80=8C=E4=B8=8D=E6=98=AF=E9=9A=B1=E8=97=8F=20improv?= =?UTF-8?q?ement:=20subtitle=20=E4=BB=A3=E7=A2=BC=E5=84=AA=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=201.=E7=95=B6source=E8=A8=AD=E7=82=BAfalse=EF=BC=8C?= =?UTF-8?q?=E5=90=8C=E6=99=82sub=E4=B9=9F=E6=B2=92=E6=9C=89=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E5=B0=87=E6=9C=83=E8=AE=80=E5=8F=96hexo?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E7=9A=84=20subtitle,2.?= =?UTF-8?q?=E7=84=A1=E9=A0=88=E4=BD=BF=E7=94=A8=E8=BD=89=E7=BE=A9=E5=AD=97?= =?UTF-8?q?=E7=AC=A6=20improvement:=20=E7=A6=81=E6=AD=A2ios=E9=BB=9E?= =?UTF-8?q?=E6=93=8A=E6=90=9C=E7=B4=A2=E6=A1=86=EF=BC=8C=E9=A0=81=E9=9D=A2?= =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=9A=84=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 11 +-- layout/includes/head.pug | 2 +- layout/includes/page/flink.pug | 2 +- layout/includes/sidebar.pug | 33 +++---- layout/includes/third-party/subtitle.pug | 74 +++++++------- layout/includes/widget/card_author.pug | 29 +++--- package.json | 2 +- scripts/tag/gallery.js | 2 +- source/css/_global/index.styl | 3 - source/css/_layout/post.styl | 1 + source/css/_layout/sidebar.styl | 15 ++- source/css/_tags/gallery.styl | 2 +- source/js/main.js | 118 ++++++++++++----------- 13 files changed, 142 insertions(+), 152 deletions(-) diff --git a/_config.yml b/_config.yml index a098555..586808d 100644 --- a/_config.yml +++ b/_config.yml @@ -595,16 +595,13 @@ subtitle: loop: true # source調用第三方服務 # source: false 關閉調用 - # source: 1 調用搏天api的隨機語錄（簡體） + # source: 1 調用搏天 api 的隨機語錄（簡體） # source: 2 調用一言網的一句話（簡體） # source: 3 調用一句網（簡體） # source: 4 調用今日詩詞（簡體） # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false - # 如果有英文逗號' , ',請使用轉義字元 , - # 如果有英文雙引號' " ',請使用轉義字元 " - # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住 - # 如果關閉打字效果，subtitle只會顯示sub的第一行文字 + # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 sub: # Loading Animation (加載動畫) @@ -876,8 +873,8 @@ CDN: pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js # photo - fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css - fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js + fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css + fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js # snackbar diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 5708d7c..3c1c96d 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -20,7 +20,7 @@ meta(charset='UTF-8') meta(http-equiv="X-UA-Compatible" content="IE=edge") -meta(name="viewport" content="width=device-width,initial-scale=1") +meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no") title= tabTitle if pageKeywords meta(name="keywords" content=pageKeywords) diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index 65b91d8..104d288 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -13,7 +13,7 @@ each item in i.link_list .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") - .flink-item-icon + .flink-item-icon.not-lightbox img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index d8a66a3..45a97ee 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -3,26 +3,21 @@ #sidebar-menus .avatar-img.is-center img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar") - .site-data - if site.posts.length - .data-item.is-center - .data-item-link - a(href=url_for(config.archive_dir) + '/') - .headline= _p('aside.articles') - .length-num= site.posts.length + .site-data.is-center + .data-item + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length - if site.tags.length - .data-item.is-center - .data-item-link - a(href=url_for(config.tag_dir) + '/' ) - .headline= _p('aside.tags') - .length-num= site.tags.length + .data-item + a(href=url_for(config.tag_dir) + '/' ) + .headline= _p('aside.tags') + .length-num= site.tags.length + + .data-item + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length - if site.categories.length - .data-item.is-center - .data-item-link - a(href=url_for(config.category_dir) + '/') - .headline= _p('aside.categories') - .length-num= site.categories.length hr !=partial('includes/header/menu_item', {}, {cache: true}) diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index ee0f583..1b2720c 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -1,4 +1,5 @@ -- let source = theme.subtitle.source +- const { effect,loop,source,sub } = theme.subtitle +- let subContent = sub || new Array() case source when 1 @@ -7,14 +8,14 @@ case source fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json') .then(response => response.json()) .then(data => { - if (!{theme.subtitle.effect}) { - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var both = sub.unshift(data.text) - typed = new Typed('#subtitle', { + if (!{effect}) { + const sub = !{JSON.stringify(subContent)} + sub.unshift(data.text) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -23,7 +24,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -39,15 +40,15 @@ case source fetch('https://v1.hitokoto.cn') .then(response => response.json()) .then(data => { - if (!{theme.subtitle.effect}) { - var from = '出自 ' + data.from - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var both = sub.unshift(data.hitokoto, from) - var typed = new Typed('#subtitle', { + if (!{effect}) { + const from = '出自 ' + data.from + const sub = !{JSON.stringify(subContent)} + sub.unshift(data.hitokoto, from) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -56,7 +57,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -70,16 +71,16 @@ case source script. function subtitleType () { getScript('https://yijuzhan.com/api/word.php?m=js').then(() => { - var con = str[0] - if (!{theme.subtitle.effect}) { - var from = '出自 ' + str[1] - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var both = sub.unshift(con, from) - var typed = new Typed('#subtitle', { + const con = str[0] + if (!{effect}) { + const from = '出自 ' + str[1] + const sub = !{JSON.stringify(subContent)} + sub.unshift(con, from) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -88,7 +89,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -102,16 +103,16 @@ case source script. function subtitleType () { getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => { - jinrishici.load(function (result) { - if (!{theme.subtitle.effect}) { - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var content = result.data.content - var both = sub.unshift(content) - var typed = new Typed('#subtitle', { + jinrishici.load(result =>{ + if (!{effect}) { + const sub = !{JSON.stringify(subContent)} + const content = result.data.content + sub.unshift(content) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -121,7 +122,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -132,22 +133,23 @@ case source } default + - subContent = subContent.length ? subContent : new Array(config.subtitle) script. function subtitleType () { - if (!{theme.subtitle.effect}) { - var typed = new Typed("#subtitle", { - strings: "!{theme.subtitle.sub}".split(","), + if (!{effect}) { + window.typed = new Typed("#subtitle", { + strings: !{JSON.stringify(subContent)}, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50 }) } else { - document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}' + document.getElementById("subtitle").innerHTML = '!{subContent[0]}' } } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index 57b1f9d..dd8cc7b 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -6,24 +6,21 @@ if theme.aside.card_author.enable .author-info__name= config.author .author-info__description!= theme.aside.card_author.description || config.description - .card-info-data - if site.posts.length - .card-info-data-item.is-center - a(href=url_for(config.archive_dir) + '/') - .headline= _p('aside.articles') - .length-num= site.posts.length + .card-info-data.is-center + .card-info-data-item + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length - if site.tags.length - .card-info-data-item.is-center - a(href=url_for(config.tag_dir) + '/') - .headline= _p('aside.tags') - .length-num= site.tags.length + .card-info-data-item + a(href=url_for(config.tag_dir) + '/') + .headline= _p('aside.tags') + .length-num= site.tags.length - if site.categories.length - .card-info-data-item.is-center - a(href=url_for(config.category_dir) + '/') - .headline= _p('aside.categories') - .length-num= site.categories.length + .card-info-data-item + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length if theme.aside.card_author.button.enable a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) diff --git a/package.json b/package.json index 42f73d8..a4f0af3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b2", + "version": "4.0.0-b3", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js index 6bec4c4..82067c1 100644 --- a/scripts/tag/gallery.js +++ b/scripts/tag/gallery.js @@ -19,7 +19,7 @@ function galleryGroup (args) { const img = urlFor(args[3]) return ` -
+
Group Image Gallery
${name}
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 8edc7f8..09c966b 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -199,9 +199,6 @@ if $site-name-font transform: scaleX(1) img - max-width: 100% - transition: all .2s - &[src=''], &:not([src]) opacity: 0 diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 2785ae1..0b341c6 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -154,6 +154,7 @@ no-beautify() img display: block margin: 0 auto .8rem + max-width: 100% p margin: 0 0 .8rem diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 25e8ae5..933f4ec 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -34,16 +34,15 @@ .data-item display: table-cell - .data-item-link - & > a > div - @extend .limit-one-line + & > a > div + @extend .limit-one-line - .length-num - color: var(--text-highlight-color) - font-size: 1.28em + .length-num + color: var(--text-highlight-color) + font-size: 1.28em - .headline - color: var(--font-color) + .headline + color: var(--font-color) hr margin: 1rem auto diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index bb76a4d..743a645 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -27,7 +27,7 @@ figure.gallery-group img position: relative margin: 0 !important - max-width: none + max-width: none !important width: calc(100% + 20px) height: 250px backface-visibility: hidden diff --git a/source/js/main.js b/source/js/main.js index 4bf8839..42c3a42 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -234,11 +234,57 @@ document.addEventListener('DOMContentLoaded', function () { }) } + /** + * fancybox和 mediumZoom + */ + const addFancybox = () => { + const runFancybox = () => { + document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').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 :not(a):not(.not-lightbox) > img, #article-container > img')) + 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 + const runLightbox = () => { + GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() + GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox() + } + /** * justified-gallery 圖庫排版 * 需要 jQuery */ - let detectJgJsLoad = false const runJustifiedGallery = function (ele) { const $justifiedGallery = $(ele) @@ -251,72 +297,29 @@ document.addEventListener('DOMContentLoaded', function () { }) } - if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) - else { - $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { - btf.initJustifiedGallery($justifiedGallery) - }) - detectJgJsLoad = true - } - } - - /** - * fancybox和 mediumZoom - */ - const addFancybox = function (ele) { - 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 (detectJgJsLoad) { + runLightbox() + btf.initJustifiedGallery($justifiedGallery) + return } - 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):not(.flink-item-icon) > img')) - zoom.on('open', e => { - const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' - zoom.update({ - background: photoBg - }) + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { + runLightbox() + btf.initJustifiedGallery($justifiedGallery) }) + detectJgJsLoad = true } const jqLoadAndRun = () => { - const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox' - ? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.flink-item-icon) > img, #article-container > img') - : [] - const fbLengthNoZero = $fancyboxEle.length > 0 const $jgEle = document.querySelectorAll('#article-container .justified-gallery') - const jgLengthNoZero = $jgEle.length > 0 - - if (jgLengthNoZero || fbLengthNoZero) { + if ($jgEle.length) { btf.isJqueryLoad(() => { - jgLengthNoZero && runJustifiedGallery($jgEle) - fbLengthNoZero && addFancybox($fancyboxEle) + runJustifiedGallery($jgEle) }) + return } + runLightbox() } /** @@ -853,7 +856,6 @@ document.addEventListener('DOMContentLoaded', function () { addHighlightTool() GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() jqLoadAndRun() - GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() scrollFn() addTableWrap() clickFnOfTagHide()