diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index c7a86b3..0000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,52 +0,0 @@ - - - -## I want to create a new issue - - - -- [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html). -- [] Yes, I have read [Hexo-theme-butterfly Documentation](https://jerryc.me/posts/21cfbf15/). -- [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me. - -## Butterfly Information - - - -**Butterfly Version:** - - -**Platform:** - - -**Browser:** - -## Expected behavior - -## Actual behavior - - - - -## Steps to reproduce the behavior - -## Feature Request - - - - ---- - - \ No newline at end of file diff --git a/_config.yml b/_config.yml index 10c8756..8f60f54 100644 --- a/_config.yml +++ b/_config.yml @@ -30,7 +30,9 @@ code_word_wrap: false # copyright: Add the copyright information after copied content (複製的內容後面加上版權信息) copy: enable: true - copyright: false + copyright: + enable: false + limit_count: 50 # social settings (社交圖標設置) # formal: @@ -141,10 +143,12 @@ post_meta: date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示 categories: true # true or false 主頁是否顯示分類 tags: false # true or false 主頁是否顯示標籤 + label: true # true or false 顯示描述性文字 post: date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示 categories: true # true or false 文章頁是否顯示分類 tags: true # true or false 文章頁是否顯示標籤 + label: true # true or false 顯示描述性文字 # wordcount (字數統計) wordcount: @@ -242,8 +246,10 @@ addtoany: comments: # Up to two comments system, the first will be shown as default - # Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments use: + # - Valine + # - Disqus text: true # Display the comment name next to the button load_begin: false # The second comment system will auto load when visiting the website count: false # Dispaly comment count in top_img @@ -416,6 +422,10 @@ baidu_site_verification: # see http://zhanzhang.so.com/ qihu_site_verification: +# Yandex Webmaster tools verification setting +# see https://webmaster.yandex.com/ +yandex_site_verification: + # Beautify/Effect (美化/效果) # -------------------------------------- @@ -580,12 +590,17 @@ aside: card_author: enable: true description: + button: + icon: fab fa-github + text: Follow Me + link: https://github.com/xxxxxx card_announcement: enable: true content: This is my Blog card_recent_post: enable: true limit: 5 # if set 0 will show all + sort: date # date or updated card_categories: enable: true limit: 8 # if set 0 will show all @@ -685,6 +700,12 @@ note: # other # -------------------------------------- +# https://github.com/MoOx/pjax +pjax: true + +# Inject the css and script (aplayer/meting) +aplayerInject: true + # Snackbar (Toast Notification 彈窗) # https://github.com/polonel/SnackBar # position 彈窗位置 @@ -755,8 +776,10 @@ CDN: main: /js/main.js utils: /js/utils.js + # pjax + pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js + # comments - blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js @@ -776,7 +799,7 @@ CDN: algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css # math - mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML + mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css @@ -792,7 +815,7 @@ CDN: lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js - typed: https://cdn.jsdelivr.net/npm/typed.js + typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js # photo @@ -824,4 +847,4 @@ CDN: # aplayer aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js - meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js + meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js diff --git a/languages/default.yml b/languages/default.yml index 6c601af..df86004 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -24,7 +24,8 @@ post: created: Created updated: Updated wordcount: Word count - min2read: 'Reading time: %s min' + min2read: Reading time + min2read_unit: min page_pv: Post View comments: Comments copyright: @@ -61,7 +62,6 @@ aside: card_tags: Tags card_archives: Archives card_recent_post: Recent Post - card_bookmark: Bookmark card_webinfo: headline: Info article_name: Article diff --git a/languages/en.yml b/languages/en.yml index 6c601af..df86004 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -24,7 +24,8 @@ post: created: Created updated: Updated wordcount: Word count - min2read: 'Reading time: %s min' + min2read: Reading time + min2read_unit: min page_pv: Post View comments: Comments copyright: @@ -61,7 +62,6 @@ aside: card_tags: Tags card_archives: Archives card_recent_post: Recent Post - card_bookmark: Bookmark card_webinfo: headline: Info article_name: Article diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index d66990e..d49227b 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -24,7 +24,8 @@ post: created: 发表于 updated: 更新于 wordcount: 字数总计 - min2read: '阅读时长: %s 分钟' + min2read: 阅读时长 + min2read_unit: 分钟 page_pv: 阅读量 comments: 评论数 copyright: @@ -63,7 +64,6 @@ aside: card_tags: 标签 card_archives: 归档 card_recent_post: 最新文章 - card_bookmark: 加入书签 card_webinfo: headline: 网站资讯 article_name: 文章数目 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 0e73531..361e5d6 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -24,7 +24,8 @@ post: created: 發表於 updated: 更新於 wordcount: 字數總計 - min2read: '閱讀時長: %s 分鐘' + min2read: 閲讀時長 + min2read_unit: 分鐘 page_pv: 閱讀量 comments: 評論數 copyright: @@ -63,7 +64,6 @@ aside: card_tags: 標籤 card_archives: 歸檔 card_recent_post: 最新文章 - card_bookmark: 加入書籤 card_webinfo: headline: 網站資訊 article_name: 文章數目 diff --git a/layout/flink.pug b/layout/flink.pug index 178f683..5ed16e3 100644 --- a/layout/flink.pug +++ b/layout/flink.pug @@ -11,13 +11,14 @@ .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") if theme.lazyload.enable - img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) + img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) else 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= item.descr + span.flink-item-name= item.name + span.flink-item-desc(title=item.descr)= item.descr != page.content - if page.comments !== false - include includes/comments/index.pug + if page.comments !== false && theme.comments && theme.comments.use + - var commentsJsLoad = true + !=partial('includes/comments/index', {}, {cache:theme.fragment_cache}) diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index effa64e..e2a7e97 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -1,76 +1,90 @@ -script(src=url_for(theme.CDN.jquery)) -script(src=url_for(theme.CDN.utils)) -script(src=url_for(theme.CDN.main)) +div + script(src=url_for(theme.CDN.jquery)) + script(src=url_for(theme.CDN.utils)) + script(src=url_for(theme.CDN.main)) -if theme.translate && theme.translate.enable - script(src=url_for(theme.CDN.translate)) + if theme.translate && theme.translate.enable + script(src=url_for(theme.CDN.translate)) -if theme.medium_zoom - script(src=url_for(theme.CDN.medium_zoom)) + if theme.medium_zoom + script(src=url_for(theme.CDN.medium_zoom)) -if theme.fancybox - script(src=url_for(theme.CDN.fancybox)) + if theme.fancybox + script(src=url_for(theme.CDN.fancybox)) -include ./math/index.pug + if theme.fireworks && theme.fireworks.enable + script(src=url_for(theme.CDN.anime)) + script(src=url_for(theme.CDN.fireworks)) -if theme.fireworks && theme.fireworks.enable - script(src=url_for(theme.CDN.anime)) - script(src=url_for(theme.CDN.fireworks)) + if (theme.snackbar && theme.snackbar.enable) + script(src=url_for(theme.CDN.snackbar)) -if (theme.snackbar && theme.snackbar.enable) - script(src=url_for(theme.CDN.snackbar)) + if (theme.canvas_ribbon && theme.canvas_ribbon.enable) + include ./third-party/canvas-ribbon.pug -if (theme.canvas_ribbon && theme.canvas_ribbon.enable) - include ./third-party/canvas-ribbon.pug + if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable) + include ./third-party/canvas-ribbon-piao.pug -if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable) - include ./third-party/canvas-ribbon-piao.pug + if (theme.canvas_nest && theme.canvas_nest.enable) + include ./third-party/canvas-nest.pug -if (theme.canvas_nest && theme.canvas_nest.enable) - include ./third-party/canvas-nest.pug + if theme.activate_power_mode.enable + script(src=url_for(theme.CDN.activate_power_mode)) + script. + POWERMODE.colorful = #{theme.activate_power_mode.colorful}; + POWERMODE.shake = #{theme.activate_power_mode.shake}; + document.body.addEventListener('input', POWERMODE); -if theme.activate_power_mode.enable - script(src=url_for(theme.CDN.activate_power_mode)) - script. - POWERMODE.colorful = #{theme.activate_power_mode.colorful}; - POWERMODE.shake = #{theme.activate_power_mode.shake}; - document.body.addEventListener('input', POWERMODE); + if theme.instantpage + script(src=url_for(theme.CDN.instantpage) type="module" defer) -if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv - script(async src=url_for(theme.CDN.busuanzi)) + if theme.lazyload.enable + script(src=url_for(theme.CDN.lazyload) async) -if theme.instantpage - script(src=url_for(theme.CDN.instantpage) type="module" defer) + //- 鼠標特效 + if theme.click_heart + script(src=url_for(theme.CDN.click_heart)) -if theme.lazyload.enable - script(src=url_for(theme.CDN.lazyload) async) + if theme.ClickShowText && theme.ClickShowText.enable + script(src=url_for(theme.CDN.ClickShowText)) -//- 鼠標特效 -if theme.click_heart - script(src=url_for(theme.CDN.click_heart)) + if theme.pangu && theme.pangu.enable + include ./third-party/pangu.pug -if theme.ClickShowText && theme.ClickShowText.enable - script(src=url_for(theme.CDN.ClickShowText)) + //- search + if theme.algolia_search && theme.algolia_search.enable + script(src=url_for(theme.CDN.algolia_js)) + else if theme.local_search && theme.local_search.enable + script(src=url_for(theme.CDN.local_search)) -if theme.pangu && theme.pangu.enable - include ./third-party/pangu.pug + if theme.preloader + !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache}) -//- search -if theme.algolia_search && theme.algolia_search.enable - script(src=url_for(theme.CDN.algolia_js)) -else if theme.local_search && theme.local_search.enable - script(src=url_for(theme.CDN.local_search)) + !=partial('includes/chat/index', {}, {cache:theme.fragment_cache}) -//- mermaid -if theme.mermaid.enable - include ./math/mermaid.pug + .js-pjax + if is_home() && theme.subtitle.enable + include ./third-party/subtitle.pug -if is_home() - include ./head/subtitle.pug + include ./math/index.pug -!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + //- mermaid + if theme.mermaid.enable + include ./third-party/mermaid.pug -if theme.preloader - !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache}) + if commentsJsLoad + include ./comments/js.pug -!=partial('includes/chat/index', {}, {cache:theme.fragment_cache}) + if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv + script(async src=url_for(theme.CDN.busuanzi)) + + if theme.aplayerInject + if theme.pjax + include ./head/aplayer.pug + else if page.aplayer + include ./head/aplayer.pug + + if theme.pjax + include ./third-party/pjax.pug + + !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) diff --git a/layout/includes/chat/chatra.pug b/layout/includes/chat/chatra.pug index 0566392..f3ab498 100644 --- a/layout/includes/chat/chatra.pug +++ b/layout/includes/chat/chatra.pug @@ -11,11 +11,16 @@ script. if (d.head) d.head.appendChild(s); })(document, window, 'Chatra'); + + if (!{theme.chat_btn}) { - var chatBtn = document.getElementById("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 () { diff --git a/layout/includes/chat/daovoice.pug b/layout/includes/chat/daovoice.pug index dd0e047..3c6b064 100644 --- a/layout/includes/chat/daovoice.pug +++ b/layout/includes/chat/daovoice.pug @@ -13,10 +13,13 @@ script. daovoice('update'); if (isChatBtn) { - var chatBtn = document.getElementById("chat_btn") - chatBtn.addEventListener("click", function(){ - daovoice('show') - }); + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + daovoice('show') + }); + } + chatBtnFn() } else { if (!{theme.chat_hide_show}) { function chatBtnHide () { diff --git a/layout/includes/chat/gitter.pug b/layout/includes/chat/gitter.pug index 51cdc0a..64fc293 100644 --- a/layout/includes/chat/gitter.pug +++ b/layout/includes/chat/gitter.pug @@ -1,28 +1,25 @@ -//- https://sidecar.gitter.im/ -script. - var isChatBtn = !{theme.chat_btn} - - if (isChatBtn) { +if theme.chat_btn + script. ((window.gitter = {}).chat = {}).options = { room: '#{theme.gitter.room}', activationElement: '#chat_btn' }; - } else { + + script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer) + +else + script. ((window.gitter = {}).chat = {}).options = { room: '#{theme.gitter.room}', }; if (!{theme.chat_hide_show}) { - var gitterBtn = document.getElementsByClassName('gitter-open-chat-button') - function chatBtnHide () { - gitterBtn[0].style.display= 'none' + document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'none' } function chatBtnShow () { - gitterBtn[0].style.display= 'block' + document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block' } } - } - -script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer) \ No newline at end of file + script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer) diff --git a/layout/includes/chat/tidio.pug b/layout/includes/chat/tidio.pug index 90270a7..6b0097f 100644 --- a/layout/includes/chat/tidio.pug +++ b/layout/includes/chat/tidio.pug @@ -2,37 +2,39 @@ script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async) if theme.chat_btn script. - (function() { - function onTidioChatApiReady() { + function onTidioChatApiReady() { + window.tidioChatApi.hide(); + window.tidioChatApi.on("close", function() { 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); - } + }); + } + 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() + else if theme.chat_hide_show script. function chatBtnHide () { if (window.tidioChatApi) { - window.tidioChatApi.hide(); - //- document.getElementById('tidio-chat').style.display= 'none' + //- window.tidioChatApi.hide(); + document.getElementById('tidio-chat').style.display= 'none' } } function chatBtnShow () { if (window.tidioChatApi) { - window.tidioChatApi.show(); - //- document.getElementById('tidio-chat').style.display= 'block' + //- window.tidioChatApi.show(); + document.getElementById('tidio-chat').style.display= 'block' } } diff --git a/layout/includes/comments/disqus.pug b/layout/includes/comments/disqus.pug index 679b170..71bdcc3 100644 --- a/layout/includes/comments/disqus.pug +++ b/layout/includes/comments/disqus.pug @@ -1,20 +1,29 @@ -#disqus_thread script. function loadDisqus () { var disqus_config = function () { - this.page.url = '!{ page.permalink }'; - this.page.identifier = '!{ page.path }'; - this.page.title = '!{ page.title }'; + this.page.url = '!{ page.permalink }' + this.page.identifier = '!{ page.path }' + this.page.title = '!{ page.title }' }; - var d = document, s = d.createElement('script'); - s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js'; - s.setAttribute('data-timestamp', +new Date()); - (d.head || d.body).appendChild(s); + if (window.DISQUS) { + DISQUS.reset({ + reload: true, + config: disqus_config + }) + } else { + (function() { + var d = document, s = d.createElement('script') + s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js' + s.setAttribute('data-timestamp', +new Date()) + s.setAttribute('data-timestamp', +new Date()); + (d.head || d.body).appendChild(s); + })(); + } } if ('!{defaultComment}' === 'Disqus' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadDisqus) + loadDisqus() } else { function loadOtherComment () { @@ -22,6 +31,7 @@ script. } } + if is_post() && theme.comments.count && defaultComment === 'Disqus' script. function getDisqusCount() { @@ -31,4 +41,4 @@ if is_post() && theme.comments.count && defaultComment === 'Disqus' (d.head || d.body).appendChild(s); } - window.addEventListener('load', getDisqusCount, false); \ No newline at end of file + getDisqusCount() \ No newline at end of file diff --git a/layout/includes/comments/disqusjs.pug b/layout/includes/comments/disqusjs.pug index 4a1eb50..26524b2 100644 --- a/layout/includes/comments/disqusjs.pug +++ b/layout/includes/comments/disqusjs.pug @@ -1,13 +1,15 @@ -#disqus_thread script. function loadDisqusjs () { - const ele = document.createElement('link') - ele.rel = 'stylesheet' - ele.href= '!{url_for(theme.CDN.disqusjs_css)}' - document.getElementsByTagName('head')[0].appendChild(ele) + function addDisqusjsCSS () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{url_for(theme.CDN.disqusjs_css)}' + document.getElementsByTagName('head')[0].appendChild(ele) + } - loadScript('!{url_for(theme.CDN.disqusjs)}', function() { - var dsqjs = new DisqusJS({ + function initDiqusjs () { + window.DISQUS = null + new DisqusJS({ shortname: '!{theme.disqusjs.shortname}', siteName: '!{theme.disqusjs.siteName}', identifier: '!{ page.path }', @@ -19,11 +21,18 @@ script. admin: '!{theme.disqusjs.admin}', adminLabel: '!{theme.disqusjs.adminLabel}' }); - }) + } + + if (window.disqusjsload) initDiqusjs() + else { + addDisqusjsCSS() + $.getScript('!{url_for(theme.CDN.disqusjs)}', initDiqusjs) + window.disqusjsload = true + } } if ('!{defaultComment}' === 'Disqusjs' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadDisqusjs) + loadDisqusjs() } else { function loadOtherComment () { @@ -40,4 +49,4 @@ if is_post() && theme.comments.count && defaultComment === 'Disqusjs' s.id = 'dsq-count-scr'; (d.head || d.body).appendChild(s); } - window.addEventListener('load', getDisqusCount, false); + getDisqusCount() diff --git a/layout/includes/comments/facebook_comments.pug b/layout/includes/comments/facebook_comments.pug index d1bda44..61b5013 100644 --- a/layout/includes/comments/facebook_comments.pug +++ b/layout/includes/comments/facebook_comments.pug @@ -1,10 +1,4 @@ #fb-root -.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' - data-href=urlNoIndex() - data-numposts= theme.facebook_comments.pageSize || 10 - data-order-by= theme.facebook_comments.order_by || 'social' - data-width="100%") - script. function loadFBComent () { let ele = document.createElement('script') @@ -13,10 +7,15 @@ script. ele.setAttribute('defer', 'true') ele.setAttribute('crossorigin', 'anonymous') document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele) + + var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow) + + if (typeof FB === 'object') FB.XFBML.parse() } if ('!{defaultComment}' === 'Facebook Comments' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadFBComent) + loadFBComent() } else { function loadOtherComment () { @@ -24,7 +23,3 @@ script. } } -if theme.darkmode.enable - script. - var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' - document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow) diff --git a/layout/includes/comments/gitalk.pug b/layout/includes/comments/gitalk.pug index 6ee8270..ef6c247 100644 --- a/layout/includes/comments/gitalk.pug +++ b/layout/includes/comments/gitalk.pug @@ -1,21 +1,20 @@ -#gitalk-container -script(src=url_for(theme.CDN.blueimp_md5)) - script. function loadGitalk () { - const ele = document.createElement('link') - ele.rel = 'stylesheet' - ele.href= '!{url_for(theme.CDN.gitalk_css)}' - document.getElementsByTagName('head')[0].appendChild(ele) + function addGitalkSource () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{url_for(theme.CDN.gitalk_css)}' + document.getElementsByTagName('head')[0].appendChild(ele) + } - loadScript('!{url_for(theme.CDN.gitalk)}', function () { + function initGitalk () { var gitalk = new Gitalk({ clientID: '!{theme.gitalk.client_id}', clientSecret: '!{theme.gitalk.client_secret}', repo: '!{theme.gitalk.repo}', owner: '!{theme.gitalk.owner}', admin: ['!{theme.gitalk.admin}'], - id: md5(decodeURI(location.pathname)), + id: '!{md5(page.path)}', language: '!{theme.gitalk.language}', perPage: !{theme.gitalk.perPage}, distractionFreeMode: !{theme.gitalk.distractionFreeMode}, @@ -24,7 +23,13 @@ script. updateCountCallback: commentCount }) gitalk.render('gitalk-container') - }) + } + + if (typeof Gitalk === 'function') initGitalk() + else { + addGitalkSource() + $.getScript('!{url_for(theme.CDN.gitalk)}', initGitalk) + } function commentCount(n){ try { @@ -36,7 +41,7 @@ script. } if ('!{defaultComment}' === 'Gitalk' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadGitalk) + loadGitalk() } else { function loadOtherComment () { @@ -45,3 +50,4 @@ script. } + diff --git a/layout/includes/comments/index.pug b/layout/includes/comments/index.pug index 9c098a9..45e3268 100644 --- a/layout/includes/comments/index.pug +++ b/layout/includes/comments/index.pug @@ -1,36 +1,38 @@ -if theme.comments && theme.comments.use - - const defaultComment = theme.comments.use[0] - hr - #post-comment - .comment-head - .comment-headling - i.fas.fa-comments.fa-fw - span= ' ' + _p('comment') - - if theme.comments.use.length > 1 - .comment-switch - span.first-comment=defaultComment - label - input#switch-comments-btn(type="checkbox") - span.slider - span.second-comment=theme.comments.use[1] +- let defaultComment = theme.comments.use[0] +hr +#post-comment + .comment-head + .comment-headling + i.fas.fa-comments.fa-fw + span= ' ' + _p('comment') + + if theme.comments.use.length > 1 + .comment-switch + span.first-comment=defaultComment + label + input#switch-comments-btn(type="checkbox") + span.slider + span.second-comment=theme.comments.use[1] - .comment-wrap - each name, index in theme.comments.use - div(class=`comments-items-${index+1}` data-name=`${name}`) - case name - when 'Disqus' - include ./disqus.pug - when 'Valine' - include ./valine.pug - when 'Disqusjs' - include ./disqusjs.pug - when 'Livere' - include ./livere.pug - when 'Gitalk' - include ./gitalk.pug - when 'Utterances' - include ./utterances.pug - when 'Facebook Comments' - include ./facebook_comments.pug \ No newline at end of file + .comment-wrap + each name in theme.comments.use + div + case name + when 'Disqus' + #disqus_thread + when 'Valine' + #vcomment.vcomment + when 'Disqusjs' + #disqus_thread + when 'Livere' + #lv-container(data-id="city" data-uid=theme.livere.uid) + when 'Gitalk' + #gitalk-container + when 'Utterances' + #utterances-wrap + when 'Facebook Comments' + .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' + data-numposts= theme.facebook_comments.pageSize || 10 + data-order-by= theme.facebook_comments.order_by || 'social' + data-width="100%") diff --git a/layout/includes/comments/js.pug b/layout/includes/comments/js.pug new file mode 100644 index 0000000..7892f98 --- /dev/null +++ b/layout/includes/comments/js.pug @@ -0,0 +1,17 @@ +- let defaultComment = theme.comments.use[0] +each name in theme.comments.use + case name + when 'Disqus' + include ./disqus.pug + when 'Valine' + include ./valine.pug + when 'Disqusjs' + include ./disqusjs.pug + when 'Livere' + include ./livere.pug + when 'Gitalk' + include ./gitalk.pug + when 'Utterances' + include ./utterances.pug + when 'Facebook Comments' + include ./facebook_comments.pug \ No newline at end of file diff --git a/layout/includes/comments/livere.pug b/layout/includes/comments/livere.pug index 9ba04a9..d763a54 100644 --- a/layout/includes/comments/livere.pug +++ b/layout/includes/comments/livere.pug @@ -1,21 +1,23 @@ -#lv-container(data-id="city" data-uid=theme.livere.uid) - script. - function loadlivere () { - (function(d, s) { - var j, e = d.getElementsByTagName(s)[0]; - if (typeof LivereTower === 'function') { return; } - j = d.createElement(s); - j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; - j.async = true; - e.parentNode.insertBefore(j, e); - })(document, 'script'); - } +script. + function loadlivere () { + (function(d, s) { + var j, e = d.getElementsByTagName(s)[0]; + if (typeof LivereTower === 'function') { return; } + j = d.createElement(s); + j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; + j.async = true; + e.parentNode.insertBefore(j, e); + })(document, 'script'); + } - if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadlivere) + if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) { + loadlivere() + } + else { + function loadOtherComment () { + loadlivere() } - else { - function loadOtherComment () { - loadlivere() - } - } \ No newline at end of file + } + +noscript. + Please activate JavaScript for write a comment in LiveRe \ No newline at end of file diff --git a/layout/includes/comments/utterances.pug b/layout/includes/comments/utterances.pug index 6876a85..5f6c9cb 100644 --- a/layout/includes/comments/utterances.pug +++ b/layout/includes/comments/utterances.pug @@ -1,36 +1,36 @@ -#utterances-wrap - script. - function loadUtterances () { - let ele = document.createElement('script') - ele.setAttribute('id', 'utterances_comment') - ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}') - ele.setAttribute('repo', '!{theme.utterances.repo}') - ele.setAttribute('issue-term', '!{theme.utterances.issue_term}') - let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' - ele.setAttribute('theme', nowTheme) - ele.setAttribute('crossorigin', 'anonymous') - ele.setAttribute('async', 'true') - document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele) - } + if (document.getElementById('utterances-wrap')) { + function loadUtterances () { + let ele = document.createElement('script') + ele.setAttribute('id', 'utterances_comment') + ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}') + ele.setAttribute('repo', '!{theme.utterances.repo}') + ele.setAttribute('issue-term', '!{theme.utterances.issue_term}') + let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' + ele.setAttribute('theme', nowTheme) + ele.setAttribute('crossorigin', 'anonymous') + ele.setAttribute('async', 'true') + document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele) + } - if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadUtterances) - } - else { - function loadOtherComment () { + if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) { loadUtterances() } + else { + function loadOtherComment () { + loadUtterances() + } + } } if theme.darkmode.enable script. function utterancesTheme () { - var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' - const message = { - type: 'set-theme', - theme: theme - }; - const iframe = document.querySelector('.utterances-frame'); - iframe.contentWindow.postMessage(message, 'https://utteranc.es'); + var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' + const message = { + type: 'set-theme', + theme: theme + }; + const iframe = document.querySelector('.utterances-frame'); + iframe.contentWindow.postMessage(message, 'https://utteranc.es'); } diff --git a/layout/includes/comments/valine.pug b/layout/includes/comments/valine.pug index a3736fb..fb8700a 100644 --- a/layout/includes/comments/valine.pug +++ b/layout/includes/comments/valine.pug @@ -2,10 +2,9 @@ if site.data.valine - emojiMaps = JSON.stringify(site.data.valine) -#vcomment.vcomment script. function loadvaline () { - var requestSetting = function (from,set) { + function requestSetting (from, set) { var from = from var setting = set.split(',').filter(function(item){ return from.indexOf(item) > -1 @@ -22,6 +21,7 @@ script. el:'#vcomment', appId: '#{theme.valine.appId}', appKey: '#{theme.valine.appKey}', + path: window.location.pathname, placeholder: '#{theme.valine.placeholder}', avatar: '#{theme.valine.avatar}', meta: guestInfo, @@ -35,11 +35,13 @@ script. requiredFields: requiredFields }); } - loadScript('!{url_for(theme.CDN.valine)}', initValine) + + if (typeof window.valine ==='object') initValine() + else $.getScript('!{url_for(theme.CDN.valine)}', initValine) } if ('!{defaultComment}' === 'Valine' || !{theme.comments.load_begin}) { - window.addEventListener('load', loadvaline) + loadvaline() } else { function loadOtherComment () { diff --git a/layout/includes/head.pug b/layout/includes/head.pug index bb40a6c..ea3808f 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -35,10 +35,6 @@ if theme.disable_baidu_transformation meta(http-equiv="Cache-Control" content="no-transform") meta(http-equiv="Cache-Control" content="no-siteapp") -if theme.douban - if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict])) - meta(name="referrer" content="no-referrer") - //- 預解析 !=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache}) @@ -48,6 +44,11 @@ if theme.douban //- Open_Graph include ./head/Open_Graph.pug +if theme.facebook_comments.app_id + meta(property="fb:app_id" content=theme.facebook_comments.app_id ) +if theme.facebook_comments.user_id + meta(property="fb:admins" content=theme.facebook_comments.user_id) + //- PWA if (theme.pwa && theme.pwa.enable) !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache}) @@ -65,19 +66,10 @@ if theme.fancybox if (theme.snackbar && theme.snackbar.enable) link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) -if is_post() - if(page.prev) - link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) ) - if(page.next) - link(rel="next" title=page.next.title href=url_for(page.next.permalink) ) - if theme.algolia_search.enable - link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css)) + link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css)) script(src=url_for(theme.CDN.algolia_search) defer) -//- comment css -include ./head/comment.pug - //- google_adsense !=partial('includes/head/google_adsense', {}, {cache:theme.fragment_cache}) @@ -96,5 +88,3 @@ include ./head/noscript.pug !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)}) -if page.aplayer - include ./head/aplayer.pug \ No newline at end of file diff --git a/layout/includes/head/analytics.pug b/layout/includes/head/analytics.pug index 768b3e6..01b0469 100644 --- a/layout/includes/head/analytics.pug +++ b/layout/includes/head/analytics.pug @@ -9,14 +9,12 @@ if theme.baidu_analytics })(); if theme.google_analytics + script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`) script. - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', '!{theme.google_analytics}', 'auto'); - ga('send', 'pageview'); + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', '!{theme.google_analytics}'); if theme.tencent_analytics - script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8") + script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8" data-pjax) diff --git a/layout/includes/head/comment.pug b/layout/includes/head/comment.pug deleted file mode 100644 index caa2f6d..0000000 --- a/layout/includes/head/comment.pug +++ /dev/null @@ -1,5 +0,0 @@ -if page.comments !== false && theme.comments.use && theme.comments.use.includes('Facebook Comments') - if theme.facebook_comments.app_id - meta(property="fb:app_id" content=theme.facebook_comments.app_id ) - if theme.facebook_comments.user_id - meta(property="fb:admins" content=theme.facebook_comments.user_id) \ No newline at end of file diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 320d2a0..3ad380a 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -36,14 +36,15 @@ }) } - var copyright = 'undefined' ; - if (theme.copy.enable && theme.copy.copyright){ - copyright = JSON.stringify({ + var copyright = 'undefined'; + if (theme.copy.enable && theme.copy.copyright.enable){ + copyright = JSON.stringify({ + limitCount: theme.copy.copyright.limit_count, languages: { - author: _p("copy_copyright.author") + ': ' + config.author, - link: _p("copy_copyright.link") + ': ', - source: _p("copy_copyright.source") + ': ' + config.title, - info: _p("copy_copyright.info") + author: _p("copy_copyright.author") + ': ' + config.author, + link: _p("copy_copyright.link") + ': ', + source: _p("copy_copyright.source") + ': ' + config.title, + info: _p("copy_copyright.info") } }) } diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug index 764f80f..c896b48 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -8,11 +8,12 @@ const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true ) - -script. - var GLOBAL_CONFIG_SITE = { - isPost: !{is_post()}, - isHome: !{is_home()}, - isHighlightShrink: !{isHighlightShrink}, - isSidebar: !{showToc}, - postUpdate: '!{full_date(page.updated)}' - } +script#config_change + . + var GLOBAL_CONFIG_SITE = { + isPost: !{is_post()}, + isHome: !{is_home()}, + isHighlightShrink: !{isHighlightShrink}, + isSidebar: !{showToc}, + postUpdate: '!{full_date(page.updated)}' + } diff --git a/layout/includes/head/noscript.pug b/layout/includes/head/noscript.pug index 761826c..bf995d7 100644 --- a/layout/includes/head/noscript.pug +++ b/layout/includes/head/noscript.pug @@ -3,7 +3,7 @@ noscript. #nav { opacity: 1 } - .justified-gallery img{ + .justified-gallery img { opacity: 1 } \ No newline at end of file diff --git a/layout/includes/head/site_verification.pug b/layout/includes/head/site_verification.pug index 969883b..cae5742 100644 --- a/layout/includes/head/site_verification.pug +++ b/layout/includes/head/site_verification.pug @@ -9,3 +9,6 @@ if theme.baidu_site_verification if theme.qihu_site_verification meta(name="360-site-verification" content=theme.qihu_site_verification) + +if theme.yandex_site_verification + meta(name="yandex-verification" content=theme.yandex_site_verification) \ No newline at end of file diff --git a/layout/includes/head/subtitle.pug b/layout/includes/head/subtitle.pug deleted file mode 100644 index 8f73b82..0000000 --- a/layout/includes/head/subtitle.pug +++ /dev/null @@ -1,130 +0,0 @@ -if theme.subtitle.enable - - var source = theme.subtitle.source - - var subtitleEffect = theme.subtitle.effect - - if subtitleEffect - script(src=url_for(theme.CDN.typed)) - - if source == '1' - script. - var subtitleType = function () { - var subtitleEffect = !{ subtitleEffect } - fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',) - .then(function (res) { - return res.json() - }) - .then(function (data) { - if (subtitleEffect) { - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var both = sub.unshift(data.text) - var typed = new Typed('#subtitle', { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50, - }) - } else { - document.getElementById('subtitle').innerHTML = data.text - } - }) - .catch(function (err) { - console.error(err) - }) - } - window.addEventListener('load', subtitleType) - - else if source == '2' - script. - var subtitleType = function () { - var subtitleEffect = !{ subtitleEffect } - fetch('https://v1.hitokoto.cn') - .then(function (res) { - return res.json() - }) - .then(function (data) { - if (subtitleEffect) { - 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', { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50, - }) - } else { - document.getElementById('subtitle').innerHTML = data.hitokoto - } - }) - .catch(function (err) { - console.error(err) - }) - } - window.addEventListener('load', subtitleType) - - else if source == '3' - script. - var subtitleType = function () { - loadScript('http://yijuzhan.com/api/word.php?m=js', function () { - var subtitleEffect = !{ subtitleEffect } - var con = str[0] - if (subtitleEffect) { - 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', { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50, - }) - } else { - document.getElementById('subtitle').innerHTML = con - } - }) - } - window.addEventListener('load', subtitleType) - - else if source == '4' - script. - var subtitleType = function () { - loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () { - var subtitleEffect = !{ subtitleEffect } - jinrishici.load(function (result) { - if (subtitleEffect) { - 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', { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50, - }) - } else { - document.getElementById('subtitle').innerHTML = result.data.content - } - }) - } - ) - } - window.addEventListener('load', subtitleType) - - else - script. - var subtitleEffect = !{subtitleEffect} - if (subtitleEffect) { - var typed = new Typed("#subtitle", { - strings: "!{theme.subtitle.sub}".split(","), - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }) - } else { - document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}' - } diff --git a/layout/includes/header/menu_item.pug b/layout/includes/header/menu_item.pug index f029ad0..bb0d3d1 100644 --- a/layout/includes/header/menu_item.pug +++ b/layout/includes/header/menu_item.pug @@ -10,9 +10,9 @@ .menus_item a.site-page if label.split('||')[1] - i.fa-fw(class=trim(label.split('||')[1]) ) + i.fa-fw(class=trim(label.split('||')[1])) span=' '+ trim(label.split('||')[0]) - i.fas.fa-chevron-down.menus-expand + i.fas.fa-chevron-down.expand ul.menus_item_child each i in value li diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index a412631..8160e96 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -5,87 +5,79 @@ #post-meta .meta-firstline if (theme.post_meta.post.date_type) - if (theme.post_meta.post.date_type === 'both') - time.post-meta__date - span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date)) - i.far.fa-calendar-alt.fa-fw - =' '+_p('post.created')+' '+date(page.date, config.date_format) - span.post-meta__separator | - span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated)) - i.fas.fa-history.fa-fw - =' '+_p('post.updated')+' '+date(page.updated, config.date_format) - else - - var data_type_update = theme.post_meta.post.date_type === 'updated' - - var date_type = data_type_update ? 'updated' : 'date' - - var date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt' - - var data_info = data_type_update ? _p('post.updated') : _p('post.created') - time.post-meta__date(title=data_info + ' ' + full_date(page[date_type])) - i.fa-fw(class=date_icon) - =' ' + data_info + ' ' + date(page[date_type], config.date_format) - + span.post-meta-date + if (theme.post_meta.post.date_type === 'both') + i.far.fa-calendar-alt.fa-fw.post-meta-icon + span.post-meta-label= _p('post.created') + time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format) + span.post-meta-separator | + i.fas.fa-history.fa-fw.post-meta-icon + span.post-meta-label= _p('post.updated') + time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format) + else + - let data_type_update = theme.post_meta.post.date_type === 'updated' + - let date_type = data_type_update ? 'updated' : 'date' + - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt' + - let data_info = data_type_update ? _p('post.updated') : _p('post.created') + i.fa-fw.post-meta-icon(class=date_icon) + span.post-meta-label= data_info + time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format) if (theme.post_meta.post.categories && page.categories.data.length > 0) - span.post-meta__categories + span.post-meta-categories if (theme.post_meta.post.date_type) - span.post-meta__separator | + span.post-meta-separator | each item, index in page.categories.data - i.fas.fa-inbox.fa-fw.post-meta__icon - a(href=url_for(item.path)).post-meta__categories #[=item.name] + i.fas.fa-inbox.fa-fw.post-meta-icon + a(href=url_for(item.path)).post-meta-categories #[=item.name] if (index < page.categories.data.length - 1) - i.fas.fa-angle-right.post-meta__separator + i.fas.fa-angle-right.post-meta-separator .meta-secondline - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read) if (postWordcount) + span.post-meta-separator | span.post-meta-wordcount if theme.wordcount.post_wordcount - i.far.fa-file-word.fa-fw.post-meta__icon - span= _p('post.wordcount') + ':' + i.far.fa-file-word.fa-fw.post-meta-icon + span.post-meta-label= _p('post.wordcount') + ':' span.word-count= wordcount(page.content) if theme.wordcount.min2read - span.post-meta__separator | + span.post-meta-separator | if theme.wordcount.min2read - i.far.fa-clock.fa-fw.post-meta__icon - span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160})) + i.far.fa-clock.fa-fw.post-meta-icon + span.post-meta-label= _p('post.min2read') + ':' + span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit') - .meta-thirdline - span.post-meta-pv-cv - if (postWordcount && theme.busuanzi.page_pv) - span.post-meta__separator | - if theme.busuanzi.page_pv - i.far.fa-eye.fa-fw.post-meta__icon - span=_p('post.page_pv') + ':' + if theme.busuanzi.page_pv + span.post-meta-separator | + span.post-meta-pv-cv + i.far.fa-eye.fa-fw.post-meta-icon + span.post-meta-label=_p('post.page_pv') + ':' span#busuanzi_value_page_pv if page.comments !== false && theme.comments.use && theme.comments.count - span.post-meta-commentcount - - - let whichCount = theme.comments.use[0] - if whichCount === 'Disqus' || whichCount === 'Disqusjs' - if (postWordcount || theme.busuanzi.page_pv) - span.post-meta__separator | - i.far.fa-comments.fa-fw.post-meta__icon - span= _p('post.comments') + ':' - span.disqus-comment-count.comment-count - a(href=full_url_for(page.path) + '#disqus_thread') - else if whichCount === 'Valine' - if (postWordcount || theme.busuanzi.page_pv) - span.post-meta__separator | - i.far.fa-comments.fa-fw.post-meta__icon - span= _p('post.comments') + ':' - a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") - span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount") - else if whichCount === 'Gitalk' - if (postWordcount || theme.busuanzi.page_pv) - span.post-meta__separator | - i.far.fa-comments.fa-fw.post-meta__icon - span= _p('post.comments') + ':' - a(href=url_for(page.path) + '#post-comment') - span.gitalk-comment-count.comment-count - else if whichCount === 'Facebook Comments' - if (postWordcount || theme.busuanzi.page_pv) - span.post-meta__separator | - i.far.fa-comments.fa-fw.post-meta__icon - span= _p('post.comments') + ':' - a.comment-count(href=url_for(page.path) + '#post-comment') - span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file + - var whichCount = theme.comments.use[0] + if whichCount !== 'Livere' && whichCount !== 'Utterances' + span.post-meta-separator | + span.post-meta-commentcount + if whichCount === 'Disqus' || whichCount === 'Disqusjs' + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + span.disqus-comment-count.comment-count + a(href=full_url_for(page.path) + '#disqus_thread') + else if whichCount === 'Valine' + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") + span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount") + else if whichCount === 'Gitalk' + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + a(href=url_for(page.path) + '#post-comment') + span.gitalk-comment-count.comment-count + else if whichCount === 'Facebook Comments' + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + a.comment-count(href=url_for(page.path) + '#post-comment') + span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 5eb8158..7fa71cc 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -15,13 +15,12 @@ html(lang=config.language data-theme=theme.display_mode) !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache}) - include ./sidebar.pug - #body-wrap(class=pageHighlightShrink) if theme.background - var is_photo = theme.background.startsWith('url') ? 'photo':'color' #web_bg(data-type=is_photo) + include ./sidebar.pug include ./header/index.pug if (!is_post()) diff --git a/layout/includes/math/mathjax.pug b/layout/includes/math/mathjax.pug index a28d1c0..b2b0747 100644 --- a/layout/includes/math/mathjax.pug +++ b/layout/includes/math/mathjax.pug @@ -1,27 +1,45 @@ -script(type="text/x-mathjax-config"). - MathJax.Hub.Config({ - tex2jax: { - inlineMath: [ ['$','$'], ["\\(","\\)"] ], - processEscapes: true, - skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] - }, - CommonHTML: { - linebreaks: { automatic: true, width: "90% container" } - }, - "HTML-CSS": { - linebreaks: { automatic: true, width: "90% container" } - }, - "SVG": { - linebreaks: { automatic: true, width: "90% container" } - } - }); +//- Mathjax 3 +//- http://docs.mathjax.org/en/latest/upgrading/v2.html#changes-in-the-mathjax-api +//- https://github.com/mathjax/MathJax/issues/2209 +//- http://docs.mathjax.org/en/latest/options/input/tex.html#the-configuration-block +//- http://docs.mathjax.org/en/latest/web/typeset.html#resetting-automatic-equation-numbering -script(type="text/x-mathjax-config"). - MathJax.Hub.Queue(function() { - var all = MathJax.Hub.getAllJax(), i; - for (i=0; i < all.length; i += 1) { - all[i].SourceElement().parentNode.className += ' has-jax'; +script. + if (!window.MathJax) { + window.MathJax = { + loader: { + source: { + '[tex]/amsCd': '[tex]/amscd' + } + }, + tex: { + inlineMath: [ ['$','$'], ["\\(","\\)"]], + tags: 'ams' + }, + options: { + renderActions: { + findScript: [10, doc => { + for (const node of document.querySelectorAll('script[type^="math/tex"]')) { + const display = !!node.type.match(/; *mode=display/) + const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display) + const text = document.createTextNode('') + node.parentNode.replaceChild(text, node) + math.start = {node: text, delim: '', n: 0} + math.end = {node: text, delim: '', n: 0} + doc.math.push(math) + } + }, ''] + } + } } - }); - -script(src=theme.CDN.mathjax) \ No newline at end of file + + var script = document.createElement('script') + script.src = '!{theme.CDN.mathjax}' + script.id = 'MathJax-script' + script.async = true + document.head.appendChild(script) + } else { + MathJax.startup.document.state(0) + MathJax.texReset() + MathJax.typeset() + } \ No newline at end of file diff --git a/layout/includes/math/mermaid.pug b/layout/includes/math/mermaid.pug deleted file mode 100644 index 7984358..0000000 --- a/layout/includes/math/mermaid.pug +++ /dev/null @@ -1,8 +0,0 @@ -script. - if (document.getElementsByClassName('mermaid').length) { - loadScript('!{theme.CDN.mermaid}',function () { - mermaid.initialize({ - theme: '!{theme.mermaid.theme}', - }) - }) - } \ No newline at end of file diff --git a/layout/includes/mixins/article-sort.pug b/layout/includes/mixins/article-sort.pug index 22b35a2..c2f1b5e 100644 --- a/layout/includes/mixins/article-sort.pug +++ b/layout/includes/mixins/article-sort.pug @@ -2,19 +2,22 @@ mixin articleSort(posts) .article-sort - var year - posts.each(function (article) { - - var tempYear = date(article.date, 'YYYY') - - var no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : '' + - let tempYear = date(article.date, 'YYYY') + - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : '' + - let title = article.title || _p('no_title') if tempYear !== year - year = tempYear .article-sort-item.year= year .article-sort-item(class=no_cover) if article.cover && theme.cover.archives_enable - .article-sort-img - a.article-sort-item__img(href=url_for(article.path)) - img(src=url_for(article.cover) alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'`) - .article-sort-post - a.article-sort-item__post(href=url_for(article.path)) + a.article-sort-item-img(href=url_for(article.path) title=title) + if theme.lazyload.enable + img(data-lazy-src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`) + else + img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`) + .article-sort-item-info + .article-sort-item-time i.far.fa-calendar-alt - time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format) - .article-sort-item__title= article.title || 'No Title' + time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format) + a.article-sort-item-title(href=url_for(article.path) title=title)= title - }) \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index e9455d0..af16eaf 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -1,16 +1,16 @@ mixin postUI(posts) each article , index in page.posts.data .recent-post-item - - var link = article.link || article.path - - var title = article.title || _p('no_title') - - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' - - var post_cover = article.cover - - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - let link = article.link || article.path + - let title = article.title || _p('no_title') + - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' + - let post_cover = article.cover + - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' if post_cover && theme.cover.index_enable .post_cover(class=leftOrRight) a(href=url_for(link) title=title) if theme.lazyload.enable - img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) + img.post_bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) else img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) .recent-post-info(class=no_cover) @@ -19,26 +19,26 @@ mixin postUI(posts) if (is_home() && (article.top || article.sticky > 0)) span.article-meta i.fas.fa-thumbtack.article-meta__icon.sticky - span.sticky= _p('sticky') + span.sticky.article-meta-label= _p('sticky') span.article-meta__separator | if (theme.post_meta.page.date_type) - if (theme.post_meta.page.date_type === 'both') - time.post-meta__date - span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date)) - i.far.fa-calendar-alt - =date(article.date, config.date_format) + span.post-meta-date + if (theme.post_meta.page.date_type === 'both') + i.far.fa-calendar-alt + span.article-meta-label= _p('post.created') + time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) span.article-meta__separator | - span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated)) - i.fas.fa-history - =date(article.updated, config.date_format) - else - - var data_type_updated = theme.post_meta.page.date_type === 'updated' - - var date_type = data_type_updated ? 'updated' : 'date' - - var date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt' - - var date_title = data_type_updated ? _p('post.updated') : _p('post.created') - time.post-meta__date(title=date_title + ' ' + full_date(article[date_type])) + i.fas.fa-history + span.article-meta-label= _p('post.updated') + time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format) + else + - let data_type_updated = theme.post_meta.page.date_type === 'updated' + - let date_type = data_type_updated ? 'updated' : 'date' + - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt' + - let date_title = data_type_updated ? _p('post.updated') : _p('post.created') i(class=date_icon) - =date(article[date_type], config.date_format) + span.article-meta-label=date_title + time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format) if (theme.post_meta.page.categories && article.categories.data.length > 0) span.article-meta span.article-meta__separator | diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug index 0783343..ab09c1a 100644 --- a/layout/includes/pagination.pug +++ b/layout/includes/pagination.pug @@ -18,7 +18,7 @@ else - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover a(href=url_for(page.prev.path)) if theme.lazyload.enable - img.prev-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) + img.prev-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) else img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) .pagination-info @@ -31,7 +31,7 @@ else .next-post(class=hasPagePrev) a(href=url_for(page.next.path)) if theme.lazyload.enable - img.next-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) + img.next-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) else img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) .pagination-info diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug index 98b897b..a201d0f 100644 --- a/layout/includes/post/reward.pug +++ b/layout/includes/post/reward.pug @@ -1,5 +1,5 @@ .post-reward - button.reward-button(type="button") + .reward-button i.fas.fa-qrcode = ' ' + _p('donate') .reward-main diff --git a/layout/includes/search/algolia.pug b/layout/includes/search/algolia.pug index 7041dc1..15cbb9d 100644 --- a/layout/includes/search/algolia.pug +++ b/layout/includes/search/algolia.pug @@ -9,4 +9,4 @@ #algolia-stats span.search-close-button i.fas.fa-times -.search-mask +#search-mask diff --git a/layout/includes/search/local-search.pug b/layout/includes/search/local-search.pug index 74ca4c7..545d775 100644 --- a/layout/includes/search/local-search.pug +++ b/layout/includes/search/local-search.pug @@ -20,4 +20,4 @@ | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search] span.search-close-button i.fas.fa-times -.search-mask \ No newline at end of file +#search-mask \ No newline at end of file diff --git a/layout/includes/share/index.pug b/layout/includes/share/index.pug index 7b29796..ae33e48 100644 --- a/layout/includes/share/index.pug +++ b/layout/includes/share/index.pug @@ -1,7 +1,7 @@ .post_share if theme.addThis.enable - include ./add-this.pug + !=partial('includes/share/add-this', {}, {cache:theme.fragment_cache}) else if theme.sharejs && theme.sharejs.enable include ./share-js.pug else if theme.addtoany.enable - include ./addtoany.pug + !=partial('includes/share/addtoany', {}, {cache:theme.fragment_cache}) diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index c155dab..ed56729 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -5,8 +5,8 @@ - if(showToc) - i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar) #sidebar + i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar) .sidebar-toc div.sidebar-toc__title= _p('sidebar.catalog') div.sidebar-toc__progress diff --git a/layout/includes/third-party/mermaid.pug b/layout/includes/third-party/mermaid.pug new file mode 100644 index 0000000..0d46012 --- /dev/null +++ b/layout/includes/third-party/mermaid.pug @@ -0,0 +1,15 @@ +script. + if (document.getElementsByClassName('mermaid').length) { + if (window.mermaidJsLoad) mermaid.init() + else { + $.getScript('!{theme.CDN.mermaid}', function () { + window.mermaidJsLoad = true + mermaid.initialize({ + theme: '!{theme.mermaid.theme}', + }) + !{theme.pjax} && mermaid.init() + }) + } + } + + diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug index 8477369..229c69b 100644 --- a/layout/includes/third-party/pangu.pug +++ b/layout/includes/third-party/pangu.pug @@ -1,12 +1,19 @@ -script(src=url_for(theme.CDN.pangu)) -if theme.pangu.field === 'post' && is_post() - script. - document.addEventListener('DOMContentLoaded', function() { - pangu.autoSpacingPage() - }) -else if theme.pangu.field === 'site' - script. - document.addEventListener('DOMContentLoaded', function() { - pangu.autoSpacingPage() - }) +script. + function panguFn () { + if (typeof pangu === 'object') pangu.spacingElementById('content-inner') + else { + $.getScript('!{url_for(theme.CDN.pangu)}', () => { + pangu.spacingElementById('content-inner') + }) + } + } + function panguInit () { + if (!{theme.pangu.field === 'post'}){ + GLOBAL_CONFIG_SITE.isPost && panguFn() + } else { + panguFn() + } + } + + document.addEventListener('DOMContentLoaded', panguFn) diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug new file mode 100644 index 0000000..42b4fb9 --- /dev/null +++ b/layout/includes/third-party/pjax.pug @@ -0,0 +1,51 @@ +script(src=url_for(theme.CDN.pjax)) +script. + var pjax = new Pjax({ + selectors: [ + 'title', + 'meta[name=description]', + '#config_change', + '#body-wrap', + '#rightside', + '.js-pjax' + ], + cacheBust: false, + }) + + document.addEventListener('pjax:complete', function () { + refreshFn() + + $('script[data-pjax]').each(function () { + $(this).parent().append($(this).remove()) + }) + + GLOBAL_CONFIG.islazyload && lazyLoadInstance.update() + + typeof chatBtnFn === 'function' && chatBtnFn() + typeof panguInit === 'function' && panguInit() + + if (typeof gtag === 'function') { + gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname}); + } + + if (document.getElementsByClassName('aplayer').length){ + loadMeting() + } + }) + + document.addEventListener('pjax:send', function () { + if (window.aplayers) { + for (let i = 0; i < window.aplayers.length; i++) { + if (!window.aplayers[i].options.fixed) window.aplayers[i].destroy() + } + } + + $(window).off('scroll') + + //reset readmode + $('body').hasClass('read-mode') && $('body').removeClass('read-mode') + + //reset font-size + $('body').css('font-size') !== originFontSize && $('body').css('font-size', parseFloat(originFontSize)) + }) + diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug new file mode 100644 index 0000000..05b95fc --- /dev/null +++ b/layout/includes/third-party/subtitle.pug @@ -0,0 +1,137 @@ +- var source = theme.subtitle.source +if source == '1' + script. + function subtitleType () { + $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (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', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = data.text + } + }) + } + + if (!{theme.subtitle.effect}) { + if (typeof Typed === 'function') subtitleType() + else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + } else { + subtitleType() + } + +else if source == '2' + script. + function subtitleType () { + $.getJSON('https://v1.hitokoto.cn', function (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', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = data.hitokoto + } + }) + } + + if (!{theme.subtitle.effect}) { + if (typeof Typed === 'function') subtitleType() + else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + } else { + subtitleType() + } + +else if source == '3' + script. + function subtitleType () { + $.getScript('http://yijuzhan.com/api/word.php?m=js', function () { + 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', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = con + } + }) + } + + if (!{theme.subtitle.effect}) { + if (typeof Typed === 'function') subtitleType() + else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + } else { + subtitleType() + } + +else if source == '4' + script. + function subtitleType () { + $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () { + 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', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = result.data.content + } + }) + }) + } + + if (!{theme.subtitle.effect}) { + if (typeof Typed === 'function') subtitleType() + else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + } else { + subtitleType() + } + +else + script. + function subtitleType () { + if (!{theme.subtitle.effect}) { + var typed = new Typed("#subtitle", { + strings: "!{theme.subtitle.sub}".split(","), + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50 + }) + } else { + document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}' + } + } + + if (!{theme.subtitle.effect}) { + if (typeof Typed === 'function') subtitleType() + else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + } else { + subtitleType() + } \ No newline at end of file diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index ce9bd69..5adcd1b 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -19,15 +19,14 @@ .length_num= site.tags.length if site.categories.length - .card-info-data-item.is-center + .card-info-data-item.is-center a(href=url_for(config.category_dir)) .headline= _p('aside.categories') .length_num= site.categories.length - .card-info-bookmark.is-center - button#bookmark-it.button--animated(type="button" title= _p('aside.card_bookmark')) - i.fas.fa-bookmark - span= _p('aside.card_bookmark') || 'Follow Me' + a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) + i(class=theme.aside.card_author.button.icon) + span=theme.aside.card_author.button.text if(theme.social) .card-info-social-icons.is-center diff --git a/layout/includes/widget/card_recent_post.pug b/layout/includes/widget/card_recent_post.pug index 5995c45..1b5e9ba 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/layout/includes/widget/card_recent_post.pug @@ -4,23 +4,24 @@ i.fas.fa-history span= _p('aside.card_recent_post') .aside-recent-item - - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5 - - site.posts.sort('date', -1).limit(postLimit).each(function(article){ + - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5 + - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date' + - site.posts.sort(sort, -1).limit(postLimit).each(function(article){ .aside-recent-post - - var link = article.link || article.path - - var title = article.title || _p('no_title') - - var no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : '' - - var post_cover = article.cover - - a(href=url_for(link)) - if post_cover && theme.cover.aside_enable - .aside-post-cover - if theme.lazyload.enable - img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title) - else - img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title) - .aside-post-title(class=no_cover) - .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title') - time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] - + - let link = article.link || article.path + - let title = article.title || _p('no_title') + - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : '' + - let post_cover = article.cover + if post_cover && theme.cover.aside_enable + a.aside-post-cover(href=url_for(link) title=title) + if theme.lazyload.enable + img.aside-post-bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) + else + img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) + .aside-post-info(class=no_cover) + a.aside-post-title(href=url_for(link) title=title)= title + if theme.aside.card_recent_post.sort === 'updated' + time.aside-post_meta.post-meta-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)] + else + time.aside-post_meta.post-meta-date(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] - }) diff --git a/layout/page.pug b/layout/page.pug index ff3aa6f..49939e9 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -8,8 +8,9 @@ block content span.tag-cloud__amount= site.tags.length .tag-cloud-tags !=cloudTags({source: site.tags, minfontsize: 15, maxfontsize: 30, limit: 0}) - if page.comments !== false - include includes/comments/index.pug + if page.comments !== false && theme.comments && theme.comments.use + - var commentsJsLoad = true + !=partial('includes/comments/index', {}, {cache:theme.fragment_cache}) else if page.type === 'link' include flink.pug else if page.type === 'categories' @@ -19,10 +20,15 @@ block content | - span.category__amount= site.categories.length div!= list_categories() - if page.comments !== false - include includes/comments/index.pug + if page.comments !== false && theme.comments && theme.comments.use + - var commentsJsLoad = true + !=partial('includes/comments/index', {}, {cache:theme.fragment_cache}) else #page + if theme.douban && theme.douban.meta + if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict])) + meta(name="referrer" content="no-referrer") #article-container!= page.content - if page.comments !== false - include includes/comments/index.pug \ No newline at end of file + if page.comments !== false && theme.comments && theme.comments.use + - var commentsJsLoad = true + !=partial('includes/comments/index', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/layout/post.pug b/layout/post.pug index 56b1859..0be5a2b 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -9,7 +9,7 @@ block content .post-meta__tag-list each item, index in page.tags.data a(href=url_for(item.path)).post-meta__tags #[=item.name] - !=partial('includes/share/index', {}, {cache:theme.fragment_cache}) + include includes/share/index.pug if theme.reward.enable !=partial('includes/post/reward', {}, {cache:theme.fragment_cache}) @@ -21,5 +21,8 @@ block content include includes/pagination.pug if theme.related_post && theme.related_post.enable != related_posts(page,site.posts) - if page.comments !== false - include includes/comments/index.pug \ No newline at end of file + + if page.comments !== false && theme.comments && theme.comments.use + - var commentsJsLoad = true + !=partial('includes/comments/index', {}, {cache:theme.fragment_cache}) + \ No newline at end of file diff --git a/package.json b/package.json index 63a21cd..0825952 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.0.0", + "version": "3.0.0-pjax", "private": true, "engines": { "node": ">=8.10.0" diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js index 5bbde39..f41b97b 100644 --- a/scripts/filters/post_lazyload.js +++ b/scripts/filters/post_lazyload.js @@ -1,9 +1,8 @@ /** * Butterfly * lazyload - * replace src to data-src + * replace src to data-lazy-src */ -//
'use strict' @@ -11,7 +10,7 @@ const urlFor = require('hexo-util').url_for.bind(hexo) function lazyProcess (htmlContent) { const bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' - return htmlContent.replace(/( .aside-recent-post margin-bottom: 10px - & > a - color: $font-black + .aside-post-cover + float: left + overflow: hidden + width: 66px + height: 66px - .aside-post-cover - float: left - overflow: hidden - width: 66px - height: 66px + .aside-post-bg + padding: 0 + max-width: 100% + width: 100% + height: 100% + transition: all .6s + object-fit: cover - .aside-post-bg - padding: 0 - max-width: 100% - width: 100% - height: 100% - transition: all .6s - object-fit: cover + &:hover + box-shadow: none + transform: scale(1.1) - &:hover - box-shadow: none - transform: scale(1.1) + .aside-post-info + .aside-post_meta + padding-left: 10px + color: $theme-meta-color + font-size: .6rem .aside-post-title - .aside-post_meta - padding-left: 10px - color: $theme-meta-color - font-size: .6rem + @extend .limit-more-line + padding-left: 10px + height: 40px + color: var(--font-color) + line-height: 1rem + -webkit-line-clamp: 2 - .aside-post_title - @extend .limit-more-line - padding-left: 10px - height: 40px - line-height: 1rem - -webkit-line-clamp: 2 + &:hover + color: $text-hover - &:hover - color: $light-blue !important - - &.no-aside-cover - .aside-post_title - height: auto + &.no-aside-cover + .aside-post-title + height: auto .card-archives ul.card-archive-list, .card-categories ul.card-category-list @@ -156,12 +152,12 @@ display: inline-block padding: .15rem 1rem width: 100% - color: $font-black + color: var(--font-color) transition: all .4s &:hover padding: .15rem .85rem - background-color: $light-blue + background-color: var(--text-bg-hover) span @extend .limit-one-line diff --git a/source/css/_layout/category.styl b/source/css/_layout/category.styl index 2150343..e0026f9 100644 --- a/source/css/_layout/category.styl +++ b/source/css/_layout/category.styl @@ -1,15 +1,10 @@ .category-content - ol, ul margin-top: .4rem padding: 0 0 0 .8rem list-style: none counter-reset: li - p - margin: 0 - - ol, ul padding-left: .5rem @@ -18,39 +13,11 @@ margin: .3rem 0 padding: .1rem .5rem .1rem 1.5rem !important - &:hover - &:before - transform: rotate(360deg) - &:before position: absolute - top: 0 left: 0 - background: $light-blue - color: $card-bg cursor: pointer transition: all .3s ease-out - - ol - li - &:before - margin-top: .2rem - width: w = 1.2rem - height: h = w - border-radius: .5 * w - content: counter(li) - counter-increment: li - text-align: center - font-size: .6rem - line-height: h - - ul - li - &:hover - &:before - border-color: $theme-button-hover-color - - &:before $w = .3rem top: 10px margin-left: .45rem diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl index 18fc762..83205fc 100644 --- a/source/css/_layout/comments.styl +++ b/source/css/_layout/comments.styl @@ -70,5 +70,5 @@ transition: .4s .comment-wrap - .comments-items-2 + > div:nth-child(2) display: none \ No newline at end of file diff --git a/source/css/_layout/flink.styl b/source/css/_layout/flink.styl index 5d40731..c93ddd0 100644 --- a/source/css/_layout/flink.styl +++ b/source/css/_layout/flink.styl @@ -11,12 +11,12 @@ position: relative float: left overflow: hidden - margin: 20px 7px + margin: 15px 7px width: calc(100% / 3 - 15px) height: 90px border-radius: 8px line-height: 17px - transform: perspective(1px) translateZ(0) + -webkit-transform: translateZ(0) @media screen and (max-width: 1100px) width: calc(50% - 15px) !important @@ -35,11 +35,9 @@ bottom: 0 left: 0 z-index: -1 - background: $light-blue + background: var(--text-bg-hover) content: '' - transition-timing-function: ease-out - transition-duration: .3s - transition-property: transform + transition: transform .3s ease-out transform: scale(0) &:hover:before, @@ -48,14 +46,14 @@ transform: scale(1) a - color: $font-color + color: var(--font-color) text-decoration: none img float: left - margin: 13px 0 0 10px - width: 65px - height: 65px + margin: 15px 10px + width: 60px + height: 60px border-radius: 35px transition: all .3s @@ -64,6 +62,7 @@ .flink-item-name @extend .limit-one-line + display: block padding: 16px 10px 0 0 height: 40px font-weight: bold @@ -71,6 +70,7 @@ .flink-item-desc @extend .limit-one-line - padding: 16px 10px + display: block + padding: 16px 10px 16px 0 height: 50px font-size: 13px diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 23b7f4d..f6c5a7f 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -16,11 +16,11 @@ #footer-wrap position: relative padding: 2rem 1rem - color: $light-grey + color: var(--light-grey) text-align: center a - color: $light-grey + color: var(--light-grey) cursor: pointer &:hover diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index d141cd0..c604396 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -22,27 +22,37 @@ #site_title, #site_subtitle, #scroll_down .scroll-down-effects - color: $light-grey text-align: center text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) line-height: 1.5 #site_title margin: 0 + color: var(--white) font-size: 1.3rem + @media screen and (min-width: $sm) + font-size: 2rem + #site_subtitle + color: var(--light-grey) font-size: .8rem + @media screen and (min-width: $sm) + font-size: 1.2rem + #site_social_icons display: none margin: 0 auto width: 15rem text-align: center + @media screen and (max-width: $sm) + display: block + .social-icon margin: 0 .5rem - color: $light-grey + color: var(--light-grey) text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) font-size: 1rem cursor: pointer @@ -56,22 +66,32 @@ .scroll-down-effects position: relative width: 100% + color: var(--light-grey) font-size: 30px // page &.not-index-bg height: 20rem + @media screen and (max-width: $sm) + height: 14rem + #page_site-info position: absolute top: 10rem padding: 0 .5rem width: 100% + @media screen and (max-width: $sm) + top: 7rem + // post &.post-bg height: 20rem + @media screen and (max-width: $sm) + height: 18rem + &:before position: absolute top: 0 @@ -87,43 +107,60 @@ bottom: 1.5rem padding: 0 8% width: 100% - color: $light-grey text-align: left + @media screen and (max-width: $sm) + bottom: 1.1rem + padding: 0 1.1rem + #post-title margin-bottom: .4rem font-size: 1.5rem + @media screen and (max-width: $sm) + font-size: 1.2rem + .posttitle @extend .limit-more-line + color: var(--white) line-height: 1.5 -webkit-line-clamp: 3 #post-meta + color: var(--light-grey) font-size: 95% - > .meta-secondline, - > .meta-thirdline - display: inline + @media screen and (min-width: $sm) + > .meta-secondline + > span:first-child + display: none - .word-count, - #busuanzi_value_page_pv, - .comment-count - padding-left: .2rem + @media screen and (max-width: $sm) + font-size: 90% + + > .meta-firstline, + > .meta-secondline + display: inline .post-meta - &__separator - margin: 0 .3rem + &-separator + margin: 0 .25rem - &__icon + &-icon margin-right: .2rem + &-label + if hexo-config('post_meta.post.label') + margin-right: .2rem + else + display: none + a - color: $light-grey + color: var(--light-grey) transition: all .3s ease-out &:hover - color: $light-blue + color: $text-hover text-decoration: underline // css hack @@ -145,6 +182,9 @@ _:future, opacity: 0 transition: all .5s + @media screen and (max-width: $sm) + padding: 10px .8rem + &:not(.fixed) .menus padding-right: 0 !important @@ -155,30 +195,30 @@ _:future, vertical-align: top &:hover - color: $white + color: var(--white) &.is-visible-inline .site-page font-size: inherit a - color: $light-grey + color: var(--light-grey) &:hover - color: $white + color: var(--white) &.fixed position: fixed top: -60px z-index: 91 - background: alpha($white, .8) + background: rgba(255, 255, 255, .8) box-shadow: 0 5px 6px -5px alpha($grey, .6) transition: transform .2s ease-in-out, opacity .2s ease-in-out a, #site-name, .toggle-menu - color: $font-black + color: var(--font-color) text-shadow: none &:hover @@ -188,9 +228,6 @@ _:future, transition: all .5s transform: translate3d(0, 100%, 0) - .menus_item_child - background-color: $white !important - #site-name text-shadow: .1rem .1rem .2rem rgba($dark-black, .15) font-weight: bold @@ -208,13 +245,12 @@ _:future, .menus_item_child display: block - .menus-expand + i.expand transform: rotate(180deg) !important - .menus-expand + i.expand padding: 4px - transition: all .3s - transform: rotate(0) + transition: transform .3s & > a &:after @@ -239,7 +275,7 @@ _:future, margin-top: 8px padding: 0 width: max-content - background-color: alpha($white, .8) + background-color: var(--sidebar-bg) box-shadow: 0 5px 20px -4px rgba($dark-black, .5) animation: sub_menus .3s .1s ease both @@ -255,13 +291,13 @@ _:future, list-style: none &:hover - background: $theme-color + background: var(--text-bg-hover) a display: inline-block padding: .3rem .7rem width: 100% - color: $font-black + color: var(--font-color) text-shadow: none #search_button @@ -273,54 +309,4 @@ _:future, padding-bottom: .3rem text-shadow: .05rem .05rem .1rem rgba($dark-black, .3) font-size: .7rem - cursor: pointer - -@media screen and (min-width: $sm) - #page-header - #site_title - font-size: 2rem - - #site_subtitle - font-size: 1.2rem - -@media screen and (max-width: $sm) - #nav - padding: 10px .8rem - - #page-header - #site_social_icons - display: block - - &.not-index-bg - height: 14rem - - #page_site-info - top: 7rem - - &.post-bg - height: 18rem - - & > #post-info - bottom: 1rem - padding: 0 5% - - & > #post-title - font-size: 1.2rem - - & > #post-meta - font-size: 90% - - .post-meta__categories - display: none - - .meta-thirdline - display: block - - .post-meta-pv-cv - .post-meta__separator:first-child - display: none - - if !hexo-config('busuanzi.page_pv') - .post-meta-commentcount - .post-meta__separator - display: none \ No newline at end of file + cursor: pointer \ No newline at end of file diff --git a/source/css/_layout/loadding.styl b/source/css/_layout/loadding.styl index 6b4aa1d..3319a9a 100644 --- a/source/css/_layout/loadding.styl +++ b/source/css/_layout/loadding.styl @@ -1,18 +1,18 @@ if hexo-config('preloader') - loading-bg() + .loading-bg position: fixed z-index: 1000 width: 50% height: 100% - background-color: $preloader-bg + background-color: var(--preloader-bg) transition: all .5s #loading-box .loading-left-bg - loading-bg() + @extend .loading-bg .loading-right-bg - loading-bg() + @extend .loading-bg right: 0 .spinner-box @@ -43,13 +43,13 @@ if hexo-config('preloader') .loading-word position: absolute - color: $white + color: var(--preloader-color) font-size: .8rem .configure-core width: 100% height: 100% - background-color: $preloader-bg + background-color: var(--preloader-bg) &.loaded .loading-left-bg diff --git a/source/css/_layout/mobile-sidebar.styl b/source/css/_layout/mobile-sidebar.styl index 2b50b8f..3a65f5d 100644 --- a/source/css/_layout/mobile-sidebar.styl +++ b/source/css/_layout/mobile-sidebar.styl @@ -16,7 +16,7 @@ overflow-y: auto width: 250px height: 100% - background: #f6f8fa + background: var(--sidebar-bg) transition: all .5s & > .mobile_author_icon @@ -46,12 +46,12 @@ @extend .limit-one-line .length_num - color: $dark-black + color: var(--text-highlight-color) font-size: .9rem .headline display: block - color: $font-black + color: var(--font-color) font-size: .7rem hr @@ -65,7 +65,7 @@ position: relative display: block padding: .3rem 1.5rem - color: $font-black + color: var(--font-color) font-size: .8rem cursor: pointer @@ -79,14 +79,13 @@ &:hover color: $light-blue - .menus-expand + .expand position: absolute right: 0 padding: .4rem - transition: all .3s - transform: rotate(0) + transition: transform .3s - &.menus-closed + &.closed transform: rotate(90deg) !important .menus_item_child diff --git a/source/css/_layout/page.styl b/source/css/_layout/page.styl index d049c36..e85f37b 100644 --- a/source/css/_layout/page.styl +++ b/source/css/_layout/page.styl @@ -19,7 +19,7 @@ padding: 0 height: 280px border-radius: 8px - background: $card-bg + background: var(--card-bg) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) transition: all .3s @@ -82,31 +82,34 @@ & > .article-title @extend .limit-more-line margin-bottom: .3rem - color: $font-black + color: var(--text-highlight-color) font-size: 1.2rem line-height: 1.4 transition: all .2s ease-in-out -webkit-line-clamp: 2 &:hover - color: $light-blue !important + color: $text-hover & > .article-meta-wrap - font-size: 85% + color: $theme-meta-color + font-size: 90% - & > time - color: $theme-meta-color + & > .post-meta-date cursor: default - & > .article-meta - color: $theme-meta-color - .sticky color: $sticky-color i margin: 0 .2rem 0 0 + .article-meta-label + if hexo-config('post_meta.page.label') + padding-right: .2rem + else + display: none + .article-meta__separator margin: 0 .3rem @@ -116,12 +119,11 @@ .fa-angle-right margin: 0 .2rem - a.article-meta__categories, - a.article-meta__tags + a color: $theme-meta-color &:hover - color: $light-blue !important + color: $text-hover text-decoration: underline & > .content @@ -138,7 +140,7 @@ transition: all .3s &:hover - color: $theme-button-hover-color !important + color: $text-hover !important transform: scale(1.1) &__title @@ -152,7 +154,7 @@ .layout_page > div:first-child:not(.recent-posts) padding: 50px 40px border-radius: 8px - background: $card-bg + background: var(--card-bg) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) transition: all .3s @@ -178,7 +180,7 @@ &:hover &:before - border-color: $theme-button-hover-color + border-color: $pseudo-hover &:before position: absolute @@ -189,7 +191,7 @@ height: h = w border: .5 * w solid $light-blue border-radius: w - background: $card-bg + background: var(--card-bg) content: '' line-height: h transition: all .2s ease-in-out @@ -213,7 +215,7 @@ &:hover &:before - border-color: $theme-button-hover-color + border-color: $pseudo-hover &:before $w = .3rem @@ -224,7 +226,7 @@ height: h = w border: .5 * w solid $light-blue border-radius: w - background: $card-bg + background: var(--card-bg) content: '' line-height: h transition: all .2s ease-in-out @@ -234,7 +236,7 @@ flex-direction: column justify-content: center - .article-sort-post + .article-sort-item-info padding: 0 width: 100% @@ -248,26 +250,34 @@ &:before top: .7rem - border-color: $theme-button-hover-color + border-color: $pseudo-hover - &__time - padding-left: .4rem - font-size: .7rem + &-time + color: $theme-meta-color + font-size: .9em - &__title + time + padding-left: .4rem + cursor: default + + &-title @extend .limit-more-line - color: $font-black - font-size: .75rem + color: var(--font-color) + font-size: 1.1em transition: all .3s -webkit-line-clamp: 2 &:hover - color: $light-blue !important + color: $text-hover transform: translateX(20px) - &__img + &-img + float: left + overflow: hidden + width: 80px + height: 80px + img - padding: 0 width: 100% height: 100% transition: all .6s @@ -276,22 +286,11 @@ &:hover transform: scale(1.1) - &__post - color: $theme-meta-color - - &:hover - color: $theme-meta-color - - &-img - float: left - overflow: hidden - width: 80px - height: 80px - - &-post - display: inline-block - padding: 0 1rem - width: calc(100% - 80px) + &-info + display: inline-block + overflow: hidden + padding: 0 1rem + width: calc(100% - 80px) .category-lists padding: 1rem 0 1.5rem @@ -302,9 +301,12 @@ .category-list a - color: $font-black + color: var(--font-color) cursor: pointer + &:hover + color: $text-hover + .category-list-count margin-left: .4rem color: $theme-meta-color diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index a7c1e28..978e13e 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -17,7 +17,7 @@ &.current background: $theme-paginator-color - color: $button-color + color: var(--white) cursor: default img.prev-cover, @@ -39,7 +39,7 @@ .prev_info, .next_info @extend .limit-one-line - color: $button-color + color: var(--white) font-weight: 500 .next-post @@ -51,7 +51,7 @@ .prev-post .label, .next-post .label - color: alpha($white, .9) + color: var(--light-grey) text-transform: uppercase font-size: 90% diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 6dc1551..33c068b 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -18,7 +18,6 @@ beautify() h4, h5, h6 - cursor: pointer transition: all .2s ease-out &:before @@ -81,7 +80,7 @@ beautify() top: 0 left: 0 background: $light-blue - color: $card-bg + color: $white cursor: pointer transition: all .3s ease-out @@ -102,7 +101,7 @@ beautify() > li:not(.tab) &:hover &:before - border-color: $theme-button-hover-color + border-color: $pseudo-hover &:before $w = .3rem @@ -202,7 +201,7 @@ img &:hover background: $light-blue - color: $button-color + color: var(--white) .post_share display: inline-block @@ -224,7 +223,7 @@ img position: relative margin: 2rem 0 .5rem padding: .5rem .8rem - border: 1px solid $light-grey + border: 1px solid var(--light-grey) transition: box-shadow .3s ease-in-out &:before @@ -244,7 +243,7 @@ img width: w = .4rem height: w border-radius: w - background: $white + background: var(--card-bg) content: '' &:hover diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index fbdbf02..6c271ba 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -41,13 +41,13 @@ top: 50% padding: 0 1rem width: 100% - color: $white transform: translate(0, -50%) .relatedPosts_date - color: $light-grey + color: var(--light-grey) font-size: 90% .relatedPosts_title @extend .limit-more-line -webkit-line-clamp: 2 + color: var(--white) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index 0e0eca0..43a5060 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -5,13 +5,15 @@ text-align: center .reward-button - padding: .5rem 1.2rem - background: $light-blue - color: $button-color + display: inline-block + padding: .2rem 1.2rem + background: var(--btn-bg) + color: var(--btn-color) + cursor: pointer transition: all .4s &:hover - box-shadow: inset 9em 0 0 0 $theme-button-hover-color + box-shadow: inset 9em 0 0 0 var(--btn-hover-color) .reward-main display: block @@ -30,7 +32,7 @@ margin: 0 padding: 1rem .5rem border-radius: 4px - background: $reward-pop-up-bg + background: var(--reward-pop) &:before position: absolute @@ -48,7 +50,7 @@ margin: 0 auto width: 0 height: 0 - border-top: 13px solid $reward-pop-up-bg + border-top: 13px solid var(--reward-pop) border-right: 13px solid transparent border-left: 13px solid transparent content: '' diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 4693169..33a586e 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -7,14 +7,11 @@ transition: all .5s #rightside-config-hide + transition: transform .4s transform: translate(35px, 0) - .rightside-in - transform: translate(0, 0) !important - animation: rightsideIn .3s - - .rightside-out - animation: rightsideOut .3s + &.show + transform: translate(0, 0) !important & > div & > button, @@ -23,14 +20,14 @@ margin-bottom: 2px width: 30px height: 30px - background-color: $light-blue - color: $button-color + background-color: var(--btn-bg) + color: var(--btn-color) text-align: center font-size: 16px cursor: pointer &:hover - background-color: $theme-button-hover-color + background-color: var(--btn-hover-color) #rightside_config i @@ -41,17 +38,3 @@ @media screen and (max-width: $bg) display: block - -@keyframes rightsideIn - 0% - transform: translate(30px, 0) - - 100% - transform: translate(0, 0) - -@keyframes rightsideOut - 0% - transform: translate(0, 0) - - 100% - transform: translate(30px, 0) diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 823d203..0c860e3 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -1,3 +1,15 @@ +#toggle-sidebar + position: fixed + bottom: $sidebar-icon-top + left: $sidebar-icon-left + z-index: 100 + font-size: $sidebar-icon-size + cursor: pointer + transition: all .2s + + @media screen and (max-width: $bg) + display: none + #sidebar position: fixed top: 0 @@ -6,10 +18,21 @@ padding: 1rem 0 2rem .5rem width: $sidebar-width height: 100% - background: $sidebar-background - box-shadow: -.25rem 0 .25rem rgba($sidebar-background, .6) inset + background: var(--sidebar-bg) opacity: .9 + @media screen and (max-width: $bg) + right: -($mobile-sidebar-width) + left: auto + z-index: 103 + width: $mobile-sidebar-width + opacity: 1 + transition: all .4s + box-shadow: none + + .toc-child + display: block !important + .sidebar-toc ol, li @@ -56,19 +79,4 @@ &-bar width: 0 height: 1px - background: $theme-toc-color - -@media screen and (max-width: $bg) - i#toggle-sidebar - display: none - - #sidebar - right: -($mobile-sidebar-width) - left: auto - z-index: 103 - width: $mobile-sidebar-width - opacity: 1 - transition: all .4s - - .toc-child - display: block !important \ No newline at end of file + background: $theme-toc-color \ No newline at end of file diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 94475a3..e1af668 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -1,55 +1,19 @@ -if hexo-config('valine.enable') - #vcomment - button - padding: .3rem .8rem - border-color: $button-color - background-color: $light-blue - color: $button-color - font-size: .7rem - transition: all .3s +#vcomment + if hexo-config('valine.bg') + textarea + background: url(hexo-config('valine.bg')) 100% 100% no-repeat - &:hover - background-color: $theme-button-hover-color + .vimg + transition: all .3s - if hexo-config('valine.bg') - textarea - background: url(hexo-config('valine.bg')) 100% 100% no-repeat + &:hover + transform: rotate(360deg) - .vimg - transition: all .3s + .vcards .vcard .vcontent.expand + &:before, + &:after + z-index: 22 - &:hover - transform: rotate(360deg) - - .vat - padding: 0 .8rem - border: 1px solid $light-blue - border-radius: 5px - color: $light-blue - font-size: .7125rem - transition: all .3s - - &:hover - background-color: $light-blue - color: $button-color - -if hexo-config('beautify.enable') - #article-container - .aplayer - ol, - ul - margin: 0 - padding: 0 - - li - margin: 0 - padding: 0 15px - - &:before - content: none - -// third-party -// fireworks .fireworks position: fixed top: 0 @@ -83,9 +47,30 @@ if hexo-config('beautify.enable') margin: 0 0 .8em padding: .3rem 0 .8em -.has-jax - overflow: auto +// mathjax +mjx-container[jax='CHTML'][display='true'] + overflow-x: auto + overflow-y: hidden + padding-bottom: .5rem + outline: 0 + line-height: 2 + +.aplayer + color: $font-black #article-container .aplayer - margin: 0 0 1rem \ No newline at end of file + margin: 0 0 1rem + + if hexo-config('beautify.enable') + ol, + ul + margin: 0 + padding: 0 + + li + margin: 0 + padding: 0 15px + + &:before + content: none \ No newline at end of file diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 05e3c0f..97142f1 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -1,11 +1,31 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' [data-theme='dark'] - body - background-color: darken(#121212, 2) - color: alpha(#FFFFFF, .6) - - ::-webkit-scrollbar-thumb - background: lighten(#121212, 5) + --global-bg: darken(#121212, 2) + --font-color: alpha(#FFFFFF, .6) + --hr-border: alpha(#FFFFFF, .3) + --hr-before-color: alpha(#FFFFFF, .6) + --search-bg: #121212 + --search-input-color: alpha(#FFFFFF, .6) + --search-result-title: alpha(#FFFFFF, .8) + --preloader-bg: darken(#121212, 2) + --preloader-color: alpha(#FFFFFF, .6) + --tab-border-color: #2c2c2c + --tab-botton-bg: #2c2c2c + --tab-botton-color: alpha(#FFFFFF, .6) + --tab-button-hover-bg: lighten(#121212, 15) + --tab-button-active-bg: #121212 + --card-bg: #121212 + --sidebar-bg: #121212 + --btn-hover-color: lighten(#121212, 40) + --btn-color: alpha(#FFFFFF, .6) + --btn-bg: lighten(#121212, 5) + --text-bg-hover: lighten(#121212, 15) + --light-grey: alpha(#FFFFFF, .6) + --white: alpha(#FFFFFF, .8) + --text-highlight-color: alpha(#FFFFFF, .8) + --blockquote-color: alpha(#FFFFFF, .6) + --blockquote-bg: lighten(#121212, 10) + --reward-pop: lighten(#121212, 10) // 網站背景，footer背景 #web_bg[data-type=color], @@ -20,63 +40,29 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' background-color: alpha($dark-black, .7) content: '' - #page-header, - .layout_post > #post, - .layout_page > div:first-child:not(.recent-posts) + #page-header background-color: #121212 - #sidebar - background: #121212 - box-shadow: -.25rem 0 .25rem #121212 - #article-container code background: #2c2c2c - .recent-posts - .recent-post-item - background: #121212 !important - - .article-title - color: alpha(#FFFFFF, .8) !important - // 頭部 #page-header &:before position: absolute top: 0 - right: 0 - bottom: 0 left: 0 + display: block + width: 100% + height: 100% background-color: alpha($dark-black, .7) content: '' & > #nav - a - color: alpha(#FFFFFF, .8) !important - &.fixed background: alpha(#121212, .8) box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0) - .toggle-menu, - #site-name, - a - color: alpha(#FFFFFF, .8) - - .menus_item_child - background-color: lighten(#121212, 5) !important - - li - &:hover - background: lighten(#121212, 20) !important - - a - color: alpha(#FFFFFF, .8) - - #site_subtitle - & > span - color: alpha(#FFFFFF, .6) - // 代碼框 #article-container pre, @@ -87,234 +73,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' figure.highlight box-shadow: none + table::-webkit-scrollbar-thumb + background: lighten(#121212, 5) + .line:before color: alpha(#FFFFFF, .6) !important - .gutter pre - background-color: lighten(#121212, 2) !important - .hljs background-color: lighten(#121212, 2) !important - .highlight-tools - background: lighten(#121212, 3) !important - color: #90a4ae !important - - blockquote - background-color: lighten(#121212, 10) - color: alpha(#FFFFFF, .6) - - hr - border: 2px dashed alpha(#FFFFFF, .3) - background: 0 - - &:before - color: alpha(#FFFFFF, .6) - - .layout_post .tag_share .post-meta__tags - border: 1px solid alpha(#FFFFFF, .6) - color: alpha(#FFFFFF, .6) - - &:hover - background: darken(#FFFFFF, 60) - - // 文章版權 - .post-copyright - border: 1px solid alpha(#FFFFFF, .6) - - .post-copyright-meta - color: alpha(#FFFFFF, .8) - - .post-copyright-info - color: alpha(#FFFFFF, .6) - - &:after - background: #121212 - - // 音樂播放器 - .aplayer - filter: brightness(.7) - color: $dark-black - - // 右下角按鈕 - #rightside - & > div - & > button, - & > a - background-color: lighten(#121212, 5) - color: alpha(#FFFFFF, .6) - - &:hover - background: lighten(#121212, 20) - - // 打賞按鈕 - .post-reward - .reward-button - background-color: lighten(#121212, 10) !important - - .reward-all - background-color: lighten(#121212, 10) !important - - &:after - border-top: 13px solid lighten(#121212, 10) !important - - .flink-list-item:before, - .card-category-list-item a:hover, - .card-archive-list-item a:hover, - #bookmark-it - background-color: lighten(#121212, 10) !important - - img, - .gist - filter: brightness(.7) - - #article-container iframe - filter: brightness(.7) - - // 側邊欄 - #aside_content - .card-widget - background: #121212 !important - - .headline, - .length_num, - .aside-post_title, - .card-category-list-link, - .card-archive-list-link, - .social-icon, - .card-category-list-link-more, - .card-archive-list-link-more - color: alpha(#FFFFFF, .6) !important - - .button--animated:before - background: lighten(#121212, 20) - - #post-meta, - #post-meta a, - #footer-wrap, - #footer-wrap a, - .img-alt - color: alpha(#FFFFFF, .6) !important - - .posttitle, - h1, - h2, - h3, - h4, - h5, - h6 - color: alpha(#FFFFFF, .8) - - .recent-posts .post-meta__date, - .recent-posts .article-meta, - .recent-posts a, - .post-reward .reward-button, - .copy-button, - .gutter pre, - #bookmark-it, - .copy-notice, - .flink-list-item a, - .category-list-link, - .relatedPosts_date, - .prev-post .label, - .next-post .label - color: alpha(#FFFFFF, .6) !important - - .prev_info, - .next_info, - .relatedPosts_title - color: alpha(#FFFFFF, .8) !important - - // 時間軸界面 - .article-sort - &-item__title - color: alpha(#FFFFFF, .6) - - &-item:before, - &-title:before - background: #121212 - - // 手機 MENU,TOC - #mobile-sidebar - #mobile-sidebar-menus - background: #121212 - - .headline - color: alpha(#FFFFFF, .6) !important - - .length_num - color: alpha(#FFFFFF, .8) !important - - a - color: alpha(#FFFFFF, .6) !important + .highlight-tools + background: lighten(#121212, 3) !important + color: #90a4ae !important #post-comment .comment-switch if hexo-config('comments.text') - background: #2c2c2c + background: #2c2c2c !important label filter: brightness(.7) - .post-outdate-notice - filter: brightness(.7) - - // error 404 - #error-wrap - .error-content - background: #121212 - - .error-img - filter: brightness(.7) - - .error-info - .error_title - color: alpha(#FFFFFF, .8) - - .error_subtitle - color: alpha(#FFFFFF, .6) - - a - background: #2c2c2c - // note - if hexo-config('note.style') == 'modern' + if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat' .note filter: brightness(.7) - if hexo-config('note.style') == 'flat' - .note - filter: brightness(.7) - color: #4c4948 - // hide-tags .hide-button, - .btn-beautify - filter: brightness(.8) - - // tabs - #article-container - .tabs - border: 2px solid #2c2c2c - border-top: none - - > .nav-tabs - background: #2c2c2c - - button - border-top: 2px solid #2c2c2c - background: #2c2c2c - color: alpha(#FFFFFF, .6) - - .tab:not(.active) - button - &:hover - border-top: 2px solid lighten(#121212, 20) - background: lighten(#121212, 20) - - .active - button - background: #121212 + .btn-beautify, + .mermaid, + .post-outdate-notice, + .error-img, + #article-container iframe, + img, + .gist, + .aplayer + filter: brightness(.7) // 第三方 // 插件 hexo-blog-encrypt @@ -326,81 +121,29 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' input background-color: #121212 - .mermaid + // Gitalk + #gitalk-container filter: brightness(.7) - if hexo-config('gitalk') && hexo-config('gitalk.enable') - #gitalk-container - .gt-header-textarea, - .gt-header-preview, - .gt-comment-content, - button, - .gt-popup - filter: brightness(.7) + svg + fill: alpha(#FFFFFF, .8) !important - svg - fill: alpha(#FFFFFF, .6) !important - - if hexo-config('valine') && hexo-config('valine.enable') - #vcomment - .vbtn, - .vat - border: 1px solid alpha(#FFFFFF, .6) - background: #121212 !important - color: alpha(#FFFFFF, .6) !important - - &:hover - background: lighten(#121212, 20) !important - - if hexo-config('local_search') && hexo-config('local_search.enable') - #local-search - background: #121212 - - .local-search-box--input - background: #121212 + // Disqus and Disqusjs + #disqus_thread + #dsqjs + .dsqjs-tab-active, + .dsqjs-no-comment color: alpha(#FFFFFF, .6) - .search-result-title + .dsqjs-order-label + background-color: lighten(#121212, 5) + + .dsqjs-post-body color: alpha(#FFFFFF, .6) - if hexo-config('algolia_search.enable') - #algolia-search - background: #121212 + code, + pre + background: #2c2c2c - .ais-search-box--input - background: #121212 - color: alpha(#FFFFFF, .6) - - #algolia-search-results - .algolia-hit-item-link + blockquote color: alpha(#FFFFFF, .6) - - if hexo-config('disqusjs.enable') - #disqus_thread - #dsqjs - .dsqjs-tab-active, - .dsqjs-no-comment - color: alpha(#FFFFFF, .6) - - .dsqjs-order-label - background-color: lighten(#121212, 5) - - .dsqjs-post-body - color: alpha(#FFFFFF, .6) - - code, - pre - background: #2c2c2c - - blockquote - color: alpha(#FFFFFF, .6) - - if hexo-config('preloader') - #loading-box - .loading-left-bg, - .loading-right-bg, - .configure-core - background-color: darken(#121212, 2) - - .loading-word - color: alpha(#FFFFFF, .6) diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index f02c976..d0da99a 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -1,149 +1,29 @@ if hexo-config('readmode') [data-theme='light'] - $light-redmode-bg = #fff - .read-mode - background: $light-redmode-bg - - #page-header.post-bg - a - color: $font-black !important - - #article-container - pre, - .highlight:not(.js-file-line-container) - background: #f7f7f7 !important - - * - color: $font-black !important - - figure.highlight - .line:before - color: $font-black !important - - .hljs - background: #f7f7f7 !important - - code - color: #4c4948 - - blockquote - border-left: .2rem solid #ddd - background-color: $light-redmode-bg - - ol, - li - &:before - background: $light-redmode-bg - color: #4c4948 - - ul - >li - &:before - border: .2rem solid #90a4ae - - hr - border: 2px dashed #d6dbdf - background: $light-redmode-bg - - &:before - color: darken(#d6dbdf, 10) - - .hide-toggle - border: 1px solid darken(#d6dbdf, 10) !important - - .hide-button, - .btn-beautify - background: $light-redmode-bg !important - color: #4c4948 !important - - .btn-beautify - border: 1px solid darken(#d6dbdf, 10) - - &.button--animated:before - background: $light-redmode-bg - - .hide-inline, - .hide-block - & >.hide-button - border: 1px solid darken(#d6dbdf, 10) - - & > .button--animated:before - background: $light-redmode-bg - - .note - border: 2px solid #eee - background-color: $light-redmode-bg - - .tabs - border: 1px solid darken(#d6dbdf, 10) - - #rightside button - background: darken(#d6dbdf, 20) !important + --font-color: #4c4948 + --readmode-light-color: #fff + --white: #4c4948 + --light-grey: #4c4948 + --gray: #d6dbdf + --hr-border: #d6dbdf + --hr-before-color: darken(#d6dbdf, 10) + -highlight-bg: #f7f7f7 [data-theme='dark'] - $dark-readmode-bg = #0d0d0d - .read-mode - background: $dark-readmode-bg - - #article-container - pre, - .highlight:not(.js-file-line-container) - * - color: rgba(255, 255, 255, .6) !important - - code - color: rgba(255, 255, 255, .6) - - blockquote - border-left: .2rem solid rgba(255, 255, 255, .6) - background-color: $dark-readmode-bg - - ol, - li - &:before - background: $dark-readmode-bg - color: rgba(255, 255, 255, .6) - - ul - >li - &:before - border: .15rem solid rgba(255, 255, 255, .6) - - .hide-toggle - border: 1px solid rgba(255, 255, 255, .6) !important - - .hide-button, - .btn-beautify - background: $dark-readmode-bg !important - filter: none - color: rgba(255, 255, 255, .6) !important - - .btn-beautify - border: 1px solid rgba(255, 255, 255, .6) - - &.button--animated:before - background: $dark-readmode-bg !important - - .hide-inline, - .hide-block - & >.hide-button - border: 1px solid rgba(255, 255, 255, .6) - - & > .button--animated:before - background: $dark-readmode-bg !important - - .note - border: 2px solid rgba(255, 255, 255, .6) - filter: none - background-color: $dark-readmode-bg - color: rgba(255, 255, 255, .6) - - .tabs - border: 2px solid rgba(255, 255, 255, .6) + --font-color: rgba(255, 255, 255, .6) + --readmode-light-color: #0d0d0d + --white: rgba(255, 255, 255, .8) + --light-grey: rgba(255, 255, 255, .6) + --gray: rgba(255, 255, 255, .6) + --hr-border: rgba(255, 255, 255, .3) + --hr-before-color: rgba(255, 255, 255, .6) + -highlight-bg: #171717 .read-mode + background: var(--readmode-light-color) + #body-wrap padding-left: 0 !important @@ -151,15 +31,11 @@ if hexo-config('readmode') background-color: transparent background-image: none !important - a - text-shadow: none !important - &:before opacity: 0 & > #post-info padding: 0 - color: $font-black text-align: center .layout_post @@ -170,13 +46,6 @@ if hexo-config('readmode') &:hover box-shadow: none - figure.highlight - border-radius: 0 !important - box-shadow: none !important - - & > :not(.highlight-tools) - display: block !important - & > canvas display: none !important @@ -188,11 +57,9 @@ if hexo-config('readmode') #toggle-sidebar, #mobile-toc-button, #nav, - .post-outdate-notice - display: none !important - + .post-outdate-notice, #web_bg - background: none + display: none !important if !hexo-config('chat_btn') #chatra, @@ -204,6 +71,29 @@ if hexo-config('readmode') display: none !important #article-container + a + color: #99a9bf + + pre, + .highlight:not(.js-file-line-container) + background: var(-highlight-bg) !important + + * + color: var(--font-color) !important + + figure.highlight + border-radius: 0 !important + box-shadow: none !important + + & > :not(.highlight-tools) + display: block !important + + .line:before + color: var(--font-color) !important + + .hljs + background: var(-highlight-bg) !important + h1, h2, h3, @@ -224,7 +114,20 @@ if hexo-config('readmode') &:hover:before transform: none !important + ol, + li + &:before + background: transparent !important + color: var(--font-color) !important + + ul + >li + &:before + border: .15rem solid var(--gray) !important + .tabs + border: 2px solid var(--tab-border-color) + > .nav-tabs background: transparent @@ -244,3 +147,38 @@ if hexo-config('readmode') > .tab-contents .tab-item-content.active animation: none + + code + color: var(--font-color) + + blockquote + border-left: .2rem solid var(--gray) + background-color: var(--readmode-light-color) + + .hide-toggle + border: 1px solid var(--gray) !important + + .hide-button, + .btn-beautify + background: var(--readmode-light-color) !important + color: var(--font-color) !important + + .btn-beautify + border: 1px solid var(--gray) !important + + .button--animated:before + background: var(--readmode-light-color) !important + + .hide-inline, + .hide-block + & >.hide-button + border: 1px solid var(--gray) + + & > .button--animated:before + background: var(--readmode-light-color) + + .note + border: 2px solid var(--gray) + filter: none + background-color: var(--readmode-light-color) + color: var(--font-color) \ No newline at end of file diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 5531882..de7275e 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -11,7 +11,8 @@ outline: none border: 2px solid $search-color border-radius: 2rem - background: $search-bg + background: var(--search-bg) + color: var(--search-input-color) font-size: 14px .ais-hits--item.algolia-hit-item @@ -20,7 +21,7 @@ &:hover &:before - border-color: $theme-button-hover-color + border-color: $pseudo-hover &:before $w = .3rem @@ -38,7 +39,7 @@ a display: block - color: $font-black + color: var(--search-result-title) font-size: 14px cursor: pointer diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 7f8ab5d..1e33134 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -7,7 +7,14 @@ margin-left: -15rem padding: 1rem width: 30rem - background: $search-bg + background: var(--search-bg) + + @media screen and (max-width: $sm) + top: 0 + left: 0 + margin: 0 + width: 100% + height: 100% hr margin: 1rem auto @@ -31,7 +38,7 @@ font-size: 1rem line-height: 1 -.search-mask +#search-mask position: fixed top: 0 right: 0 @@ -39,16 +46,4 @@ left: 0 z-index: 1000 display: none - background: rgba($dark-black, .6) - -@media screen and (max-width: $sm) - .search-dialog - top: 0 - left: 0 - margin: 0 - width: 100% - height: 100% - - .search-result-list - padding-bottom: 2rem - max-height: 75vh !important + background: rgba($dark-black, .6) \ No newline at end of file diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index e0b3c5f..65f75ad 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -12,7 +12,8 @@ outline: none border: 2px solid $search-color border-radius: 2rem - background: $search-bg + background: var(--search-bg) + color: var(--search-input-color) font-size: 14px -webkit-appearance: none @@ -23,7 +24,7 @@ &:hover &:before - border-color: $theme-button-hover-color + border-color: $pseudo-hover &:before $w = .3rem @@ -41,7 +42,7 @@ a display: block - color: $font-black + color: var(--search-result-title) font-weight: 600 font-size: 14px cursor: pointer @@ -62,4 +63,8 @@ .search-result-list overflow-y: auto - max-height: 10.5rem \ No newline at end of file + max-height: 10.5rem + + @media screen and (max-width: $sm) + padding-bottom: 2rem + max-height: 75vh !important diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index a828718..17ebd64 100644 --- a/source/css/_tags/button.styl +++ b/source/css/_tags/button.styl @@ -4,8 +4,6 @@ text-align: center .btn-beautify - position: relative - z-index: 1 display: inline-block margin: 0 .2rem .3rem padding: 0 1rem diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index e9b27fe..429f9f6 100644 --- a/source/css/_tags/hide.styl +++ b/source/css/_tags/hide.styl @@ -2,12 +2,10 @@ .hide-inline, .hide-block & > .hide-button - position: relative - z-index: 1 display: inline-block padding: .3rem 1rem background: $tag-hide-bg - color: $white !important + color: var(--white) &.open display: none @@ -32,7 +30,7 @@ & > .hide-button padding: .3rem .5rem background: $tag-hide-toggle-bg - color: $font-color + color: #1F2D3D cursor: pointer & > i diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl index 841e899..96d78ed 100644 --- a/source/css/_tags/note.styl +++ b/source/css/_tags/note.styl @@ -4,19 +4,22 @@ position: relative margin: 0 0 1rem padding: 15px + if ($note-style == 'simple') - border: 1px solid $light-grey + border: 1px solid #EEEEEE border-left-width: 5px if ($note-style == 'modern') border: 1px solid transparent - background-color: $whitesmoke + background-color: var(--white)smoke + if ($note-style == 'flat') border: initial - border-left: 5px solid $light-grey - background-color: lighten($light-grey, 65%) + color: $font-black + border-left: 5px solid #EEEEEE + background-color: lighten(#EEEEEE, 65%) if hexo-config('note.border_radius') is a 'unit' border-radius: unit(hexo-config('note.border_radius'), px) @@ -47,6 +50,9 @@ &:last-child margin-bottom: 0 !important + + code + background: $code-background !important if $note-icons &:not(.no-icon) @@ -69,14 +75,11 @@ background: lookup('$note-modern-' + $type + '-bg') color: lookup('$note-modern-' + $type + '-text') - a, - span.exturl + a &:not(.btn) - border-bottom: 1px solid lookup('$note-modern-' + $type + '-text') color: lookup('$note-modern-' + $type + '-text') &:hover - border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover') color: lookup('$note-modern-' + $type + '-hover') if ($note-style != 'modern') diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl index 2b0c739..8f49059 100644 --- a/source/css/_tags/tabs.styl +++ b/source/css/_tags/tabs.styl @@ -1,16 +1,18 @@ + #article-container .tabs position: relative margin: 0 0 1rem - border: 1px solid $tab-border-color - border-top: none + border-right: 1px solid var(--tab-border-color) + border-bottom: 1px solid var(--tab-border-color) + border-left: 1px solid var(--tab-border-color) > .nav-tabs display: flex flex-wrap: wrap margin: 0 padding: 0 - background: $tab-botton-bg + background: var(--tab-botton-bg) > .tab margin: 0 @@ -24,25 +26,27 @@ display: block padding: .5rem 1rem width: 100% - border-top: 2px solid $tab-border-color - background: $tab-botton-bg - color: $font-color + border-top: 2px solid var(--tab-border-color) + background: var(--tab-botton-bg) + color: var(--tab-botton-color) line-height: 2 transition: all .4s - &:hover - border-top: 2px solid $tab-button-hover-bg - background: $tab-button-hover-bg - i width: 1.5em &.active button border-top: 2px solid $tab-active-border-color - background: $card-bg + background: var(--tab-button-active-bg) cursor: default + &:not(.active) + button + &:hover + border-top: 2px solid var(--tab-button-hover-bg) + background: var(--tab-button-hover-bg) + > .tab-contents .tab-item-content position: relative diff --git a/source/css/_third-party/normalize.min.css b/source/css/_third-party/normalize.min.css index 1854c29..ecc522f 100644 --- a/source/css/_third-party/normalize.min.css +++ b/source/css/_third-party/normalize.min.css @@ -1 +1,180 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100% +} + +body { + margin: 0 +} + +main { + display: block +} + +h1 { + font-size: 2em; + margin: .67em 0 +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible +} + +pre { + font-family: monospace, monospace; + font-size: 1em +} + +a { + background-color: transparent +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted +} + +b, +strong { + font-weight: bolder +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em +} + +small { + font-size: 80% +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +img { + border-style: none +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0 +} + +button, +input { + overflow: visible +} + +button, +select { + text-transform: none +} + +[type=button], +[type=reset], +[type=submit], +button { + -webkit-appearance: button +} + +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0 +} + +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText +} + +fieldset { + padding: .35em .75em .625em +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal +} + +progress { + vertical-align: baseline +} + +textarea { + overflow: auto +} + +[type=checkbox], +[type=radio] { + box-sizing: border-box; + padding: 0 +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +details { + display: block +} + +summary { + display: list-item +} + +template { + display: none +} + +[hidden] { + display: none +} \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index f586da5..f1365f9 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -6,7 +6,6 @@ $light-red = #F47466 $themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable') $theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue $theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan -$theme-button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange $theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan $theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue @@ -30,7 +29,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title // Global Variables $font-size = 14px $font-color = #1F2D3D -$button-color = #fff $rem = 20px $text-line-height = 2 $sm = 768px @@ -48,6 +46,9 @@ $white = #FFFFFF $whitesmoke = #f5f5f5 $font-black = #4C4948 $card-bg = $white +$text-highlight-color = $font-color +$text-hover = $theme-color +$text-bg-hover = $theme-color // code $line-height-code-block = 20px $blockquote-color = #6a737d @@ -66,6 +67,12 @@ $sidebar-width = 300px $sidebar-background = #f6f8fa $sidebar-active-color = #fff $mobile-sidebar-width = 250px +// Button +$button-color = #fff +$button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange +$button-bg= $theme-color +$pseudo-hover = $button-hover-color + // table $table-thead-bg = #99a9bf // reward @@ -73,8 +80,10 @@ $reward-pop-up-bg = #f5f5f5 $reward-pop-up-color = #858585 // search $search-bg = #f6f8fa +$search-input-color= $font-black $search-color = $theme-color $search-keyword-highlight = #F47466 +$search-result-title= $font-black // comments $comments-switch-first-text = $bright-blue $comments-switch-second-text = $light-orange @@ -91,6 +100,7 @@ $tag-hide-bg = $theme-color $tag-hide-toggle-bg = #f0f0f0 // preloader $preloader-bg = #37474f +$preloader-word-color = #fff // rightside $rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px // fireworks @@ -165,6 +175,8 @@ $btn-green-color = #5cb85c // Tag Plugins - Tab $tab-border-color = #f0f0f0 $tab-botton-bg = #f0f0f0 +$tab-botton-color = $font-color $tab-button-hover-bg = darken($tab-border-color, 8) $tab-active-border-color = $theme-color +$tab-button-active-bg= $card-bg $tab-to-top-color = #99a9bf \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index 9ce1575..5fdb72e 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,120 +1,93 @@ -$(function () { - const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined +/** + * 當menu過多時，自動適配，避免UI錯亂 + * @param {*} n + * 傳入 1 sidebar打開時 + * 傳入 2 正常狀態下 + */ + +const blogNameWidth = $('#blog_name').width() +const menusWidth = $('.menus').width() +const sidebarWidth = $('#sidebar').width() + +const adjustMenu = function (n) { const $nav = $('#nav') - const $rightside = $('#rightside') - const $body = $('body') + let t + if (n === 0) t = true + else if (n === 1) t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 30 + else t = blogNameWidth + menusWidth > $nav.width() - 30 - /** - * 當menu過多時，自動適配，避免UI錯亂 - * 傳入 1 sidebar打開時 - * 傳入 2 正常狀態下 - */ - const blogNameWidth = $('#blog_name').width() - const menusWidth = $('.menus').width() - const sidebarWidth = $('#sidebar').width() - - function isAdjust (n) { - let t - if (n === 1) { - t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20 - } else if (n === 2) { - t = blogNameWidth + menusWidth > $nav.width() - 20 - } - - if (t) headerAdjust() - else headerAdjustBack() - } - - function headerAdjust () { + if (t) { $nav.find('.toggle-menu').addClass('is-visible-inline') $nav.find('.menus_items').addClass('is-invisible') $nav.find('#search_button span').addClass('is-invisible') - } - - function headerAdjustBack () { + } else { $nav.find('.toggle-menu').removeClass('is-visible-inline') $nav.find('.menus_items').removeClass('is-invisible') $nav.find('#search_button span').removeClass('is-invisible') } +} - // 初始化header - function initAjust () { - if (window.innerWidth < 768) headerAdjust() - else isAdjust(2) - } - - initAjust() +// 初始化header +const initAjust = () => { + if (window.innerWidth < 768) adjustMenu(0) + else adjustMenu(2) $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' }) +} - $(window).on('resize', function () { - if ($('#sidebar').hasClass('tocOpenPc') && $nav.hasClass('fixed')) { - isAdjust(1) - } else { - initAjust() - } +/** + * 進入post頁sidebar處理 + */ +const sidebarAutoOpen = () => { + if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) { + setTimeout(function () { + openSidebar() + }, 400) + } +} + +/** + * 點擊左下角箭頭,顯示sidebar + */ + +const closeSidebar = () => { + $('#sidebar').removeClass('tocOpenPc').animate({ + left: '-300px' + }, 400) + $('.menus').animate({ + paddingRight: 0 + }, 400) + $('#body-wrap').animate({ + paddingLeft: 0 + }, 400) + $('#toggle-sidebar').css({ + transform: 'rotateZ(0deg)', + color: '#1F2D3D', + opacity: '1' }) + setTimeout(function () { + adjustMenu(2) + }, 400) +} - /** - * 進入post頁sidebar處理 - */ - if (GLOBAL_CONFIG_SITE.isPost) { - if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) { - setTimeout(function () { - openSidebar() - }, 400) - } - } - - /** - * 點擊左下角箭頭,顯示sidebar - */ - - function closeSidebar () { - $('#sidebar').removeClass('tocOpenPc') - $('.menus').animate({ - paddingRight: 0 - }, 400) - $('#body-wrap').animate({ - paddingLeft: 0 - }, 400) - $('#sidebar').animate({ - left: '-300px' - }, 400) - $('#toggle-sidebar').css({ - transform: 'rotateZ(0deg)', - color: '#1F2D3D', - opacity: '1' - }) - setTimeout(function () { - isAdjust(2) - }, 400) - } - - function openSidebar () { - $('#sidebar').addClass('tocOpenPc') - $('.menus').animate({ - paddingRight: 300 - }, 400) - $('#body-wrap').animate({ - paddingLeft: 300 - }, 400) - $('#sidebar').animate({ - left: 0 - }, 400) - $('#toggle-sidebar').css({ - transform: 'rotateZ(180deg)', - color: '#99a9bf', - opacity: '1' - }) - const isAdjustTimeCount = window.setInterval(function () { - if ($nav.hasClass('fixed')) isAdjust(1) - else isAdjust(2) - }, 100) - setTimeout(function () { - clearInterval(isAdjustTimeCount) - }, 400) - } +const openSidebar = () => { + adjustMenu(1) + $('#sidebar').addClass('tocOpenPc').animate({ + left: 0 + }, 400) + $('.menus').animate({ + paddingRight: 300 + }, 400) + $('#body-wrap').animate({ + paddingLeft: 300 + }, 400) + $('#toggle-sidebar').css({ + transform: 'rotateZ(180deg)', + color: '#99a9bf', + opacity: '1' + }) +} +const toggleSidebarFn = function () { $('#toggle-sidebar').on('click', function () { const isOpen = $(this).hasClass('on') isOpen ? $(this).removeClass('on') : $(this).addClass('on') @@ -124,20 +97,24 @@ $(function () { openSidebar() } }) +} - /** - * 手機menu和toc按鈕點擊 - * 顯示menu和toc的sidebar - */ +/** + * 手機menu和toc按鈕點擊 + * 顯示menu和toc的sidebar + */ +const sidebarFn = () => { const $toggleMenu = $('.toggle-menu') const $mobileSidebarMenus = $('#mobile-sidebar-menus') const $mobileTocButton = $('#mobile-toc-button') const $menuMask = $('#menu_mask') + const $body = $('body') + const $sidebar = $('#sidebar') function openMobileSidebar (name) { sidebarPaddingR() - $('body').css('overflow', 'hidden') + $body.css('overflow', 'hidden') $menuMask.fadeIn() if (name === 'menu') { @@ -152,13 +129,12 @@ $(function () { if (name === 'toc') { $mobileTocButton.removeClass('close').addClass('open') - $('#sidebar').addClass('tocOpenMobile') - $('#sidebar').css({ transform: 'translate3d(-100%,0,0)', left: '' }) + $sidebar.addClass('tocOpenMobile').css({ transform: 'translate3d(-100%,0,0)', left: '' }) } } function closeMobileSidebar (name) { - $('body').css({ overflow: '', 'padding-right': '' }) + $body.css({ overflow: '', 'padding-right': '' }) $menuMask.fadeOut() if (name === 'menu') { @@ -169,8 +145,7 @@ $(function () { if (name === 'toc') { $mobileTocButton.removeClass('open').addClass('close') - $('#sidebar').removeClass('tocOpenMobile') - $('#sidebar').css({ transform: '' }) + $sidebar.removeClass('tocOpenMobile').css({ transform: '' }) } } @@ -200,47 +175,40 @@ $(function () { const mql = window.matchMedia('(max-width: 1024px)') mql.addListener(function (ev) { if (ev.matches) { - if ($('#sidebar').hasClass('tocOpenPc')) closeSidebar() + if ($sidebar.hasClass('tocOpenPc')) closeSidebar() } else { if ($('#toggle-sidebar').hasClass('on')) openSidebar() if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc') } }) - /** - * 首頁top_img底下的箭頭 - */ + // toc元素點擊 + $sidebar.find('.toc-link').on('click', function (e) { + if (window.innerWidth <= 1024) { + closeMobileSidebar('toc') + } else { + e.preventDefault() + scrollToDest($(this).attr('href')) + } + }) +} + +/** + * 首頁top_img底下的箭頭 + */ + +const indexSrollDown = () => { $('#scroll_down').on('click', function () { scrollToDest('#content-inner') }) +} - /** - * BOOKMARK 書簽 - */ - $('#bookmark-it').on('click', function () { - if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark - window.sidebar.addPanel(document.title, window.location.href, '') - } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite - window.external.AddFavorite(location.href, document.title) - } else if (window.opera && window.print) { // Opera Hotlist - this.title = document.title - return true - } else { // webkit - safari/chrome - if (isSnackbar) { - const bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.' - snackbarShow(bookmarkText) - } else { - alert(GLOBAL_CONFIG.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.') - } - } - }) - - /** - * 代碼 - * 只適用於Hexo默認的代碼渲染 - */ +/** + * 代碼 + * 只適用於Hexo默認的代碼渲染 + */ +const addHightlightTool = function () { const $figureHighlight = $('figure.highlight') - if ($figureHighlight.length) { const isHighlightCopy = GLOBAL_CONFIG.highlightCopy const isHighlightLang = GLOBAL_CONFIG.highlightLang @@ -251,29 +219,24 @@ $(function () { } /** - * 代碼收縮 - */ + * 代碼收縮 + */ const $highlightTools = $('.highlight-tools') if (isHighlightShrink === true) { - $highlightTools.append('') + $highlightTools.append('') } else if (isHighlightShrink === false) { - $highlightTools.append('') + $highlightTools.append('') } - $(document).on('click', '.highlight-tools >.code-expand', function () { - const $hideItem = $(this).parent().nextAll() - if ($(this).hasClass('code-closed')) { - $hideItem.css('display', 'block') - $(this).removeClass('code-closed') - } else { - $hideItem.css('display', 'none') - $(this).addClass('code-closed') - } + $highlightTools.find('>.expand').on('click', function () { + const $this = $(this) + $this.parent().nextAll().toggle() + $this.toggleClass('closed') }) /** - * 代碼語言 - */ + * 代碼語言 + */ if (isHighlightLang) { let langNameIndex, langName $figureHighlight.each(function () { @@ -284,16 +247,15 @@ $(function () { } /** - * 代碼copy - * copy function - */ + * 代碼copy + */ if (isHighlightCopy) { $highlightTools.append('
') const copy = function (text, ctx) { if (document.queryCommandSupported && document.queryCommandSupported('copy')) { try { document.execCommand('copy') // Security exception may be thrown by some browsers. - if (isSnackbar) { + if (GLOBAL_CONFIG.Snackbar !== undefined) { snackbarShow(GLOBAL_CONFIG.copy.success) } else { $(ctx).prev('.copy-notice') @@ -309,7 +271,7 @@ $(function () { }) } } catch (ex) { - if (isSnackbar) { + if (GLOBAL_CONFIG.Snackbar !== undefined) { snackbarShow(GLOBAL_CONFIG.copy.success) } else { $(ctx).prev('.copy-notice') @@ -327,7 +289,7 @@ $(function () { } } } else { - if (isSnackbar) { + if (GLOBAL_CONFIG.Snackbar !== undefined) { snackbarShow(GLOBAL_CONFIG.copy.noSupport) } else { $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) @@ -336,7 +298,7 @@ $(function () { } // click events - $(document).on('click', '.highlight-tools>.copy-button', function () { + $highlightTools.find('>.copy-button').on('click', function () { const $buttonParent = $(this).parents('figure.highlight') $buttonParent.addClass('copy-true') const selection = window.getSelection() @@ -351,54 +313,62 @@ $(function () { }) } } +} - /** +/** * PhotoFigcaption */ - function addPhotoFigcaption () { - const images = $('#article-container img').not('.justified-gallery img') - images.each(function (i, o) { - const $this = $(o) - if ($this.attr('alt')) { - const t = $('
' + $this.attr('alt') + '
') - $this.after(t) - } - }) - } - if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption() +function addPhotoFigcaption () { + const images = $('#article-container img').not('.justified-gallery img') + images.each(function (i, o) { + const $this = $(o) + if ($this.attr('alt')) { + const t = $('
' + $this.attr('alt') + '
') + $this.after(t) + } + }) +} - /** - * justified-gallery 圖庫排版 - */ +/** + * justified-gallery 圖庫排版 + */ + +let dectectJGJsLoad = false +const justifiedGalleryRun = function () { const $justifiedGallery = $('.justified-gallery') - let isJustifiedGallery = false if ($justifiedGallery.length) { - isJustifiedGallery = true const $imgList = $justifiedGallery.find('img') $imgList.unwrap() if ($imgList.length) { $imgList.each(function (i, o) { - if ($(o).attr('data-src')) $(o).attr('src', $(o).attr('data-src')) + if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) $(o).wrap('
') }) } - $('head').append(``) - loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { - initJustifiedGallery($justifiedGallery) - }) + + if (dectectJGJsLoad) initJustifiedGallery($justifiedGallery) + else { + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { + initJustifiedGallery($justifiedGallery) + }) + dectectJGJsLoad = true + } } +} - /** - * fancybox和 mediumZoom - */ - +/** + * fancybox和 mediumZoom + */ +const lightBox = function () { const isMediumZoom = GLOBAL_CONFIG.medium_zoom const isFancybox = GLOBAL_CONFIG.fancybox if (isFancybox) { const images = $('#article-container img:not(.gallery-group-img)').not($('a>img')) images.each(function (i, o) { - const lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src') - $(o).wrap(``) + const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src') + const dataCaption = $(o).attr('alt') ? $(o).attr('alt') : '' + $(o).wrap(``) }) $().fancybox({ @@ -406,7 +376,8 @@ $(function () { loop: true, transitionEffect: 'slide', protect: true, - buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'] + buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], + hash: false }) } else if (isMediumZoom) { const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) @@ -417,12 +388,16 @@ $(function () { }) }) } +} - /** - * 滾動處理 - */ +/** + * 滾動處理 + */ +const scrollFn = function () { let initTop = 0 let isChatShow = true + const $rightside = $('#rightside') + const $nav = $('#nav') const isChatBtnHide = typeof chatBtnHide === 'function' const isChatBtnShow = typeof chatBtnShow === 'function' $(window).scroll(throttle(function (event) { @@ -460,164 +435,165 @@ $(function () { initTop = currentTop return result } +} - /** - * 點擊滾回頂部 - */ +/** + * 點擊滾回頂部 + */ + +const backtotop = function () { $('#go-up').on('click', function () { scrollToDest('body') }) +} - /** - * toc - */ +/** + * toc + */ +const tocFn = function () { + $('.toc-child').hide() - if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG_SITE.isSidebar) { - $('.toc-child').hide() + // main of scroll + $(window).scroll(throttle(function (event) { + const currentTop = $(this).scrollTop() + scrollPercent(currentTop) + findHeadPosition(currentTop) + autoScrollToc(currentTop) + }, 100)) - // main of scroll - $(window).scroll(throttle(function (event) { - const currentTop = $(this).scrollTop() - scrollPercent(currentTop) - findHeadPosition(currentTop) - autoScrollToc(currentTop) - }, 100)) - - // scroll - $('.toc-link').on('click', function (e) { - if (window.innerWidth <= 1024) { - closeMobileSidebar('toc') - } else { - e.preventDefault() - scrollToDest($(this).attr('href')) - } - }) - - // expand toc-item - const expandToc = function ($item) { - if ($item.is(':visible')) { - return - } - $item.fadeIn(400) + // expand toc-item + const expandToc = function ($item) { + if ($item.is(':visible')) { + return } + $item.fadeIn(400) + } - const scrollPercent = function (currentTop) { - const docHeight = $('#article-container').height() - const winHeight = $(window).height() - const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight) - const scrollPercent = (currentTop) / (contentMath) - const scrollPercentRounded = Math.round(scrollPercent * 100) - const percentage = (scrollPercentRounded > 100) ? 100 - : (scrollPercentRounded <= 0) ? 0 - : scrollPercentRounded - $('.progress-num').text(percentage) - $('.sidebar-toc__progress-bar').animate({ - width: percentage + '%' - }, 100) - } + const scrollPercent = function (currentTop) { + const docHeight = $('#article-container').height() + const winHeight = $(window).height() + const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight) + const scrollPercent = (currentTop) / (contentMath) + const scrollPercentRounded = Math.round(scrollPercent * 100) + const percentage = (scrollPercentRounded > 100) ? 100 + : (scrollPercentRounded <= 0) ? 0 + : scrollPercentRounded + $('.progress-num').text(percentage) + $('.sidebar-toc__progress-bar').animate({ + width: percentage + '%' + }, 100) + } - // anchor - const isanchor = GLOBAL_CONFIG.isanchor - const updateAnchor = function (anchor) { - if (window.history.replaceState && anchor !== window.location.hash) { - window.history.replaceState(undefined, undefined, anchor) - } - } - - // find head position & add active class - // DOM Hierarchy: - // ol.toc > (li.toc-item, ...) - // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...)) - const findHeadPosition = function (top) { - // assume that we are not in the post page if no TOC link be found, - // thus no need to update the status - if ($('.toc-link').length === 0) { - return false - } - - const list = $('#article-container').find('h1,h2,h3,h4,h5,h6') - let currentId = '' - list.each(function () { - const head = $(this) - if (top > head.offset().top - 25) { - currentId = '#' + $(this).attr('id') - } - }) - - if (currentId === '') { - $('.toc-link').removeClass('active') - $('.toc-child').hide() - } - - const currentActive = $('.toc-link.active') - if (currentId && currentActive.attr('href') !== currentId) { - if (isanchor) updateAnchor(currentId) - - $('.toc-link').removeClass('active') - - const _this = $('.toc-link[href="' + currentId + '"]') - _this.addClass('active') - - const parents = _this.parents('.toc-child') - // Returned list is in reverse order of the DOM elements - // Thus `parents.last()` is the outermost .toc-child container - // i.e. list of subsections - const topLink = (parents.length > 0) ? parents.last() : _this - expandToc(topLink.closest('.toc-item').find('.toc-child')) - topLink - // Find all top-level .toc-item containers, i.e. sections - // excluding the currently active one - .closest('.toc-item').siblings('.toc-item') - // Hide their respective list of subsections - .find('.toc-child').hide() - } - } - - const autoScrollToc = function (currentTop) { - if ($('.toc-link').hasClass('active')) { - const activePosition = $('.active').offset().top - const sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop() - if (activePosition > (currentTop + $(window).height() - 100)) { - $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100) - } - if (activePosition < currentTop + 100) { - $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop - 100) - } - } + // anchor + const isanchor = GLOBAL_CONFIG.isanchor + const updateAnchor = function (anchor) { + if (window.history.replaceState && anchor !== window.location.hash) { + window.history.replaceState(undefined, undefined, anchor) } } - /** - * 閲讀模式 - */ - $('#readmode').click(function () { + // find head position & add active class + // DOM Hierarchy: + // ol.toc > (li.toc-item, ...) + // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...)) + const findHeadPosition = function (top) { + // assume that we are not in the post page if no TOC link be found, + // thus no need to update the status + if ($('.toc-link').length === 0) { + return false + } + + const list = $('#article-container').find('h1,h2,h3,h4,h5,h6') + let currentId = '' + list.each(function () { + const head = $(this) + if (top > head.offset().top - 25) { + currentId = '#' + $(this).attr('id') + } + }) + + if (currentId === '') { + $('.toc-link').removeClass('active') + $('.toc-child').hide() + } + + const currentActive = $('.toc-link.active') + if (currentId && currentActive.attr('href') !== currentId) { + if (isanchor) updateAnchor(currentId) + + $('.toc-link').removeClass('active') + + const _this = $('.toc-link[href="' + currentId + '"]') + _this.addClass('active') + + const parents = _this.parents('.toc-child') + // Returned list is in reverse order of the DOM elements + // Thus `parents.last()` is the outermost .toc-child container + // i.e. list of subsections + const topLink = (parents.length > 0) ? parents.last() : _this + expandToc(topLink.closest('.toc-item').find('.toc-child')) + topLink + // Find all top-level .toc-item containers, i.e. sections + // excluding the currently active one + .closest('.toc-item').siblings('.toc-item') + // Hide their respective list of subsections + .find('.toc-child').hide() + } + } + + const autoScrollToc = function (currentTop) { + if ($('.toc-link').hasClass('active')) { + const activePosition = $('.active').offset().top + const sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop() + if (activePosition > (currentTop + $(window).height() - 100)) { + $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100) + } + if (activePosition < currentTop + 100) { + $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop - 100) + } + } + } +} + +/** + * 閲讀模式 + */ +const readModeToggle = function () { + $('#readmode').on('click', function () { $('body').toggleClass('read-mode') }) +} - /** - * 字體調整 - */ +/** + * 字體調整 + */ + +const originFontSize = $('body').css('font-size') +const fontChange = function () { $('#font_plus').click(function () { - $body.css('font-size', parseFloat($body.css('font-size')) + 1) + const nowFontSize = parseFloat($('body').css('font-size')) + if (nowFontSize < 20) { + $('body').css('font-size', nowFontSize + 1) + } }) $('#font_minus').click(function () { - $body.css('font-size', parseFloat($body.css('font-size')) - 1) - }) - - /** - * menu - * 側邊欄sub-menu 展開/收縮 - * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) - */ - $('#mobile-sidebar-menus .menus-expand').on('click', function () { - if ($(this).hasClass('menus-closed')) { - $(this).parents('.menus_item').find('.menus_item_child').slideDown() - $(this).removeClass('menus-closed') - } else { - $(this).parents('.menus_item').find('.menus_item_child').slideUp() - $(this).addClass('menus-closed') + const nowFontSize = parseFloat($('body').css('font-size')) + if (nowFontSize > 10) { + $('body').css('font-size', nowFontSize - 1) } }) +} + +/** + * menu + * 側邊欄sub-menu 展開/收縮 + * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) + */ +const subMenuFn = function () { + $('#mobile-sidebar-menus .expand').on('click', function () { + $(this).parents('.menus_item').find('> .menus_item_child').slideToggle() + $(this).toggleClass('closed') + }) $(window).on('touchmove', function (e) { const $menusChild = $('#nav .menus_item_child') @@ -625,113 +601,112 @@ $(function () { $menusChild.css('display', 'none') } }) +} - /** - * rightside 點擊設置 按鈕 展開 - */ +/** + * rightside 點擊設置 按鈕 展開 + */ +const rightsideConfigClick = function () { $('#rightside_config').on('click', function () { - if ($('#rightside-config-hide').hasClass('rightside-in')) { - $('#rightside-config-hide').removeClass('rightside-in').addClass('rightside-out') - } else { - $('#rightside-config-hide').removeClass('rightside-out').addClass('rightside-in') - } + $('#rightside-config-hide').toggleClass('show') }) +} - /** - * 複製時加上版權信息 - */ +/** + * 複製時加上版權信息 + */ +const addCopyright = function () { const copyright = GLOBAL_CONFIG.copyright - if (copyright !== undefined) { - document.body.oncopy = function (event) { - event.preventDefault() - let textFont; const copyFont = window.getSelection(0).toString() - if (copyFont.length > 45) { - 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 - } - if (event.clipboardData) { - return event.clipboardData.setData('text', textFont) - } else { - // 兼容IE - return window.clipboardData.setData('text', textFont) - } - } - } - - /** - * Darkmode - */ - const $darkModeButtom = $('#darkmode') - function switchReadMode () { - const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' - if (nowMode === 'light') { - activateDarkMode() - Cookies.set('theme', 'dark', 2) - if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night) + document.body.oncopy = function (event) { + event.preventDefault() + let textFont; const copyFont = window.getSelection(0).toString() + 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 { - activateLightMode() - Cookies.set('theme', 'light', 2) - if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) + textFont = copyFont + } + if (event.clipboardData) { + return event.clipboardData.setData('text', textFont) + } else { + // 兼容IE + return window.clipboardData.setData('text', textFont) } } +} - $darkModeButtom.click(function () { - switchReadMode() - if (typeof utterancesTheme === 'function') utterancesTheme() - }) - - /** - * 網頁運行時間 - */ - if (GLOBAL_CONFIG.runtime) { - // get user config - const $runtimeCount = $('#webinfo-runtime-count') - const startDate = $runtimeCount.attr('publish_date') - const showDateTime = function () { - const BirthDay = new Date(startDate) - const today = new Date() - const timeold = (today.getTime() - BirthDay.getTime()) - const daysold = Math.floor(timeold / (24 * 60 * 60 * 1000)) - $runtimeCount.text(daysold + ' ' + GLOBAL_CONFIG.runtime_unit) +/** + * Darkmode + */ +const switchDarkmode = function () { + const $darkModeButton = $('#darkmode') + if ($darkModeButton.length) { + const switchReadMode = function () { + const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + if (nowMode === 'light') { + activateDarkMode() + Cookies.set('theme', 'dark', 2) + GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night) + } else { + activateLightMode() + Cookies.set('theme', 'light', 2) + GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) + } } - showDateTime() - setInterval(showDateTime, 10000) + + $darkModeButton.click(function () { + switchReadMode() + typeof utterancesTheme === 'function' && utterancesTheme() + }) } +} - /** - * table overflow - */ +/** + * 網頁運行時間 + */ +const runtimeShow = function () { + const $runtimeCount = $('#webinfo-runtime-count') + if ($runtimeCount.length) { + const publishDate = $runtimeCount.attr('publish_date') + $runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime_unit) + } +} +/** + * table overflow + */ +const addTableWrap = function () { const $table = $('#article-container table').not($('figure.highlight > table')) $table.each(function () { $(this).wrap('
') }) +} - /** - * 百度推送 - */ - if (GLOBAL_CONFIG.baiduPush) { - (function () { - const bp = document.createElement('script') - const curProtocol = window.location.protocol.split(':')[0] - if (curProtocol === 'https') { - bp.src = 'https://zz.bdstatic.com/linksubmit/push.js' - } else { - bp.src = 'http://push.zhanzhang.baidu.com/push.js' - } - const s = document.getElementsByTagName('script')[0] - s.parentNode.insertBefore(bp, s) - })() +/** + * 百度推送 + */ + +const baiduPush = () => { + const bp = document.createElement('script') + const curProtocol = window.location.protocol.split(':')[0] + if (curProtocol === 'https') { + bp.src = 'https://zz.bdstatic.com/linksubmit/push.js' + } else { + bp.src = 'http://push.zhanzhang.baidu.com/push.js' } + bp.dataset.pjax = '' + const s = document.getElementsByTagName('script')[0] + s.parentNode.insertBefore(bp, s) +} - /** - * tag-hide - */ +/** + * tag-hide + */ + +const tagHideClick = function () { const $hideInline = $('.hide-button') if ($hideInline.length) { $hideInline.on('click', function (e) { @@ -740,15 +715,17 @@ $(function () { $this.toggleClass('open') $hideContent.toggle() if ($this.hasClass('open')) { - if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) { + if ($hideContent.find('.justified-gallery').length > 0) { initJustifiedGallery($hideContent.find('.justified-gallery')) } } }) } +} +const tabsClick = function () { const $tab = $('#article-container .tabs') - $tab.find('.tab button').on('click', function (e) { + $tab.find('.tab > button').on('click', function (e) { const $this = $(this) const $tabItem = $this.parent() @@ -760,12 +737,14 @@ $(function () { $tacbContent.find('> .tab-item-content').removeClass('active') $tacbContent.find(`> ${tabId}`).addClass('active') const $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery') - if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) { + if ($isTabJustifiedGallery.length > 0) { initJustifiedGallery($isTabJustifiedGallery) } } }) +} +const cardCategoryToggle = function () { const $cardCategory = $('.card-category-list-item.parent a') $cardCategory.on('click', function (e) { if ($(event.target).hasClass('card-category-list-icon')) { @@ -775,7 +754,9 @@ $(function () { return false } }) +} +const switchComments = function () { let switchDone = false $('#switch-comments-btn').change(function () { $('#post-comment > .comment-wrap > div').each(function () { @@ -793,24 +774,83 @@ $(function () { loadOtherComment() } }) +} - if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG.noticeOutdate !== undefined) { - const data = GLOBAL_CONFIG.noticeOutdate - const diffDate = function (d) { - const dateNow = new Date() - const datePost = new Date(d.replace(/-/g, '/')) - const dateDiff = dateNow.getTime() - datePost.getTime() - const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) - return dayDiff - } - var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate) - if (diffDay >= data.limitDay) { - const code = `
${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}
` - if (data.position === 'top') { - $('#article-container').prepend(code) - } else { - $('#article-container').append(code) - } +const postNoticeUpdate = function () { + const data = GLOBAL_CONFIG.noticeOutdate + var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate) + if (diffDay >= data.limitDay) { + const code = `
${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}
` + if (data.position === 'top') { + $('#article-container').prepend(code) + } else { + $('#article-container').append(code) } } +} + +/** + * lazyload + */ + +if (GLOBAL_CONFIG.islazyload) { + window.lazyLoadOptions = { + elements_selector: 'img', + threshold: 0, + data_src: 'lazy-src' + } + window.addEventListener( + 'LazyLoad::Initialized', + function (event) { + window.lazyLoadInstance = event.detail.instance + }, + false + ) +} + +const unrefreshFn = function () { + $(window).on('resize', function () { + if (window.innerWidth < 768) adjustMenu(0) + else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1) + else adjustMenu(2) + }) + + subMenuFn() + GLOBAL_CONFIG.copyright !== undefined && addCopyright() + GLOBAL_CONFIG.baiduPush && baiduPush() +} + +const refreshFn = function () { + initAjust() + + if (GLOBAL_CONFIG_SITE.isPost) { + sidebarAutoOpen() + toggleSidebarFn() + GLOBAL_CONFIG_SITE.isSidebar && tocFn() + fontChange() + readModeToggle() + GLOBAL_CONFIG.noticeOutdate !== undefined && postNoticeUpdate() + } + + sidebarFn() + GLOBAL_CONFIG_SITE.isHome && indexSrollDown() + addHightlightTool() + GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() + justifiedGalleryRun() + lightBox() + scrollFn() + backtotop() + rightsideConfigClick() + switchDarkmode() + GLOBAL_CONFIG.runtime && runtimeShow() + addTableWrap() + tagHideClick() + tabsClick() + cardCategoryToggle() + switchComments() +} + +$(function () { + refreshFn() + unrefreshFn() }) diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index e0fdf94..4f0632b 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -1,9 +1,9 @@ $(function () { - $('a.social-icon.search').on('click', function () { + const openSearch = () => { $('body').css({ width: '100%', overflow: 'hidden' }) - $('.search-dialog').css('display', 'block') + $('#algolia-search').css('display', 'block') $('.ais-search-box--input').focus() - $('.search-mask').fadeIn() + $('#search-mask').fadeIn() // shortcut: ESC document.addEventListener('keydown', function f (event) { if (event.code === 'Escape') { @@ -11,27 +11,35 @@ $(function () { document.removeEventListener('keydown', f) } }) - }) + } - const closeSearch = function () { - $('body').css('width', '') - $('body').css('overflow', '') - $('.search-dialog').css({ + const closeSearch = () => { + $('body').css({ width: '', overflow: '' }) + $('#algolia-search').css({ animation: 'search_close .5s' }) - $('.search-dialog').animate({}, function () { - setTimeout(function () { - $('.search-dialog').css({ - animation: '', - display: 'none' - }) - }, 500) - }) + setTimeout(function () { + $('#algolia-search').css({ + animation: '', + display: 'none' + }) + }, 500) - $('.search-mask').fadeOut() + $('#search-mask').fadeOut() } - $('.search-mask, .search-close-button').on('click touchstart', closeSearch) + + const searchClickFn = () => { + $('a.social-icon.search').on('click', openSearch) + $('#search-mask, .search-close-button').on('click touchstart', closeSearch) + } + + searchClickFn() + + window.addEventListener('pjax:success', function () { + closeSearch() + searchClickFn() + }) const algolia = GLOBAL_CONFIG.algolia const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName @@ -130,4 +138,8 @@ $(function () { }) ) search.start() + + window.pjax && search.on('render', () => { + window.pjax.refresh(document.getElementById('algolia-hits')) + }) }) diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index bc600ad..b23f1f2 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -1,13 +1,13 @@ $(function () { let loadFlag = false - $('a.social-icon.search').on('click', function () { + const openSearch = function () { $('body').css({ width: '100%', overflow: 'hidden' }) - $('.search-dialog').css('display', 'block') + $('#local-search').css('display', 'block') $('#local-search-input input').focus() - $('.search-mask').fadeIn() + $('#search-mask').fadeIn() if (!loadFlag) { search(GLOBAL_CONFIG.localSearch.path) loadFlag = true @@ -20,27 +20,37 @@ $(function () { document.removeEventListener('keydown', f) } }) - }) + } const closeSearch = function () { - $('body').css('width', '') - $('body').css('overflow', '') - $('.search-dialog').css({ + $('body').css({ + width: '', + overflow: '' + }) + $('#local-search').css({ animation: 'search_close .5s' }) - $('.search-dialog').animate({}, function () { - setTimeout(function () { - $('.search-dialog').css({ - animation: '', - display: 'none' - }) - }, 500) - }) + setTimeout(function () { + $('#local-search').css({ + animation: '', + display: 'none' + }) + }, 500) - $('.search-mask').fadeOut() + $('#search-mask').fadeOut() } - $('.search-mask, .search-close-button').on('click touchstart', closeSearch) + + const searchClickFn = () => { + $('a.social-icon.search').on('click', openSearch) + $('#search-mask, .search-close-button').on('click', closeSearch) + } + + searchClickFn() + window.addEventListener('pjax:success', function () { + $('#local-search').is(':visible') && closeSearch() + searchClickFn() + }) function search (path) { $.ajax({ @@ -145,6 +155,7 @@ $(function () { } str += '' $resultContent.innerHTML = str + window.pjax && window.pjax.refresh($resultContent) }) } }) diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js index 65af1ec..f2c029c 100644 --- a/source/js/tw_cn.js +++ b/source/js/tw_cn.js @@ -6,7 +6,6 @@ const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0 const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字 const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改 - const translateButtonId = 'translateLink' // 默認互換id let currentEncoding = defaultEncoding const targetEncodingCookie = 'translate-chn-cht' let targetEncoding = @@ -86,7 +85,7 @@ return str } function translateInitilization () { - translateButtonObject = document.getElementById(translateButtonId) + translateButtonObject = document.getElementById('translateLink') if (translateButtonObject) { if (currentEncoding !== targetEncoding) { setTimeout(function () { translateBody() }, translateDelay) @@ -96,4 +95,5 @@ } } translateInitilization() + document.addEventListener('pjax:complete', translateInitilization) })() diff --git a/source/js/utils.js b/source/js/utils.js index e999462..19ef9fa 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -59,25 +59,6 @@ function sidebarPaddingR () { } } -// iPadOS -function isIpad () { - return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 -} - -function isTMobile () { - const ua = navigator.userAgent - const pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g - return window.screen.width < 992 && pa.test(ua) -} - -function isMobile () { - return this.isIpad() || this.isTMobile() -} - -function isDesktop () { - return !this.isMobile() -} - function scrollToDest (name, offset = 0) { const scrollOffset = $(name).offset() $('body,html').animate({ @@ -85,26 +66,6 @@ function scrollToDest (name, offset = 0) { }) }; -function loadScript (url, callback) { - const script = document.createElement('script') - script.type = 'text/javascript' - if (script.readyState) { // IE - script.onreadystatechange = function () { - if (script.readyState === 'loaded' || - script.readyState === 'complete') { - script.onreadystatechange = null - callback() - } - } - } else { // Others - script.onload = function () { - callback() - } - } - script.src = url - document.body.appendChild(script) -}; - function snackbarShow (text, showAction, duration) { const sa = (typeof showAction !== 'undefined') ? showAction : false const dur = (typeof duration !== 'undefined') ? duration : 2000 @@ -147,12 +108,10 @@ const initJustifiedGallery = function (selector) { }) } -/** - * lazyload - */ -if (GLOBAL_CONFIG.islazyload) { - window.lazyLoadOptions = { - elements_selector: 'img', - threshold: 0 - } +const diffDate = function (d) { + const dateNow = new Date() + const datePost = new Date(d.replace(/-/g, '/')) + const dateDiff = dateNow.getTime() - datePost.getTime() + const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) + return dayDiff }