From 28d1744b9bd04832f9ee7e05f406e30ae0ed259f Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 9 May 2023 00:36:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20artalk=20=E6=94=AF=E6=8C=81=E9=BB=9E?= =?UTF-8?q?=E6=93=8A=E6=89=93=E9=96=8B=E5=A4=A7=E5=9C=96=20feat:=20?= =?UTF-8?q?=E8=A8=AD=E7=BD=AE=E4=BA=86=E9=9A=A8=E7=B3=BB=E7=B5=B1=E8=80=8C?= =?UTF-8?q?=E5=88=87=E6=8F=9B=E6=B7=BA=E8=89=B2=E5=92=8C=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=BE=8C=EF=BC=8C=E8=A9=95=E8=AB=96=E5=92=8C?= =?UTF-8?q?=20mermaind=20=E4=B9=9F=E6=9C=83=E8=B7=9F=E9=9A=A8=E5=88=87?= =?UTF-8?q?=E6=8F=9B=E9=A1=8F=E8=89=B2=20feat:=20artalk=20=E6=9C=80?= =?UTF-8?q?=E6=96=B0=E8=A9=95=E8=AB=96=EF=BC=8C=E5=BE=9E=20artalk=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E8=AE=80=E5=8F=96=E9=A0=AD=E5=83=8F=20CDN=20?= =?UTF-8?q?=E5=92=8C=E9=BB=98=E8=AA=8D=E9=A0=AD=E5=83=8F=20fix:=20?= =?UTF-8?q?=E4=BF=AE=E5=BE=A9=E4=BB=A3=E7=A2=BC=E5=A1=8A=E5=9C=A8=E6=9C=AA?= =?UTF-8?q?=E5=B1=95=E9=96=8B=E6=99=82=EF=BC=8C=E9=BB=9E=E6=93=8A=E8=A4=87?= =?UTF-8?q?=E8=A3=BD=E6=8C=89=E9=88=95=EF=BC=8C=E7=84=A1=E6=B3=95=E8=A4=87?= =?UTF-8?q?=E8=A3=BD=E7=9A=84=20bug=20improvement:=20=E4=BB=A3=E7=A2=BC?= =?UTF-8?q?=E5=92=8C=E6=80=A7=E8=83=BD=E5=84=AA=E5=8C=96=20improvement:=20?= =?UTF-8?q?artalk=20=E7=8D=B2=E5=8F=96=E8=A9=95=E8=AB=96=E6=95=B8=EF=BC=8C?= =?UTF-8?q?=E7=94=B1=20LoadCountWidget=20=E6=94=B9=E7=82=BA=20loadCountWid?= =?UTF-8?q?get?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/includes/head/config.pug | 5 +- layout/includes/third-party/abcjs/index.pug | 2 +- .../third-party/card-post-count/artalk.pug | 2 +- .../third-party/card-post-count/twikoo.pug | 2 +- .../includes/third-party/comments/artalk.pug | 29 +++- .../includes/third-party/comments/disqus.pug | 12 +- .../third-party/comments/disqusjs.pug | 2 +- .../comments/facebook_comments.pug | 12 +- .../includes/third-party/comments/giscus.pug | 12 +- .../includes/third-party/comments/gitalk.pug | 2 +- .../third-party/comments/remark42.pug | 7 +- .../includes/third-party/comments/twikoo.pug | 2 +- .../third-party/comments/utterances.pug | 6 +- layout/includes/third-party/math/mermaid.pug | 4 + .../third-party/newest-comments/artalk.pug | 53 ++++--- .../newest-comments/disqus-comment.pug | 2 +- .../newest-comments/github-issues.pug | 2 +- .../third-party/newest-comments/remark42.pug | 2 +- .../newest-comments/twikoo-comment.pug | 2 +- .../third-party/newest-comments/valine.pug | 2 +- .../third-party/newest-comments/waline.pug | 2 +- layout/includes/third-party/subtitle.pug | 8 +- package.json | 2 +- plugins.yml | 24 +-- source/css/_global/index.styl | 3 - source/css/_highlight/highlight.styl | 8 + source/js/main.js | 146 +++++++++--------- source/js/search/local-search.js | 2 +- source/js/tw_cn.js | 14 +- source/js/utils.js | 8 + 30 files changed, 214 insertions(+), 165 deletions(-) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 19d1007..80cbf25 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -88,7 +88,7 @@ } script. - const GLOBAL_CONFIG = { + const GLOBAL_CONFIG = { root: '!{config.root}', algolia: !{algolia}, localSearch: !{localSearch}, @@ -127,5 +127,6 @@ script. percent: { toc: !{theme.toc.scroll_percent}, rightside: !{theme.rightside_scroll_percent}, - } + }, + autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1} } diff --git a/layout/includes/third-party/abcjs/index.pug b/layout/includes/third-party/abcjs/index.pug index 12d1478..1112626 100644 --- a/layout/includes/third-party/abcjs/index.pug +++ b/layout/includes/third-party/abcjs/index.pug @@ -1,4 +1,4 @@ -if theme.abcjs.enable +if theme.abcjs && theme.abcjs.enable if theme.abcjs.per_page if is_post() || is_page() include ./abcjs.pug diff --git a/layout/includes/third-party/card-post-count/artalk.pug b/layout/includes/third-party/card-post-count/artalk.pug index 762c88d..ef4993e 100644 --- a/layout/includes/third-party/card-post-count/artalk.pug +++ b/layout/includes/third-party/card-post-count/artalk.pug @@ -4,7 +4,7 @@ script. (() => { const getArtalkCount = () => { const runWidget = () => { - Artalk.LoadCountWidget({ + Artalk.loadCountWidget({ server: '!{server}', site: '!{site}', countEl: '.artalk-count' diff --git a/layout/includes/third-party/card-post-count/twikoo.pug b/layout/includes/third-party/card-post-count/twikoo.pug index 314e4ac..72a4223 100644 --- a/layout/includes/third-party/card-post-count/twikoo.pug +++ b/layout/includes/third-party/card-post-count/twikoo.pug @@ -18,7 +18,7 @@ script. includeReply: false }).then(function (res) { document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => { - item.innerText = res[index].count + item.textContent = res[index].count }) }).catch(function (err) { console.log(err) diff --git a/layout/includes/third-party/comments/artalk.pug b/layout/includes/third-party/comments/artalk.pug index 2a3bf22..0f7631e 100644 --- a/layout/includes/third-party/comments/artalk.pug +++ b/layout/includes/third-party/comments/artalk.pug @@ -11,22 +11,35 @@ script. darkMode: document.documentElement.getAttribute('data-theme') === 'dark', countEl: '.artalk-count' },!{JSON.stringify(option)})) + + if (GLOBAL_CONFIG.lightbox === 'null') return + window.artalkItem.use(ctx => { + ctx.on('list-loaded', () => { + ctx.getCommentList().forEach(comment => { + const $content = comment.getRender().$content + btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])')) + }) + }) + }) } if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200) else { - getCSS('!{theme.asset.artalk_css}') - typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk) - : setTimeout(()=>{initArtalk()},200) + getCSS('!{theme.asset.artalk_css}').then(()=>{ + typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk) + : setTimeout(()=>{initArtalk()},200) + }) } } - document.getElementById('darkmode').addEventListener('click',()=> { - if (typeof window.artalkItem !== 'object') return - let isDark = document.documentElement.getAttribute('data-theme') === 'dark' - window.artalkItem.setDarkMode(!isDark) - }) + function artalkChangeMode (theme) { + const artalkWrap = document.getElementById('artalk-wrap') + if (!(artalkWrap && artalkWrap.children.length)) return + const isDark = theme === 'dark' + window.artalkItem.setDarkMode(isDark) + } + btf.addModeChange('artalk', artalkChangeMode) if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) { if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk) diff --git a/layout/includes/third-party/comments/disqus.pug b/layout/includes/third-party/comments/disqus.pug index caa1222..3a9ba41 100644 --- a/layout/includes/third-party/comments/disqus.pug +++ b/layout/includes/third-party/comments/disqus.pug @@ -2,19 +2,21 @@ script. function loadDisqus () { - var disqus_config = function () { + const disqus_config = function () { this.page.url = '!{ page.permalink }' this.page.identifier = '!{ url_for(page.path) }' this.page.title = '!{ disqusPageTitle }' - }; + } - window.disqusReset = () => { + const disqusReset = () => { DISQUS.reset({ reload: true, config: disqus_config }) } + btf.addModeChange('disqus', disqusReset) + if (window.DISQUS) disqusReset() else { (function() { @@ -24,10 +26,6 @@ script. (d.head || d.body).appendChild(s); })(); } - - document.getElementById('darkmode').addEventListener('click', () => { - setTimeout(() => window.disqusReset(), 200) - }) } if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) { diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug index 2b4a5f4..f0994e5 100644 --- a/layout/includes/third-party/comments/disqusjs.pug +++ b/layout/includes/third-party/comments/disqusjs.pug @@ -23,7 +23,7 @@ script. } - document.getElementById('darkmode').addEventListener('click', themeChange) + btf.addModeChange('disqusjs', themeChange) if (window.disqusJsLoad) initDisqusjs() else { diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug index 7172687..e0d673a 100644 --- a/layout/includes/third-party/comments/facebook_comments.pug +++ b/layout/includes/third-party/comments/facebook_comments.pug @@ -22,9 +22,19 @@ script. ele.setAttribute('crossorigin', 'anonymous') ele.setAttribute('id', 'facebook-jssdk') document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele) - } + } } + function fbModeChange (theme) { + const $fbComment = document.getElementsByClassName('fb-comments')[0] + if ($fbComment && typeof FB === 'object') { + $fbComment.setAttribute('data-colorscheme',theme) + FB.XFBML.parse(document.getElementById('post-comment')) + } + } + + btf.addModeChange('facebook_comments', fbModeChange) + if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) { if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment) else loadFBComment() diff --git a/layout/includes/third-party/comments/giscus.pug b/layout/includes/third-party/comments/giscus.pug index cad50ae..0a9af83 100644 --- a/layout/includes/third-party/comments/giscus.pug +++ b/layout/includes/third-party/comments/giscus.pug @@ -3,8 +3,8 @@ - const giscusOriginUrl = new URL(giscusUrl).origin script. - function getGiscusTheme () { - return document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}' + function getGiscusTheme (theme) { + return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}' } function loadGiscus () { @@ -14,7 +14,7 @@ script. 'data-repo-id': '!{repo_id}', 'data-category-id': '!{category_id}', 'data-mapping': 'pathname', - 'data-theme': getGiscusTheme(), + 'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')), 'data-reactions-enabled': '1', crossorigin: 'anonymous', async: true @@ -27,7 +27,7 @@ script. document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele) } - function changeGiscusTheme () { + function changeGiscusTheme (theme) { function sendMessage(message) { const iframe = document.querySelector('iframe.giscus-frame') if (!iframe) return @@ -36,11 +36,13 @@ script. sendMessage({ setConfig: { - theme: getGiscusTheme() + theme: getGiscusTheme(theme) } }); } + btf.addModeChange('giscus', changeGiscusTheme) + if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) { if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus) else loadGiscus() diff --git a/layout/includes/third-party/comments/gitalk.pug b/layout/includes/third-party/comments/gitalk.pug index e162cce..922d657 100644 --- a/layout/includes/third-party/comments/gitalk.pug +++ b/layout/includes/third-party/comments/gitalk.pug @@ -24,7 +24,7 @@ script. function commentCount(n){ let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count') if (isCommentCount) { - isCommentCount.innerHTML= n + isCommentCount.textContent= n } } diff --git a/layout/includes/third-party/comments/remark42.pug b/layout/includes/third-party/comments/remark42.pug index d6d49a6..222f9d3 100644 --- a/layout/includes/third-party/comments/remark42.pug +++ b/layout/includes/third-party/comments/remark42.pug @@ -51,11 +51,12 @@ script. } } - document.getElementById('darkmode').addEventListener('click',()=>{ + function remarkChangeMode (theme) { if (!window.REMARK42) return - let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' window.REMARK42.changeTheme(theme) - }) + } + + btf.addModeChange('remark42', remarkChangeMode) if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) { if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42) diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 437a42f..bdaeb1e 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -23,7 +23,7 @@ script. urls: [window.location.pathname], includeReply: false }).then(function (res) { - countELement.innerText = res[0].count + countELement.textContent = res[0].count }).catch(function (err) { console.error(err); }); diff --git a/layout/includes/third-party/comments/utterances.pug b/layout/includes/third-party/comments/utterances.pug index 7f61831..c225325 100644 --- a/layout/includes/third-party/comments/utterances.pug +++ b/layout/includes/third-party/comments/utterances.pug @@ -12,10 +12,10 @@ script. document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele) } - function utterancesTheme () { + function utterancesTheme (theme) { 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 theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' const message = { type: 'set-theme', theme: theme @@ -24,6 +24,8 @@ script. } } + btf.addModeChange('utterances', utterancesTheme) + if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) { if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances) else loadUtterances() diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index 5b7b496..3222a4a 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/layout/includes/third-party/math/mermaid.pug @@ -21,6 +21,10 @@ script. window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid) } + btf.addModeChange('mermaid', () => { + window.runMermaid() + }) + window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) } })() \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/artalk.pug b/layout/includes/third-party/newest-comments/artalk.pug index 68037b0..ccbc946 100644 --- a/layout/includes/third-party/newest-comments/artalk.pug +++ b/layout/includes/third-party/newest-comments/artalk.pug @@ -1,6 +1,6 @@ - const { server, site, option } = theme.artalk -- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/' -- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp' +- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror +- const avatarDefault = option !== null && option.gravatar && option.gravatar.default script. window.addEventListener('load', () => { @@ -45,6 +45,15 @@ script. window.pjax && window.pjax.refresh($dom) } + const getSetting = async () => { + try { + const res = await fetch('!{server}/api/conf', { method: 'GET' }) + return await res.json() + } catch (e) { + console.log(e) + } + } + const headerList = { method: 'POST', headers: { @@ -58,25 +67,29 @@ script. }) } - const getComment = () => { - fetch('!{server}/api/stat', headerList) - .then(response => response.json()) - .then(d => { - const artalk = d.data.map(function (e) { - return { - 'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}', - 'content': changeContent(e.content_marked), - 'nick': e.nick, - 'url': e.page_url, - 'date': e.date, - } - }) - saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24)) - generateHtml(artalk) - }).catch(e => { - const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + const getComment = async () => { + try { + const res = await fetch('!{server}/api/stat', headerList) + const result = await res.json() + const avatarStr = await getSetting() + const avatarCdn = !{avatarCdn} || avatarStr.data.frontend_conf.gravatar.mirror + const avatarDefault = !{avatarDefault} || avatarStr.data.frontend_conf.gravatar.default + const artalk = result.data.map(function (e) { + return { + 'avatar': `${avatarCdn}${e.email_encrypted}?d=${avatarDefault}`, + 'content': changeContent(e.content_marked), + 'nick': e.nick, + 'url': e.page_url, + 'date': e.date, + } }) + saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24)) + generateHtml(artalk) + } catch (e) { + console.log(e) + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + } } const newestCommentInit = () => { diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug index 5b95e74..2acba1c 100644 --- a/layout/includes/third-party/newest-comments/disqus-comment.pug +++ b/layout/includes/third-party/newest-comments/disqus-comment.pug @@ -32,7 +32,7 @@ script. generateHtml(disqusArray) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug index 2153b11..79430db 100644 --- a/layout/includes/third-party/newest-comments/github-issues.pug +++ b/layout/includes/third-party/newest-comments/github-issues.pug @@ -58,7 +58,7 @@ script. findTrueUrl(githubArray) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/newest-comments/remark42.pug b/layout/includes/third-party/newest-comments/remark42.pug index 8ead708..71c2603 100644 --- a/layout/includes/third-party/newest-comments/remark42.pug +++ b/layout/includes/third-party/newest-comments/remark42.pug @@ -60,7 +60,7 @@ script. generateHtml(remark42) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug index e362623..8615f16 100644 --- a/layout/includes/third-party/newest-comments/twikoo-comment.pug +++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug @@ -36,7 +36,7 @@ script. generateHtml(twikooArray) }).catch(function (err) { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug index ef0bb10..6f78774 100644 --- a/layout/includes/third-party/newest-comments/valine.pug +++ b/layout/includes/third-party/newest-comments/valine.pug @@ -79,7 +79,7 @@ script. generateHtml(valineArray) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug index 565f6f4..95d17bb 100644 --- a/layout/includes/third-party/newest-comments/waline.pug +++ b/layout/includes/third-party/newest-comments/waline.pug @@ -60,7 +60,7 @@ script. generateHtml(walineArray) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" }) } diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index bf02b99..c409b58 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -38,7 +38,7 @@ case source sub.unshift(data.hitokoto, from) typedJSFn.init(sub) } else { - document.getElementById('subtitle').innerHTML = data.hitokoto + document.getElementById('subtitle').textContent = data.hitokoto } }) } @@ -55,7 +55,7 @@ case source sub.unshift(con, from) typedJSFn.init(sub) } else { - document.getElementById('subtitle').innerHTML = con + document.getElementById('subtitle').textContent = con } }) } @@ -72,7 +72,7 @@ case source sub.unshift(content) typedJSFn.init(sub) } else { - document.getElementById('subtitle').innerHTML = result.data.content + document.getElementById('subtitle').textContent = result.data.content } }) }) @@ -86,7 +86,7 @@ case source if (!{effect}) { typedJSFn.init(!{JSON.stringify(subContent)}) } else { - document.getElementById("subtitle").innerHTML = '!{subContent[0]}' + document.getElementById("subtitle").textContent = '!{subContent[0]}' } } typedJSFn.run(subtitleType) \ No newline at end of file diff --git a/package.json b/package.json index d7ff9be..2a51097 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.8.1", + "version": "4.8.5", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/plugins.yml b/plugins.yml index e1ce2f8..59d993c 100644 --- a/plugins.yml +++ b/plugins.yml @@ -5,7 +5,7 @@ algolia_search: instantsearch: name: instantsearch.js file: dist/instantsearch.production.min.js - version: 4.54.0 + version: 4.55.0 pjax: name: pjax file: pjax.min.js @@ -37,17 +37,17 @@ disqusjs_css: twikoo: name: twikoo file: dist/twikoo.all.min.js - version: 1.6.14 + version: 1.6.16 waline_js: name: '@waline/client' file: dist/waline.js other_name: waline - version: 2.14.9 + version: 2.15.4 waline_css: name: '@waline/client' file: dist/waline.css other_name: waline - version: 2.14.9 + version: 2.15.4 sharejs: name: butterfly-extsrc file: sharejs/dist/js/social-share.min.js @@ -64,12 +64,12 @@ katex: name: katex file: dist/katex.min.css other_name: KaTeX - version: 0.16.4 + version: 0.16.7 katex_copytex: name: katex file: dist/contrib/copy-tex.min.js other_name: KaTeX - version: 0.16.4 + version: 0.16.7 mermaid: name: mermaid file: dist/mermaid.min.js @@ -113,7 +113,7 @@ instantpage: typed: name: typed.js file: dist/typed.umd.js - version: 2.0.15 + version: 2.0.16 pangu: name: pangu file: dist/browser/pangu.min.js @@ -121,12 +121,12 @@ pangu: fancybox_css: name: '@fancyapps/ui' file: dist/fancybox/fancybox.css - version: 5.0.15 + version: 5.0.17 other_name: fancyapps-ui fancybox: name: '@fancyapps/ui' file: dist/fancybox/fancybox.umd.js - version: 5.0.15 + version: 5.0.17 other_name: fancyapps-ui medium_zoom: name: medium-zoom @@ -202,13 +202,13 @@ docsearch_js: name: '@docsearch/js' other_name: docsearch-js file: dist/umd/index.js - version: 3.3.3 + version: 3.3.4 docsearch_css: name: '@docsearch/css' other_name: docsearch-css file: dist/style.css - version: 3.3.3 + version: 3.3.4 abcjs_basic_js: name: abcjs file: dist/abcjs-basic-min.js - version: 6.2.0 + version: 6.2.2 diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index a73ae2c..b9933fe 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -174,9 +174,6 @@ if $site-name-font .is-center text-align: center -.copy-true - user-select: all - .pull-left float: left diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index a0a1635..d54798c 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -75,6 +75,14 @@ $code-block &:hover border-bottom-color: var(--hl-color) + &.copy-true + user-select: all + + & > table, + & > pre + display: block !important + opacity: 0 + .highlight-tools position: relative display: flex diff --git a/source/js/main.js b/source/js/main.js index e00d435..d68c51b 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -70,28 +70,17 @@ document.addEventListener('DOMContentLoaded', function () { const highLight = GLOBAL_CONFIG.highlight if (!highLight) return - const isHighlightCopy = highLight.highlightCopy - const isHighlightLang = highLight.highlightLang + const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink - const highlightHeightLimit = highLight.highlightHeightLimit - const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined - const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]') + const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined + const $figureHighlight = plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]') if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return - const isPrismjs = highLight.plugin === 'prismjs' - - let highlightShrinkEle = '' - let highlightCopyEle = '' + const isPrismjs = plugin === 'prismjs' const highlightShrinkClass = isHighlightShrink === true ? 'closed' : '' - - if (isHighlightShrink !== undefined) { - highlightShrinkEle = `` - } - - if (isHighlightCopy) { - highlightCopyEle = '
' - } + const highlightShrinkEle = isHighlightShrink !== undefined ? `` : '' + const highlightCopyEle = highlightCopy ? '
' : '' const copy = (text, ctx) => { if (document.queryCommandSupported && document.queryCommandSupported('copy')) { @@ -100,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () { btf.snackbarShow(GLOBAL_CONFIG.copy.success) } else { const prevEle = ctx.previousElementSibling - prevEle.innerText = GLOBAL_CONFIG.copy.success + prevEle.textContent = GLOBAL_CONFIG.copy.success prevEle.style.opacity = 1 setTimeout(() => { prevEle.style.opacity = 0 }, 700) } @@ -108,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () { if (GLOBAL_CONFIG.Snackbar !== undefined) { btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport) } else { - ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport + ctx.previousElementSibling.textContent = GLOBAL_CONFIG.copy.noSupport } } } @@ -119,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function () { $buttonParent.classList.add('copy-true') const selection = window.getSelection() const range = document.createRange() - if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0]) - else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0]) + const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre' + range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0]) selection.removeAllRanges() selection.addRange(range) const text = selection.toString() @@ -175,33 +164,29 @@ document.addEventListener('DOMContentLoaded', function () { } } - if (isHighlightLang) { - if (isPrismjs) { - $figureHighlight.forEach(function (item) { - const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code' + if (isPrismjs) { + $figureHighlight.forEach(item => { + if (highlightLang) { + const langName = item.getAttribute('data-language') || 'Code' const highlightLangEle = `
${langName}
` btf.wrap(item, 'figure', { class: 'highlight' }) createEle(highlightLangEle, item) - }) - } else { - $figureHighlight.forEach(function (item) { + } else { + btf.wrap(item, 'figure', { class: 'highlight' }) + createEle('', item) + } + }) + } else { + $figureHighlight.forEach(function (item) { + if (highlightLang) { let langName = item.getAttribute('class').split(' ')[1] if (langName === 'plain' || langName === undefined) langName = 'Code' const highlightLangEle = `
${langName}
` createEle(highlightLangEle, item, 'hl') - }) - } - } else { - if (isPrismjs) { - $figureHighlight.forEach(function (item) { - btf.wrap(item, 'figure', { class: 'highlight' }) - createEle('', item) - }) - } else { - $figureHighlight.forEach(function (item) { + } else { createEle('', item, 'hl') - }) - } + } + }) } } @@ -313,6 +298,12 @@ document.addEventListener('DOMContentLoaded', function () { const scrollFn = function () { const $rightside = document.getElementById('rightside') const innerHeight = window.innerHeight + 56 + let initTop = 0 + let isChatShow = true + const $header = document.getElementById('page-header') + const isChatBtnHide = typeof chatBtnHide === 'function' + const isChatBtnShow = typeof chatBtnShow === 'function' + const isShowPercent = GLOBAL_CONFIG.percent.rightside // 當滾動條小于 56 的時候 if (document.body.scrollHeight <= innerHeight) { @@ -321,19 +312,12 @@ document.addEventListener('DOMContentLoaded', function () { } // find the scroll direction - function scrollDirection (currentTop) { + const scrollDirection = currentTop => { const result = currentTop > initTop // true is down & false is up initTop = currentTop return result } - let initTop = 0 - let isChatShow = true - const $header = document.getElementById('page-header') - const isChatBtnHide = typeof chatBtnHide === 'function' - const isChatBtnShow = typeof chatBtnShow === 'function' - const isShowPercent = GLOBAL_CONFIG.percent.rightside - const scrollTask = btf.throttle(() => { const currentTop = window.scrollY || document.documentElement.scrollTop const isDown = scrollDirection(currentTop) @@ -492,6 +476,22 @@ document.addEventListener('DOMContentLoaded', function () { window.addEventListener('scroll', tocScrollFn) } + const modeChangeFn = mode => { + if (!window.themeChange) { + return + } + + const turnMode = item => window.themeChange[item](mode) + + Object.keys(window.themeChange).forEach(item => { + if (['disqus', 'disqusjs'].includes(item)) { + setTimeout(() => turnMode(item), 300) + } else { + turnMode(item) + } + }) + } + /** * Rightside */ @@ -504,7 +504,7 @@ document.addEventListener('DOMContentLoaded', function () { newEle.className = 'fas fa-sign-out-alt exit-readmode' $body.appendChild(newEle) - function clickFn () { + const clickFn = () => { $body.classList.remove('read-mode') newEle.remove() newEle.removeEventListener('click', clickFn) @@ -513,8 +513,8 @@ document.addEventListener('DOMContentLoaded', function () { newEle.addEventListener('click', clickFn) }, switchDarkMode: () => { // Switch Between Light And Dark Mode - const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' - if (nowMode === 'light') { + const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' + if (willChangeMode === 'dark') { activateDarkMode() saveToLocal.set('theme', 'dark', 2) GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night) @@ -523,11 +523,7 @@ document.addEventListener('DOMContentLoaded', function () { saveToLocal.set('theme', 'light', 2) GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) } - // handle some cases - typeof utterancesTheme === 'function' && utterancesTheme() - typeof changeGiscusTheme === 'function' && changeGiscusTheme() - typeof FB === 'object' && window.loadFBComment && window.loadFBComment() - typeof runMermaid === 'function' && window.runMermaid() + modeChangeFn(willChangeMode) }, showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開 const rightsideHideClassList = document.getElementById('rightside-config-hide').classList @@ -545,9 +541,8 @@ document.addEventListener('DOMContentLoaded', function () { }, hideAsideBtn: () => { // Hide aside const $htmlDom = document.documentElement.classList - $htmlDom.contains('hide-aside') - ? saveToLocal.set('aside-status', 'show', 2) - : saveToLocal.set('aside-status', 'hide', 2) + const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide' + saveToLocal.set('aside-status', saveStatus, 2) $htmlDom.toggle('hide-aside') }, @@ -596,21 +591,16 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 複製時加上版權信息 - */ + * 複製時加上版權信息 + */ const addCopyright = () => { const copyright = GLOBAL_CONFIG.copyright document.body.oncopy = (e) => { e.preventDefault() - let textFont; const copyFont = window.getSelection(0).toString() + const copyFont = window.getSelection(0).toString() + let textFont = copyFont if (copyFont.length > copyright.limitCount) { - textFont = copyFont + '\n' + '\n' + '\n' + - copyright.languages.author + '\n' + - copyright.languages.link + window.location.href + '\n' + - copyright.languages.source + '\n' + - copyright.languages.info - } else { - textFont = copyFont + textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}` } if (e.clipboardData) { return e.clipboardData.setData('text', textFont) @@ -627,7 +617,7 @@ document.addEventListener('DOMContentLoaded', function () { const $runtimeCount = document.getElementById('runtimeshow') if ($runtimeCount) { const publishDate = $runtimeCount.getAttribute('data-publishDate') - $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime + $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}` } } @@ -638,7 +628,7 @@ document.addEventListener('DOMContentLoaded', function () { const $lastPushDateItem = document.getElementById('last-push-date') if ($lastPushDateItem) { const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate') - $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true) + $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true) } } @@ -771,10 +761,9 @@ document.addEventListener('DOMContentLoaded', function () { const relativeDate = function (selector) { selector.forEach(item => { - const $this = item - const timeVal = $this.getAttribute('datetime') - $this.innerText = btf.diffDate(timeVal, true) - $this.style.display = 'inline' + const timeVal = item.getAttribute('datetime') + item.textContent = btf.diffDate(timeVal, true) + item.style.display = 'inline' }) } @@ -789,6 +778,13 @@ document.addEventListener('DOMContentLoaded', function () { clickFnOfSubMenu() GLOBAL_CONFIG.islazyload && lazyloadImg() GLOBAL_CONFIG.copyright !== undefined && addCopyright() + + if (GLOBAL_CONFIG.autoDarkmode) { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { + if (saveToLocal.get('theme') !== undefined) return + e.matches ? modeChangeFn('dark') : modeChangeFn('light') + }) + } } window.refreshFn = function () { diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 73dfe6b..47cf84d 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -282,7 +282,7 @@ window.addEventListener('load', () => { window.pjax && window.pjax.refresh(container) } - $loadingStatus.innerHTML = '' + $loadingStatus.textContent = '' } let loadFlag = false diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js index cfff352..c27db8f 100644 --- a/source/js/tw_cn.js +++ b/source/js/tw_cn.js @@ -1,10 +1,6 @@ document.addEventListener('DOMContentLoaded', function () { - const translate = GLOBAL_CONFIG.translate + const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate const snackbarData = GLOBAL_CONFIG.Snackbar - const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文 - const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0 - const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字 - const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改 let currentEncoding = defaultEncoding const targetEncodingCookie = 'translate-chn-cht' let targetEncoding = @@ -12,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function () { ? defaultEncoding : Number(saveToLocal.get('translate-chn-cht')) let translateButtonObject - const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined + const isSnackbar = snackbarData !== undefined function setLang () { document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN' @@ -58,12 +54,12 @@ document.addEventListener('DOMContentLoaded', function () { if (targetEncoding === 1) { currentEncoding = 1 targetEncoding = 2 - translateButtonObject.innerHTML = msgToTraditionalChinese + translateButtonObject.textContent = msgToTraditionalChinese isSnackbar && btf.snackbarShow(snackbarData.cht_to_chs) } else if (targetEncoding === 2) { currentEncoding = 2 targetEncoding = 1 - translateButtonObject.innerHTML = msgToSimplifiedChinese + translateButtonObject.textContent = msgToSimplifiedChinese isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht) } saveToLocal.set(targetEncodingCookie, targetEncoding, 2) @@ -104,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function () { translateButtonObject = document.getElementById('translateLink') if (translateButtonObject) { if (currentEncoding !== targetEncoding) { - translateButtonObject.innerHTML = + translateButtonObject.textContent = targetEncoding === 1 ? msgToSimplifiedChinese : msgToTraditionalChinese diff --git a/source/js/utils.js b/source/js/utils.js index b5df288..253c8ad 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -302,5 +302,13 @@ const btf = { const scrollPercentRounded = Math.round(scrollPercent * 100) const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded return percentage + }, + + addModeChange: (name, fn) => { + if (window.themeChange && window.themeChange[name]) return + window.themeChange = { + ...window.themeChange, + [name]: fn + } } }