diff --git a/README.md b/README.md index 284ff4120..e0189ba35 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@
- Language: - 🇺🇸 - 🇨🇳 +中文
# hexo-theme-butterfly @@ -14,7 +12,7 @@ ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) -Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) +Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://blog.crazywong.com/) Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) @@ -62,17 +60,17 @@ npm i hexo-theme-butterfly - [x] Card UI Design - [X] Support sub-menu -- [x] Two Column designs +- [x] Two-column layout - [x] Responsive Web Design - [x] Dark Mode - [x] Pjax - [x] Read Mode - [x] Conversion between Traditional and Simplified Chinese - [X] TOC catalog is available for both computers and mobile phones -- [X] Color themes (darker/pale night/light/ocean/mac/mac light), support custom colors +- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean/mac/mac light), also support customization - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap) - [X] Disable copy/Add a Copyright Notice to the Copied Text -- [X] Search (Algolia SearchZ/Local Search) +- [X] Search (Algolia Search/Local Search) - [x] Mathjax and Katex - [x] Built-in 404 page - [x] WordCount diff --git a/README_CN.md b/README_CN.md index f67c2e387..441cd793f 100644 --- a/README_CN.md +++ b/README_CN.md @@ -1,7 +1,5 @@
- 語言: - 中文 - 英文 + English
# hexo-theme-butterfly @@ -14,7 +12,7 @@ ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) -預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) +預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://blog.crazywong.com/) 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) @@ -72,7 +70,7 @@ theme: butterfly - [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行 - [X] 可關閉文字複製/可開啟內容複製增加版權信息） -- [X] 兩種搜索（Algolia搜索和本地搜索） +- [X] 兩種搜索（ Algolia 搜索和本地搜索） - [x] Mathjax 和 Katex - [x] 內置404頁面 - [x] 顯示字數統計 diff --git a/_config.yml b/_config.yml index aad06ef72..5c1b8d128 100644 --- a/_config.yml +++ b/_config.yml @@ -645,6 +645,11 @@ background: # Footer Background footer_bg: false +# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩) +mask: + header: true + footer: true + # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px) rightside-bottom: diff --git a/layout/includes/header/index.pug b/layout/includes/header/index.pug index 8089f1967..33e01dbc6 100644 --- a/layout/includes/header/index.pug +++ b/layout/includes/header/index.pug @@ -44,7 +44,7 @@ header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img) span#subtitle if(theme.social) #site_social_icons - !=fragment_cache('social', function(){return partial('includes/header/social')}) + !=partial('includes/header/social', {}, {cache: true}) #scroll-down i.fas.fa-angle-down.scroll-down-effects else diff --git a/layout/includes/loading/fullpage-loading.pug b/layout/includes/loading/fullpage-loading.pug index 5ca3d0dbe..4a2c8bf51 100644 --- a/layout/includes/loading/fullpage-loading.pug +++ b/layout/includes/loading/fullpage-loading.pug @@ -9,21 +9,25 @@ .loading-word= _p('loading') script. - const preloader = { - endLoading: () => { - document.body.style.overflow = ''; - document.getElementById('loading-box').classList.add("loaded") - }, - initLoading: () => { - document.body.style.overflow = 'hidden'; - document.getElementById('loading-box').classList.remove("loaded") + (()=>{ + const $loadingBox = document.getElementById('loading-box') + const $body = document.body + const preloader = { + endLoading: () => { + $body.style.overflow = '' + $loadingBox.classList.add('loaded') + }, + initLoading: () => { + $body.style.overflow = 'hidden' + $loadingBox.classList.remove('loaded') + } } - } - preloader.initLoading() - window.addEventListener('load',()=> { preloader.endLoading() }) + preloader.initLoading() + window.addEventListener('load',() => { preloader.endLoading() }) - if (!{theme.pjax && theme.pjax.enable}) { - document.addEventListener('pjax:send', () => { preloader.initLoading() }) - document.addEventListener('pjax:complete', () => { preloader.endLoading() }) - } \ No newline at end of file + if (!{theme.pjax && theme.pjax.enable}) { + document.addEventListener('pjax:send', () => { preloader.initLoading() }) + document.addEventListener('pjax:complete', () => { preloader.endLoading() }) + } + })() \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index 4ed053b49..970b5fc12 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -70,7 +70,7 @@ mixin postUI(posts) block span.article-meta-label= ' ' + _p('card_post_count') - if theme.comments.card_post_count + if theme.comments.card_post_count && theme.comments.use case theme.comments.use[0] when 'Disqus' +countBlockInIndex @@ -89,7 +89,7 @@ mixin postUI(posts) when 'Waline' +countBlockInIndex a(href=url_for(link) + '#post-comment') - span.waline-comment-count(id=url_for(link)) + span.waline-comment-count(data-path=url_for(link)) i.fa-solid.fa-spinner.fa-spin when 'Twikoo' +countBlockInIndex diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 03c6aaab4..57d8fba89 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -23,7 +23,7 @@ mixin rightsideItem(array) i.fas.fa-list-ul when 'chat' if chat_btn - button#chat_btn(type="button" title=_p("rightside.chat")) + button#chat-btn(type="button" title=_p("rightside.chat")) i.fas.fa-sms when 'comment' if commentsJsLoad diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index 11bddf8cc..66c67a9df 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -14,5 +14,5 @@ .headline= _p('aside.categories') .length-num= site.categories.length - hr + hr.custom-hr !=partial('includes/header/menu_item', {}, {cache: true}) diff --git a/layout/includes/third-party/card-post-count/artalk.pug b/layout/includes/third-party/card-post-count/artalk.pug index ef4993e2d..9e9aaed42 100644 --- a/layout/includes/third-party/card-post-count/artalk.pug +++ b/layout/includes/third-party/card-post-count/artalk.pug @@ -2,19 +2,34 @@ script. (() => { - const getArtalkCount = () => { - const runWidget = () => { - Artalk.loadCountWidget({ - server: '!{server}', - site: '!{site}', - countEl: '.artalk-count' + const getArtalkCount = async() => { + try { + const eleGroup = document.querySelectorAll('#recent-posts .artalk-count') + const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key')) + + const headerList = { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'Origin': window.location.origin + }, + body: new URLSearchParams({ + 'site_name': '!{site}', + 'type':'page_comment', + 'page_keys': keyArray + }) + } + + const res = await fetch('!{server}/api/stat', headerList) + const result = await res.json() + + keyArray.forEach((key, index) => { + eleGroup[index].textContent = result.data[key] || 0 }) + } catch (err) { + console.error(err) } - - if (typeof Artalk === 'function') runWidget() - else getScript('!{theme.asset.artalk_js}').then(runWidget) } - window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount) })() \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/waline.pug b/layout/includes/third-party/card-post-count/waline.pug index e69237fa7..c80da5789 100644 --- a/layout/includes/third-party/card-post-count/waline.pug +++ b/layout/includes/third-party/card-post-count/waline.pug @@ -1,17 +1,19 @@ script. (() => { - function loadWaline () { - function initWaline () { - let initData = { - el: null, - serverURL: '!{theme.waline.serverURL}', - comment: true - } - const waline = Waline.init(initData) - } + async function loadWaline () { + try { + const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count') + const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path')) - if (typeof Waline === 'object') initWaline() - else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline) + const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' }) + const result = await res.json() + + result.data.forEach((count, index) => { + eleGroup[index].textContent = count + }) + } catch (err) { + console.error(err) + } } window.pjax ? loadWaline() : window.addEventListener('load', loadWaline) diff --git a/layout/includes/third-party/chat/chatra.pug b/layout/includes/third-party/chat/chatra.pug index b6c120146..5cc7b5a99 100644 --- a/layout/includes/third-party/chat/chatra.pug +++ b/layout/includes/third-party/chat/chatra.pug @@ -1,33 +1,50 @@ //- https://chatra.io/help/api/ script. - (function(d, w, c) { - w.ChatraID = '#{theme.chatra.id}'; - var s = d.createElement('script'); - w[c] = w[c] || function() { - (w[c].q = w[c].q || []).push(arguments); - }; - s.async = true; - s.src = 'https://call.chatra.io/chatra.js'; - if (d.head) d.head.appendChild(s); - })(document, window, 'Chatra'); + (() => { + const isChatBtn = !{theme.chat_btn} + const isChatHideShow = !{theme.chat_hide_show} - if (!{theme.chat_btn}) { - var chatBtnFn = () => { - var chatBtn = document.getElementById("chat_btn") - chatBtn.addEventListener("click", function(){ - Chatra('openChat') - }); - } - chatBtnFn() - } else { - if (!{theme.chat_hide_show}) { - function chatBtnHide () { + if (isChatBtn) { + const close = () => { + Chatra('minimizeWidget') Chatra('hide') } - function chatBtnShow () { + + const open = () => { + Chatra('openChat', true) Chatra('show') } + + window.ChatraSetup = { + startHidden: true + } + + window.chatBtnFn = () => { + const isShow = document.getElementById('chatra').classList.contains('chatra--expanded') + isShow ? close() : open() + } + } else if (isChatHideShow) { + window.chatBtn = { + hide: () => { + Chatra('hide') + }, + show: () => { + Chatra('show') + } + } } - } + + (function(d, w, c) { + w.ChatraID = '#{theme.chatra.id}' + var s = d.createElement('script') + w[c] = w[c] || function() { + (w[c].q = w[c].q || []).push(arguments) + } + s.async = true + s.src = 'https://call.chatra.io/chatra.js' + if (d.head) d.head.appendChild(s) + })(document, window, 'Chatra') + + })() diff --git a/layout/includes/third-party/chat/crisp.pug b/layout/includes/third-party/chat/crisp.pug index cc57e8dd2..6c8b6bf43 100644 --- a/layout/includes/third-party/chat/crisp.pug +++ b/layout/includes/third-party/chat/crisp.pug @@ -1,36 +1,45 @@ script. - window.$crisp = []; - window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"; - (function () { - d = document; - s = d.createElement("script"); - s.src = "https://client.crisp.chat/l.js"; - s.async = 1; - d.getElementsByTagName("head")[0].appendChild(s); - })(); - $crisp.push(["safe", true]) + (() => { + window.$crisp = []; + window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"; + (function () { + d = document; + s = d.createElement("script"); + s.src = "https://client.crisp.chat/l.js"; + s.async = 1; + d.getElementsByTagName("head")[0].appendChild(s); + })(); + $crisp.push(["safe", true]) - if (!{theme.chat_btn}) { - $crisp.push(["do", "chat:hide"]) - $crisp.push(["on", "chat:closed", function() { - $crisp.push(["do", "chat:hide"]) - }]) - var chatBtnFn = () => { - var chatBtn = document.getElementById("chat_btn") - chatBtn.addEventListener("click", function(){ + const isChatBtn = !{theme.chat_btn} + const isChatHideShow = !{theme.chat_hide_show} + + if (isChatBtn) { + const open = () => { $crisp.push(["do", "chat:show"]) $crisp.push(["do", "chat:open"]) + } - }); - } - chatBtnFn() - } else { - if (!{theme.chat_hide_show}) { - function chatBtnHide () { + const close = () => { $crisp.push(["do", "chat:hide"]) } - function chatBtnShow () { - $crisp.push(["do", "chat:show"]) + + close() + $crisp.push(["on", "chat:closed", function() { + close() + }]) + + window.chatBtnFn = () => { + $crisp.is("chat:visible") ? close() : open() + } + } else if (isChatHideShow) { + window.chatBtn = { + hide: () => { + $crisp.push(["do", "chat:hide"]) + }, + show: () => { + $crisp.push(["do", "chat:show"]) + } } } - } \ No newline at end of file + })() \ No newline at end of file diff --git a/layout/includes/third-party/chat/daovoice.pug b/layout/includes/third-party/chat/daovoice.pug index 3c6b06493..5a7c33dc9 100644 --- a/layout/includes/third-party/chat/daovoice.pug +++ b/layout/includes/third-party/chat/daovoice.pug @@ -1,40 +1,40 @@ //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html script. - (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice") + (() => { + (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice") -script. - var isChatBtn = !{theme.chat_btn} - daovoice('init', { - app_id: '!{theme.daovoice.app_id}',},{ - launcher: { - disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示 - }, - }); - daovoice('update'); + const isChatBtn = !{theme.chat_btn} + const isChatHideShow = !{theme.chat_hide_show} - if (isChatBtn) { - var chatBtnFn = () => { - var chatBtn = document.getElementById("chat_btn") - chatBtn.addEventListener("click", function(){ - daovoice('show') - }); - } - chatBtnFn() - } else { - if (!{theme.chat_hide_show}) { - function chatBtnHide () { - daovoice('update', {},{ - launcher: { - disableLauncherIcon: true // 悬浮 ICON 是否显示 - }, - }); + daovoice('init', { + app_id: '!{theme.daovoice.app_id}',},{ + launcher: { + disableLauncherIcon: isChatBtn + }, + }); + daovoice('update'); + + if (isChatBtn) { + window.chatBtnFn = () => { + const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active') + isShow ? daovoice('hide') : daovoice('show') } - function chatBtnShow () { - daovoice('update', {},{ - launcher: { - disableLauncherIcon: false // 悬浮 ICON 是否显示 - }, - }); + } else if (isChatHideShow) { + window.chatBtn = { + hide: () => { + daovoice('update', {},{ + launcher: { + disableLauncherIcon: true + } + }) + }, + show: () => { + daovoice('update', {}, { + launcher: { + disableLauncherIcon: false + } + }) + } } } - } \ No newline at end of file + })() \ No newline at end of file diff --git a/layout/includes/third-party/chat/messenger.pug b/layout/includes/third-party/chat/messenger.pug index e5c9d885d..3d244fc04 100644 --- a/layout/includes/third-party/chat/messenger.pug +++ b/layout/includes/third-party/chat/messenger.pug @@ -4,39 +4,41 @@ #fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox') script. - document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') + (() => { + document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') - window.fbAsyncInit = function() { - FB.init({ - xfbml: true, - version: 'v16.0' - }); - }; + window.fbAsyncInit = function() { + FB.init({ + xfbml: true, + version: 'v16.0' + }); + }; - (function(d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) return; - js = d.createElement(s); js.id = id; - js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js'; - fjs.parentNode.insertBefore(js, fjs); - }(document, 'script', 'facebook-jssdk')); + (function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); js.id = id; + js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js'; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); - if (!{theme.chat_btn}) { - var chatBtnFn = () => { - var chatBtn = document.getElementById("chat_btn") - chatBtn.addEventListener("click", function(){ - FB.CustomerChat.show(); - }); - } - chatBtnFn() - } else { - if (!{theme.chat_hide_show}) { - function chatBtnHide () { - FB.CustomerChat.hide() + const isChatBtn = !{theme.chat_btn} + const isChatHideShow = !{theme.chat_hide_show} + + if (isChatBtn) { + window.chatBtnFn = () => { + const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2') + isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show() } - function chatBtnShow () { - FB.CustomerChat.show(false) + } else if (isChatHideShow) { + window.chatBtn = { + hide: () => { + FB.CustomerChat.hide() + }, + show: () => { + FB.CustomerChat.show(false) + } } } - } + })() diff --git a/layout/includes/third-party/chat/tidio.pug b/layout/includes/third-party/chat/tidio.pug index 6b0097fb6..20104f53f 100644 --- a/layout/includes/third-party/chat/tidio.pug +++ b/layout/includes/third-party/chat/tidio.pug @@ -1,41 +1,45 @@ script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async) +script. + (() => { + const isChatBtn = !{theme.chat_btn} + const isChatHideShow = !{theme.chat_hide_show} -if theme.chat_btn - script. - function onTidioChatApiReady() { - window.tidioChatApi.hide(); - window.tidioChatApi.on("close", function() { - window.tidioChatApi.hide(); - }); - } - if (window.tidioChatApi) { - window.tidioChatApi.on("ready", onTidioChatApiReady); - } else { - document.addEventListener("tidioChat-ready", onTidioChatApiReady); - } - - var chatBtnFn = () => { - document.getElementById("chat_btn").addEventListener("click", function(){ - window.tidioChatApi.show(); - window.tidioChatApi.open(); - }); - } - chatBtnFn() + if (isChatBtn) { + let isShow = false + const close = () => { + window.tidioChatApi.hide() + isShow = false + } + + const open = () => { + window.tidioChatApi.open() + window.tidioChatApi.show() + isShow = true + } -else if theme.chat_hide_show - script. - function chatBtnHide () { + const onTidioChatApiReady = () => { + window.tidioChatApi.hide() + window.tidioChatApi.on("close", close) + } if (window.tidioChatApi) { - //- window.tidioChatApi.hide(); - document.getElementById('tidio-chat').style.display= 'none' + window.tidioChatApi.on("ready", onTidioChatApiReady) + } else { + document.addEventListener("tidioChat-ready", onTidioChatApiReady) } - } - function chatBtnShow () { - if (window.tidioChatApi) { - //- window.tidioChatApi.show(); - document.getElementById('tidio-chat').style.display= 'block' - } + window.chatBtnFn = () => { + if (!window.tidioChatApi) return + isShow ? close() : open() + } + } else if (isChatHideShow) { + window.chatBtn = { + hide: () => { + window.tidioChatApi && window.tidioChatApi.hide() + }, + show: () => { + window.tidioChatApi && window.tidioChatApi.show() + } + } } - + })() diff --git a/layout/includes/third-party/comments/artalk.pug b/layout/includes/third-party/comments/artalk.pug index 0f7631e09..c5844ed07 100644 --- a/layout/includes/third-party/comments/artalk.pug +++ b/layout/includes/third-party/comments/artalk.pug @@ -23,11 +23,10 @@ script. }) } - if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200) + if (typeof window.artalkItem === 'object') initArtalk() else { getCSS('!{theme.asset.artalk_css}').then(()=>{ - typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk) - : setTimeout(()=>{initArtalk()},200) + getScript('!{theme.asset.artalk_js}').then(initArtalk) }) } } diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug index 0821ae582..c797395b8 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/layout/includes/third-party/comments/index.pug @@ -1,5 +1,5 @@ - let defaultComment = theme.comments.use[0] -hr +hr.custom-hr #post-comment .comment-head .comment-headline diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug index 3d43fe254..55c7b45a4 100644 --- a/layout/includes/third-party/comments/waline.pug +++ b/layout/includes/third-party/comments/waline.pug @@ -14,13 +14,9 @@ script. }, !{JSON.stringify(option)})) } - const walineCSSLoad = document.getElementById('waline-css') - - if (typeof Waline === 'object') { - walineCSSLoad ? initWaline() : getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(initWaline) - } + if (typeof Waline === 'object') initWaline() else { - getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(() => { + getCSS('!{url_for(theme.asset.waline_css)}').then(() => { getScript('!{url_for(theme.asset.waline_js)}').then(initWaline) }) } diff --git a/layout/includes/third-party/math/mathjax.pug b/layout/includes/third-party/math/mathjax.pug index e1734b7b7..470aa451f 100644 --- a/layout/includes/third-party/math/mathjax.pug +++ b/layout/includes/third-party/math/mathjax.pug @@ -3,7 +3,7 @@ script. if (!window.MathJax) { window.MathJax = { tex: { - inlineMath: [ ['$','$'], ["\\(","\\)"]], + inlineMath: [['$', '$'], ['\\(', '\\)']], tags: 'ams' }, chtml: { @@ -21,16 +21,7 @@ script. math.end = {node: text, delim: '', n: 0} doc.math.push(math) } - }, ''], - insertScript: [200, () => { - document.querySelectorAll('mjx-container').forEach(node => { - if (node.hasAttribute('display')) { - btf.wrap(node, 'div', { class: 'mathjax-overflow' }) - } else { - btf.wrap(node, 'span', { class: 'mathjax-overflow' }) - } - }); - }, '', false] + }, ''] } } } diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index 3222a4a4a..119a5dd57 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/layout/includes/third-party/math/mermaid.pug @@ -1,30 +1,38 @@ script. (() => { - const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap') - if ($mermaidWrap.length) { - window.runMermaid = () => { - window.loadMermaid = true - const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}' - - Array.from($mermaidWrap).forEach((item, index) => { - const mermaidSrc = item.firstElementChild - const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n' - const mermaidID = 'mermaid-' + index - const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent - mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => { - mermaidSrc.insertAdjacentHTML('afterend', svgCode) + const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap') + if ($mermaid.length === 0) return + const runMermaid = () => { + window.loadMermaid = true + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}' + + Array.from($mermaid).forEach((item, index) => { + const mermaidSrc = item.firstElementChild + const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n' + const mermaidID = 'mermaid-' + index + const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent + + const renderFn = mermaid.render(mermaidID, mermaidDefinition) + + const renderV10 = () => { + renderFn.then(({svg}) => { + mermaidSrc.insertAdjacentHTML('afterend', svg) }) - }) - } + } - const loadMermaid = () => { - window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid) - } + const renderV9 = svg => { + mermaidSrc.insertAdjacentHTML('afterend', svg) + } - btf.addModeChange('mermaid', () => { - window.runMermaid() + typeof renderFn === 'string' ? renderV9(renderFn) : renderV10() }) + } - window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) + const loadMermaid = () => { + window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid) } + + btf.addModeChange('mermaid', 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 ccbc94669..e2e83bac6 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 -- const avatarDefault = option !== null && option.gravatar && option.gravatar.default +- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default) script. window.addEventListener('load', () => { @@ -72,11 +72,13 @@ script. 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 { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar + const avatarCdn = !{avatarCdn} || mirror + let avatarDefault = !{avatarDefault} || params || defaults + avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}` const artalk = result.data.map(function (e) { return { - 'avatar': `${avatarCdn}${e.email_encrypted}?d=${avatarDefault}`, + 'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`, 'content': changeContent(e.content_marked), 'nick': e.nick, 'url': e.page_url, diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug index 95d17bb3c..00a72d5f3 100644 --- a/layout/includes/third-party/newest-comments/waline.pug +++ b/layout/includes/third-party/newest-comments/waline.pug @@ -1,6 +1,6 @@ script. window.addEventListener('load', () => { - const changeContent = (content) => { + const changeContent = content => { if (content === '') return content content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link @@ -41,31 +41,26 @@ script. window.pjax && window.pjax.refresh($dom) } - const getComment = () => { - const loadWaline = () => { - Waline.RecentComments({ - serverURL: '!{theme.waline.serverURL}', - count: !{theme.newest_comments.limit} - }).then(({comments}) => { - const walineArray = comments.map(e => { - return { - 'content': changeContent(e.comment), - 'avatar': e.avatar, - 'nick': e.nick, - 'url': e.url + '#' + e.objectId, - 'date': e.insertedAt, - } - }) - saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24)) - generateHtml(walineArray) - }).catch(e => { - const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.textContent= "!{_p('aside.card_newest_comments.error')}" - }) + const getComment = async () => { + try { + const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' }) + const result = await res.json() + const walineArray = result.data.map(e => { + return { + 'content': changeContent(e.comment), + 'avatar': e.avatar, + 'nick': e.nick, + 'url': e.url + '#' + e.objectId, + 'date': e.time || e.insertedAt + } + }) + saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24)) + generateHtml(walineArray) + } catch (err) { + console.error(err) + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.textContent= "!{_p('aside.card_newest_comments.error')}" } - - if (typeof Waline === 'object') loadWaline() - else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline) } const newestCommentInit = () => { diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index 30488562d..a5d926a91 100644 --- a/layout/includes/third-party/pjax.pug +++ b/layout/includes/third-party/pjax.pug @@ -62,7 +62,6 @@ script. GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update() - typeof chatBtnFn === 'function' && chatBtnFn() typeof panguInit === 'function' && panguInit() // google analytics diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index c409b5863..0b4f6cc9e 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -86,7 +86,7 @@ case source if (!{effect}) { typedJSFn.init(!{JSON.stringify(subContent)}) } else { - document.getElementById("subtitle").textContent = '!{subContent[0]}' + document.getElementById("subtitle").textContent = !{JSON.stringify(subContent[0])} } } typedJSFn.run(subtitleType) \ No newline at end of file diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index de71edb83..0a1e71ae0 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -24,4 +24,4 @@ if theme.aside.card_author.enable if(theme.social) .card-info-social-icons.is-center - !=fragment_cache('social', function(){return partial('includes/header/social')}) + !=partial('includes/header/social', {}, {cache: true}) diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug index 7350ee7ac..a7a213c6a 100644 --- a/layout/includes/widget/card_newest_comment.pug +++ b/layout/includes/widget/card_newest_comment.pug @@ -1,4 +1,4 @@ -if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0]) +if theme.newest_comments.enable && theme.comments.use && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0]) .card-widget#card-newest-comments .item-headline i.fas.fa-comment-dots diff --git a/package.json b/package.json index 2a51097a3..6e97de22c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.8.5", + "version": "4.9.0", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { @@ -23,7 +23,7 @@ "email": "my@crazywong.com" }, "dependencies": { - "hexo-renderer-stylus": "^2.1.0", + "hexo-renderer-stylus": "^3.0.0", "hexo-renderer-pug": "^3.0.0" }, "homepage": "https://butterfly.js.org/", diff --git a/plugins.yml b/plugins.yml index 59d993c9d..ef96ad061 100644 --- a/plugins.yml +++ b/plugins.yml @@ -1,11 +1,11 @@ algolia_search: name: algoliasearch file: dist/algoliasearch-lite.umd.js - version: 4.17.0 + version: 4.17.1 instantsearch: name: instantsearch.js file: dist/instantsearch.production.min.js - version: 4.55.0 + version: 4.56.1 pjax: name: pjax file: pjax.min.js @@ -42,12 +42,12 @@ waline_js: name: '@waline/client' file: dist/waline.js other_name: waline - version: 2.15.4 + version: 2.15.5 waline_css: name: '@waline/client' file: dist/waline.css other_name: waline - version: 2.15.4 + version: 2.15.5 sharejs: name: butterfly-extsrc file: sharejs/dist/js/social-share.min.js @@ -73,7 +73,7 @@ katex_copytex: mermaid: name: mermaid file: dist/mermaid.min.js - version: 9.4.3 + version: 10.2.2 canvas_ribbon: name: butterfly-extsrc file: dist/canvas-ribbon.min.js @@ -121,12 +121,12 @@ pangu: fancybox_css: name: '@fancyapps/ui' file: dist/fancybox/fancybox.css - version: 5.0.17 + version: 5.0.19 other_name: fancyapps-ui fancybox: name: '@fancyapps/ui' file: dist/fancybox/fancybox.umd.js - version: 5.0.17 + version: 5.0.19 other_name: fancyapps-ui medium_zoom: name: medium-zoom @@ -183,11 +183,11 @@ prismjs_autoloader: artalk_js: name: artalk file: dist/Artalk.js - version: 2.5.4 + version: 2.5.5 artalk_css: name: artalk file: dist/Artalk.css - version: 2.5.4 + version: 2.5.5 pace_js: name: pace-js other_name: pace @@ -202,12 +202,12 @@ docsearch_js: name: '@docsearch/js' other_name: docsearch-js file: dist/umd/index.js - version: 3.3.4 + version: 3.4.0 docsearch_css: name: '@docsearch/css' other_name: docsearch-css file: dist/style.css - version: 3.3.4 + version: 3.4.0 abcjs_basic_js: name: abcjs file: dist/abcjs-basic-min.js diff --git a/scripts/events/init.js b/scripts/events/init.js index 1bd0570d1..36304d894 100644 --- a/scripts/events/init.js +++ b/scripts/events/init.js @@ -1,21 +1,19 @@ hexo.extend.filter.register('before_generate', () => { // Get first two digits of the Hexo version number - const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1') - const logger = hexo.log + const { version, log, locals } = hexo + const hexoVer = version.replace(/(^.*\..*)\..*/, '$1') if (hexoVer < 5.3) { - logger.error('Please update Hexo to V5.3.0 or higher!') - logger.error('請把 Hexo 升級到 V5.3.0 或更高的版本！') + log.error('Please update Hexo to V5.3.0 or higher!') + log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！') process.exit(-1) } - if (hexo.locals.get) { - const data = hexo.locals.get('data') + if (locals.get) { + const data = locals.get('data') if (data && data.butterfly) { - logger.error( - " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' " - ) - logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ") + log.error("'butterfly.yml' is deprecated. Please use '_config.butterfly.yml'") + log.error("'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml'") process.exit(-1) } } diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 21539ce5e..57828126d 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -72,6 +72,30 @@ cursor: pointer transition: all .3s ease-out +.custom-hr + position: relative + margin: 40px auto + border: 2px dashed var(--hr-border) + + if hexo-config('hr_icon.enable') + width: calc(100% - 4px) + + &:hover + &:before + left: calc(95% - 20px) + + &:before + position: absolute + top: $hr-icon-top + left: 5% + z-index: 1 + color: var(--hr-before-color) + content: $hr-icon + font-size: 20px + line-height: 1 + transition: all 1s ease-in-out + @extend .fontawesomeIcon + maxWidth600() @media screen and (max-width: 600px) {block} diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index b9933fe74..8bb57c712 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -34,6 +34,8 @@ --headline-presudo: #a0a0a0 --scrollbar-color: $scrollbar-color --default-bg-color: $theme-color + --zoom-bg: #fff + --mark-bg: alpha($dark-black, .3) body position: relative @@ -96,30 +98,6 @@ h6 * box-sizing: border-box -hr - position: relative - margin: 40px auto - border: 2px dashed var(--hr-border) - - if hexo-config('hr_icon.enable') - width: calc(100% - 4px) - - &:hover - &:before - left: calc(95% - 20px) - - &:before - position: absolute - top: $hr-icon-top - left: 5% - z-index: 1 - color: var(--hr-before-color) - content: $hr-icon - font-size: 20px - line-height: 1 - transition: all 1s ease-in-out - @extend .fontawesomeIcon - .table-wrap overflow-x: scroll margin: 0 0 20px diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 55cbc8c1c..e398510bd 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -5,12 +5,12 @@ background-position: bottom background-size: cover - if hexo-config('footer_bg') != false + if hexo-config('footer_bg') != false && hexo-config('mask.footer') &:before position: absolute width: 100% height: 100% - background-color: alpha($dark-black, .5) + background-color: var(--mark-bg) content: '' #footer-wrap diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index ade0db37a..8870a524e 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -7,12 +7,13 @@ background-repeat: no-repeat transition: all .5s - &:not(.not-top-img):before - position: absolute - width: 100% - height: 100% - background-color: alpha($dark-black, .3) - content: '' + if hexo-config('mask.header') + &:not(.not-top-img):before + position: absolute + width: 100% + height: 100% + background-color: var(--mark-bg) + content: '' // index &.full_page @@ -97,9 +98,6 @@ +maxWidth768() height: 360px - &:before - background-color: alpha($dark-black, .5) - #post-info position: absolute bottom: 100px diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index a6c59cc36..2fa64a652 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -65,6 +65,9 @@ beautify() ul > li list-style-type: circle + + hr + @extend .custom-hr #article-container word-wrap: break-word @@ -156,14 +159,6 @@ beautify() else if hexo-config('beautify.field') == 'post' &.post-content beautify() - else - hr - margin: 20px 0 - border: 1px inset - width 100% - - &:before - content: none #post .tag_share diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 1ea63e9d9..20705f98f 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -82,15 +82,22 @@ if hexo-config('waline.bg') display: none // Mathjax -.mathjax-overflow +mjx-container overflow-x: auto overflow-y: hidden - -span.mathjax-overflow - display: inline-block - padding: 0 2px + padding-bottom: 4px max-width: 100% - vertical-align: bottom + + &[display] + display: block !important + min-width: auto !important + + &:not([display]) + display: inline-grid !important + +mjx-assistive-mml + right: 0 + bottom: 0 .aplayer color: $font-black diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 680ad3fd1..7a39ca500 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -38,10 +38,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) --scrollbar-color: lighten(#121212, 5) --timeline-bg: lighten(#121212, 5) + --zoom-bg: #121212 + --mark-bg: alpha($dark-black, .6) - #web_bg:before, - #footer:before, - #page-header:before + #web_bg:before position: absolute width: 100% height: 100% diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index baca44df0..ecb865a4e 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -54,8 +54,7 @@ if hexo-config('readmode') display: none #page-header.post-bg - background-color: transparent - background-image: none !important + background: none !important &:before opacity: 0 diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index 0be8e498b..32096a5d0 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -18,7 +18,7 @@ padding: 20px 5px +minWidth2000() - max-width: 1700px + max-width: 70% & > div:first-child:not(.recent-posts) @extend .cardHover diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 6beba3180..9269f9722 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -8,7 +8,7 @@ flex-direction: row align-items: center overflow: hidden - height: 18em + height: 16.8em +maxWidth768() flex-direction: column @@ -24,7 +24,7 @@ .post_cover overflow: hidden - width: 44% + width: 42% height: 100% +maxWidth768() @@ -42,7 +42,7 @@ & >.recent-post-info padding: 0 40px - width: 57% + width: 58% +maxWidth768() padding: 20px 20px 30px @@ -57,7 +57,7 @@ & > .article-title @extend .limit-more-line color: var(--text-highlight-color) - font-size: 1.72em + font-size: 1.55em line-height: 1.4 transition: all .2s ease-in-out -webkit-line-clamp: 2 @@ -71,7 +71,7 @@ & > .article-meta-wrap margin: 6px 0 color: $theme-meta-color - font-size: 90% + font-size: .9em & > .post-meta-date cursor: default diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 93d6ad890..669428b60 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -38,6 +38,10 @@ &:hover color: $search-color + + hr + margin: 20px auto + @extend .custom-hr #search-mask position: fixed @@ -47,4 +51,10 @@ left: 0 z-index: 1000 display: none - background: rgba($dark-black, .6) \ No newline at end of file + background: rgba($dark-black, .6) + +if hexo-config('algolia_search.enable') + @require 'algolia' + +if hexo-config('local_search.enable') + @require 'local-search' \ No newline at end of file diff --git a/source/css/index.styl b/source/css/index.styl index 07cfc78de..0cfec1f34 100644 --- a/source/css/index.styl +++ b/source/css/index.styl @@ -12,10 +12,4 @@ if hexo-config('css_prefix') @import '_mode/*' // search -if hexo-config('algolia_search.enable') - @import '_search/index' - @import '_search/algolia' - -if hexo-config('local_search') && hexo-config('local_search.enable') - @import '_search/index' - @import '_search/local-search' +@import '_search/index' \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index d68c51b55..303300d20 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -301,8 +301,7 @@ document.addEventListener('DOMContentLoaded', function () { let initTop = 0 let isChatShow = true const $header = document.getElementById('page-header') - const isChatBtnHide = typeof chatBtnHide === 'function' - const isChatBtnShow = typeof chatBtnShow === 'function' + const isChatBtn = typeof chatBtn !== 'undefined' const isShowPercent = GLOBAL_CONFIG.percent.rightside // 當滾動條小于 56 的時候 @@ -324,14 +323,14 @@ document.addEventListener('DOMContentLoaded', function () { if (currentTop > 56) { if (isDown) { if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible') - if (isChatBtnShow && isChatShow === true) { - chatBtnHide() + if (isChatBtn && isChatShow === true) { + window.chatBtn.hide() isChatShow = false } } else { if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible') - if (isChatBtnHide && isChatShow === false) { - chatBtnShow() + if (isChatBtn && isChatShow === false) { + window.chatBtn.show() isChatShow = true } } @@ -545,10 +544,12 @@ document.addEventListener('DOMContentLoaded', function () { saveToLocal.set('aside-status', saveStatus, 2) $htmlDom.toggle('hide-aside') }, - runMobileToc: () => { if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open() else window.mobileToc.close() + }, + toggleChatDisplay: () => { + window.chatBtnFn() } } @@ -573,6 +574,9 @@ document.addEventListener('DOMContentLoaded', function () { case 'hide-aside-btn': rightSideFn.hideAsideBtn() break + case 'chat-btn': + rightSideFn.toggleChatDisplay() + break default: break } diff --git a/source/js/utils.js b/source/js/utils.js index 253c8ad86..adff39ca8 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -186,10 +186,9 @@ const btf = { }, unwrap: el => { - const elParentNode = el.parentNode - if (elParentNode !== document.body) { - elParentNode.parentNode.insertBefore(el, elParentNode) - elParentNode.parentNode.removeChild(elParentNode) + const parent = el.parentNode + if (parent && parent !== document.body) { + parent.replaceChild(el, parent) } }, @@ -211,13 +210,7 @@ const btf = { 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 - }) - }) + mediumZoom(ele, { background: 'var(--zoom-bg)' }) } if (service === 'fancybox') {