diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index f8c2d62..1deada7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -26,7 +26,7 @@ If you are a problem when visiting the website, please open your browser 'develo - [] 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 [Butterfly Documentation](https://demo.jerryc.me/posts/21cfbf15/). +- [] Yes, I have read [Butterfly Documentation](https://butterfly.js.org/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 diff --git a/README.md b/README.md index 8ee13da..4e851b4 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ npm i hexo-theme-butterfly - [x] Related articles - [x] Displays outdated notice for a post - [x] Share (AddThis/Sharejs/Addtoany) -- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments) +- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo） - [x] Multiple Comment System Support - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp) - [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics) diff --git a/README_CN.md b/README_CN.md index 3a6e6a8..713e6f4 100644 --- a/README_CN.md +++ b/README_CN.md @@ -71,7 +71,7 @@ theme: butterfly - [x] 顯示相關文章 - [x] 過期文章提醒 - [x] 多種分享系統（AddThis/Sharejs/Addtoany） -- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments） +- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo） - [x] 支持雙評論部署 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp） - [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析） diff --git a/_config.yml b/_config.yml index 46eba27..966bcd5 100644 --- a/_config.yml +++ b/_config.yml @@ -542,6 +542,7 @@ ClickShowText: # - LOVE # - YOU fontSize: 15px + random: false mobile: false # Default display mode (網站默認的顯示模式) @@ -814,6 +815,9 @@ Open_Graph_meta: true # Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度) fragment_cache: true +# Add the vendor prefixes to ensure compatibility +css_prefix: true + # Inject # Insert the code to head (before '' tag) and the bottom (before '' tag) # 插入代码到头部 之前 和 底部 之前 diff --git a/languages/default.yml b/languages/default.yml index d1699c3..bc5dcbc 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -41,7 +41,6 @@ local_search: label: Local search input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" - powered_by: Powered by pagination: prev: Previous Post diff --git a/languages/en.yml b/languages/en.yml index d1699c3..bc5dcbc 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -41,7 +41,6 @@ local_search: label: Local search input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" - powered_by: Powered by pagination: prev: Previous Post diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 2a1a762..16c45d3 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -42,8 +42,6 @@ local_search: label: 本地搜索 input_placeholder: 搜索文章 hits_empty: '找不到您查询的内容：${query}' - powered: '提供支持' - by: 由 pagination: prev: 上一篇 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 2b30d2a..aa250aa 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -42,8 +42,6 @@ local_search: label: 本地搜尋 input_placeholder: 搜尋文章 hits_empty: '找不到您查詢的內容：${query}' - powered: '提供支援' - by: 由 pagination: prev: 上一篇 diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 8d912b7..523655b 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -1,5 +1,4 @@ div - script(src=url_for(theme.CDN.jquery)) script(src=url_for(theme.CDN.utils)) script(src=url_for(theme.CDN.main)) @@ -8,11 +7,9 @@ div if theme.medium_zoom script(src=url_for(theme.CDN.medium_zoom)) - else if theme.fancybox - script(src=url_for(theme.CDN.fancybox)) if theme.instantpage - script(src=url_for(theme.CDN.instantpage) type="module" defer) + script(src=url_for(theme.CDN.instantpage) type="module") if theme.lazyload.enable script(src=url_for(theme.CDN.lazyload)) @@ -35,9 +32,6 @@ div .js-pjax if theme.subtitle.enable && is_home() && theme.index_img !== false include ./third-party/subtitle.pug - - if page.type === 'artitalk' - include ./third-party/artitalk.pug include ./third-party/math/index.pug diff --git a/layout/includes/head.pug b/layout/includes/head.pug index ec8a57a..c3497ec 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -53,9 +53,6 @@ if (theme.pwa && theme.pwa.enable) link(rel='stylesheet', href=url_for(theme.CDN.main_css)) link(rel='stylesheet', href=url_for(theme.CDN.fontawesome)) -if theme.fancybox - link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css)) - if (theme.snackbar && theme.snackbar.enable) link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 99e3001..9a4b869 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -54,7 +54,8 @@ if (theme.ClickShowText && theme.ClickShowText.enable) { ClickShowText = JSON.stringify({ text: theme.ClickShowText.text.join(","), - fontSize: theme.ClickShowText.fontSize + fontSize: theme.ClickShowText.fontSize, + random: theme.ClickShowText.random }) } @@ -119,9 +120,16 @@ script. ClickShowText: !{ClickShowText}, lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}', Snackbar: !{Snackbar}, - justifiedGallery: { - js: '!{theme.CDN.justifiedGallery_js}', - css: '!{theme.CDN.justifiedGallery_css}' + source: { + jQuery: '!{url_for(theme.CDN.jquery)}', + justifiedGallery: { + js: '!{url_for(theme.CDN.justifiedGallery_js)}', + css: '!{url_for(theme.CDN.justifiedGallery_css)}' + }, + fancybox: { + js: '!{url_for(theme.CDN.fancybox)}', + css: '!{url_for(theme.CDN.fancybox_css)}' + } }, isPhotoFigcaption: !{theme.photofigcaption}, islazyload: !{theme.lazyload.enable}, @@ -156,5 +164,17 @@ script. } } - - + // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript + const getScript = url => new Promise((resolve, reject) => { + const script = document.createElement('script') + script.src = url + script.async = true + script.onerror = reject + script.onload = script.onreadystatechange = function() { + const loadState = this.readyState + if (loadState && loadState !== 'loaded' && loadState !== 'complete') return + script.onload = script.onreadystatechange = null + resolve() + } + document.head.appendChild(script) + }) \ No newline at end of file diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug index 3d7b9e9..1200a20 100644 --- a/layout/includes/head/preconnect.pug +++ b/layout/includes/head/preconnect.pug @@ -1,7 +1,7 @@ link(rel="preconnect" href="//cdn.jsdelivr.net") if theme.google_analytics - link(rel="preconnect" href="//www.google-analytics.com" crossorigin) + link(rel="preconnect" href="//www.google-analytics.com" crossorigin='') if theme.baidu_analytics link(rel="preconnect" href="//hm.baidu.com") @@ -13,7 +13,7 @@ if theme.cnzz_analytics link(rel="preconnect" href="//s4.cnzz.com") if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1 - link(rel="preconnect" href="//fonts.googleapis.com" crossorigin) + link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='') if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv link(rel="preconnect" href="//busuanzi.ibruce.info") diff --git a/layout/includes/header/nav.pug b/layout/includes/header/nav.pug index 332adf6..e5660e1 100644 --- a/layout/includes/header/nav.pug +++ b/layout/includes/header/nav.pug @@ -2,15 +2,15 @@ nav#nav span#blog_name a#site-name(href=url_for('/')) #[=config.title] - span#menus + #menus if (theme.algolia_search.enable || theme.local_search.enable) - #search_button + #search-button a.site-page.social-icon.search i.fas.fa-search.fa-fw span=' '+_p('search') !=fragment_cache('menus', function(){return partial('includes/header/menu_item')}) - span#toggle-menu.close + #toggle-menu a.site-page i.fas.fa-bars.fa-fw diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index 7748b8e..b436dff 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -78,4 +78,4 @@ mixin postUI(posts) if theme.ad && theme.ad.index if (index + 1) % 3 == 0 - .recent-post-item.ad-height!=theme.ad.index + .recent-post-item.ads-wrap!=theme.ad.index diff --git a/layout/includes/page/artitalk.pug b/layout/includes/page/artitalk.pug index c5128bb..940b046 100644 --- a/layout/includes/page/artitalk.pug +++ b/layout/includes/page/artitalk.pug @@ -1,4 +1,28 @@ +- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false + if top_img === false h1.page-title= page.title -#artitalk_main \ No newline at end of file +#artitalk_main +script. + (()=>{ + let setting = { + appId: '!{theme.artitalk.appId}', + appKey: '!{theme.artitalk.appKey}', + } + + if (!{Boolean(option)}) { + const otherSetting = !{option} + setting = Object.assign({}, setting, otherSetting) + } + + const init = () => { + new Artitalk(setting) + } + + if (typeof Artitalk === 'function') { + init() + } else { + getScript('!{theme.CDN.artitalk}').then(init) + } + })() \ No newline at end of file diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug index ab09c1a..488055c 100644 --- a/layout/includes/pagination.pug +++ b/layout/includes/pagination.pug @@ -18,9 +18,9 @@ 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-lazy-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)}'` alt='cover of previous post') else - img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) + img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post') .pagination-info .label=_p('pagination.prev') .prev_info=page.prev.title @@ -31,9 +31,9 @@ else .next-post(class=hasPagePrev) a(href=url_for(page.next.path)) if theme.lazyload.enable - img.next-cover(data-lazy-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)}'` alt='cover of next post') else - img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) + img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post') .pagination-info .label=_p('pagination.next') .next_info=page.next.title \ No newline at end of file diff --git a/layout/includes/third-party/artitalk.pug b/layout/includes/third-party/artitalk.pug deleted file mode 100644 index 40490fb..0000000 --- a/layout/includes/third-party/artitalk.pug +++ /dev/null @@ -1,24 +0,0 @@ -- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false - -script. - (()=>{ - let setting = { - appId: '!{theme.artitalk.appId}', - appKey: '!{theme.artitalk.appKey}', - } - - if (!{Boolean(option)}) { - const otherSetting = !{option} - setting = Object.assign({}, setting, otherSetting) - } - - const init = () => { - new Artitalk(setting) - } - - if (typeof Artitalk === 'function') { - init() - } else { - $.getScript('!{theme.CDN.artitalk}',init) - } - })() \ No newline at end of file diff --git a/layout/includes/third-party/baidu_push.pug b/layout/includes/third-party/baidu_push.pug index 13faf11..ac87a7b 100644 --- a/layout/includes/third-party/baidu_push.pug +++ b/layout/includes/third-party/baidu_push.pug @@ -3,11 +3,11 @@ if theme.baidu_push (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'; + if (curProtocol === 'https') { + bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ - bp.src = 'http://push.zhanzhang.baidu.com/push.js'; + bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } bp.dataset.pjax = '' const s = document.getElementsByTagName("script")[0]; diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug index e2f3136..0e8d2f9 100644 --- a/layout/includes/third-party/comments/disqusjs.pug +++ b/layout/includes/third-party/comments/disqusjs.pug @@ -29,7 +29,7 @@ script. if (window.disqusJsLoad) initDisqusjs() else { addDisqusjsCSS() - $.getScript('!{url_for(theme.CDN.disqusjs)}', initDisqusjs) + getScript('!{url_for(theme.CDN.disqusjs)}').then(initDisqusjs) window.disqusJsLoad = true } } diff --git a/layout/includes/third-party/comments/gitalk.pug b/layout/includes/third-party/comments/gitalk.pug index 08bc422..dcd6eb6 100644 --- a/layout/includes/third-party/comments/gitalk.pug +++ b/layout/includes/third-party/comments/gitalk.pug @@ -28,7 +28,7 @@ script. if (typeof Gitalk === 'function') initGitalk() else { addGitalkSource() - $.getScript('!{url_for(theme.CDN.gitalk)}', initGitalk) + getScript('!{url_for(theme.CDN.gitalk)}').then(initGitalk) } } diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 1e49ecd..b8cf4cf 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -9,7 +9,7 @@ script. if (typeof twikoo.init === 'function') { init() } else { - $.getScript('!{theme.CDN.twikoo}', init) + getScript('!{theme.CDN.twikoo}').then(init) } } diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug index 6e09a81..8bb75ae 100644 --- a/layout/includes/third-party/comments/valine.pug +++ b/layout/includes/third-party/comments/valine.pug @@ -36,7 +36,7 @@ script. } if (typeof Valine === 'function') initValine() - else $.getScript('!{url_for(theme.CDN.valine)}', initValine) + else getScript('!{url_for(theme.CDN.valine)}').then(initValine) } if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) { diff --git a/layout/includes/third-party/math/katex.pug b/layout/includes/third-party/math/katex.pug index 6690428..773bb99 100644 --- a/layout/includes/third-party/math/katex.pug +++ b/layout/includes/third-party/math/katex.pug @@ -2,6 +2,9 @@ link(rel="stylesheet" type="text/css" href=theme.CDN.katex) script(src=url_for(theme.CDN.katex_copytex)) link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css) script. - $(function () { - $('span.katex-display').wrap('
') - }) \ No newline at end of file + (() => { + document.querySelectorAll('#article-container span.katex-display').forEach(item => { + btf.wrap(item, 'div', '', 'katex-wrap') + }) + })() + \ No newline at end of file diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index b872a79..801ce21 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/layout/includes/third-party/math/mermaid.pug @@ -2,7 +2,7 @@ script. if (document.getElementsByClassName('mermaid').length) { if (window.mermaidJsLoad) mermaid.init() else { - $.getScript('!{theme.CDN.mermaid}', function () { + getScript('!{theme.CDN.mermaid}').then(() => { window.mermaidJsLoad = true mermaid.initialize({ theme: '!{theme.mermaid.theme}', diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug index 5ed18db..fbbe281 100644 --- a/layout/includes/third-party/newest-comments/disqus-comment.pug +++ b/layout/includes/third-party/newest-comments/disqus-comment.pug @@ -14,24 +14,25 @@ script. } const getDisqusComment = () => { - let disqusArray = [] - $.getJSON('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}', function(data){ - $.each(data.response, (i, item) => { - disqusArray.push({ - 'avatar': item.author.avatar.cache, - 'content': changeContent(item.message), - 'nick': item.author.name, - 'url': item.url, - 'date': item.createdAt + fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}') + .then(response => response.json()) + .then(data => { + const disqusArray = data.response.map(item => { + return { + 'avatar': item.author.avatar.cache, + 'content': changeContent(item.message), + 'nick': item.author.name, + 'url': item.url, + 'date': item.createdAt + } }) + // set expiry to 10 min + saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24)) + generateHtml(disqusArray) + }).catch(e => { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" }) - // set expiry to 10 min - saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24)) - generateHtml(disqusArray) - }).fail(()=>{ - const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" - }) } const generateHtml = array => { diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug index e7e7bbc..a559ec0 100644 --- a/layout/includes/third-party/newest-comments/github-issues.pug +++ b/layout/includes/third-party/newest-comments/github-issues.pug @@ -14,23 +14,24 @@ script. } const getGithubIssues = () => { - let githubArray = [] - $.getJSON('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1', (data) => { - $.each(data, (index, item) => { - githubArray.push({ - 'avatar': item.user.avatar_url, - 'content': changeContent(item.body), - 'nick': item.user.login, - 'url': item.html_url, - 'date': item.updated_at + fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1') + .then(response => response.json()) + .then(data => { + const githubArray = data.map(item => { + return { + 'avatar': item.user.avatar_url, + 'content': changeContent(item.body), + 'nick': item.user.login, + 'url': item.html_url, + 'date': item.updated_at + } }) + saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24)) + generateHtml(githubArray) + }).catch(e => { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" }) - saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24)) - generateHtml(githubArray) - }).fail(()=>{ - const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" - }) } const generateHtml = array => { diff --git a/layout/includes/third-party/newest-comments/leancloud.pug b/layout/includes/third-party/newest-comments/leancloud.pug index 2e6910a..edd80f9 100644 --- a/layout/includes/third-party/newest-comments/leancloud.pug +++ b/layout/includes/third-party/newest-comments/leancloud.pug @@ -51,9 +51,7 @@ script. } var settings = { - "url": `${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`, "method": "GET", - "timeout": 0, "headers": { "X-LC-Id": '!{theme.newest_comments.leancloud.appId}', "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}', @@ -61,26 +59,25 @@ script. }, } - $.ajax(settings).done((response) => { - var valineArray = [] - response.results.forEach((e)=>{ - valineArray.push({ - 'avatar': e.QQAvatar, - 'content': changeContent(e.comment), - 'mail': e.mail, - 'nick': e.nick, - 'url': e.url, - 'date': e.createdAt, + fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,settings) + .then(response => response.json()) + .then(data => { + const valineArray = data.results.map(function (e) { + return { + 'avatar': e.QQAvatar, + 'content': changeContent(e.comment), + 'mail': e.mail, + 'nick': e.nick, + 'url': e.url, + 'date': e.createdAt, + } }) - }) - - saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24)) - generateHtml(valineArray) - - }).fail(()=>{ - const $dom = document.querySelector('#card-newest-comments .aside-list') - $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" - }) + saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24)) + generateHtml(valineArray) + }).catch(e => { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + }) } const newestCommentInit = () => { diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug index 229c69b..e61305f 100644 --- a/layout/includes/third-party/pangu.pug +++ b/layout/includes/third-party/pangu.pug @@ -2,9 +2,10 @@ script. function panguFn () { if (typeof pangu === 'object') pangu.spacingElementById('content-inner') else { - $.getScript('!{url_for(theme.CDN.pangu)}', () => { - pangu.spacingElementById('content-inner') - }) + getScript('!{url_for(theme.CDN.pangu)}') + .then(() => { + pangu.spacingElementById('content-inner') + }) } } @@ -16,4 +17,4 @@ script. } } - document.addEventListener('DOMContentLoaded', panguFn) + document.addEventListener('DOMContentLoaded', panguInit) diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index e3c63be..0d41660 100644 --- a/layout/includes/third-party/pjax.pug +++ b/layout/includes/third-party/pjax.pug @@ -29,8 +29,12 @@ script. document.addEventListener('pjax:complete', function () { window.refreshFn() - $('script[data-pjax]').each(function () { - $(this).parent().append($(this).remove()) + document.querySelectorAll('script[data-pjax]').forEach(item => { + const newScript = document.createElement('script') + const content = item.text || item.textContent || item.innerHTML || "" + Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value)) + newScript.appendChild(document.createTextNode(content)) + item.parentNode.replaceChild(newScript, item) }) GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update() @@ -69,10 +73,8 @@ script. typeof typed === 'object' && typed.destroy() - $(window).off('scroll') - //reset readmode - $('body').hasClass('read-mode') && $('body').removeClass('read-mode') + const $bodyClassList = document.body.classList + $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode') }) - diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug index 69570a2..dec1569 100644 --- a/layout/includes/third-party/search/local-search.pug +++ b/layout/includes/third-party/search/local-search.pug @@ -7,18 +7,6 @@ input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input hr #local-search-results - #local-hits - #local-stats - #hr.local-search-stats__hr - case config.language - when "zh-CN" - span=_p("local_search.by") - | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search] - | #[span=_p("local_search.powered")] - when "en" - default - span=_p("local_search.powered_by") - | #[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 diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index ad995cc..84830d1 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -1,28 +1,34 @@ -- var source = theme.subtitle.source +- let source = theme.subtitle.source + case source when 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 - } - }) + fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json') + .then(response => response.json()) + .then(data => { + if (!{theme.subtitle.effect}) { + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var both = sub.unshift(data.text) + typed = new Typed('#subtitle', { + 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) + if (typeof Typed === 'function') { + subtitleType() + } else { + getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) + } } else { subtitleType() } @@ -30,27 +36,32 @@ case source when 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 - } - }) + fetch('https://v1.hitokoto.cn') + .then(response => response.json()) + .then(data => { + if (!{theme.subtitle.effect}) { + var from = '出自 ' + data.from + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var both = sub.unshift(data.hitokoto, from) + var typed = new Typed('#subtitle', { + 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) + if (typeof Typed === 'function') { + subtitleType() + } else { + getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) + } } else { subtitleType() } @@ -58,7 +69,7 @@ case source when 3 script. function subtitleType () { - $.getScript('http://yijuzhan.com/api/word.php?m=js', function () { + getScript('http://yijuzhan.com/api/word.php?m=js').then(() => { var con = str[0] if (!{theme.subtitle.effect}) { var from = '出自 ' + str[1] @@ -78,8 +89,11 @@ case source } if (!{theme.subtitle.effect}) { - if (typeof Typed === 'function') subtitleType() - else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + if (typeof Typed === 'function') { + subtitleType() + } else { + getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) + } } else { subtitleType() } @@ -87,7 +101,7 @@ case source when 4 script. function subtitleType () { - $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () { + getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => { jinrishici.load(function (result) { if (!{theme.subtitle.effect}) { var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') @@ -108,8 +122,11 @@ case source } if (!{theme.subtitle.effect}) { - if (typeof Typed === 'function') subtitleType() - else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + if (typeof Typed === 'function') { + subtitleType() + } else { + getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) + } } else { subtitleType() } @@ -131,8 +148,11 @@ case source } if (!{theme.subtitle.effect}) { - if (typeof Typed === 'function') subtitleType() - else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) + if (typeof Typed === 'function') { + subtitleType() + } else { + getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) + } } else { subtitleType() - } \ No newline at end of file + } diff --git a/layout/includes/widget/card_ad.pug b/layout/includes/widget/card_ad.pug index c05f774..b8e00fd 100644 --- a/layout/includes/widget/card_ad.pug +++ b/layout/includes/widget/card_ad.pug @@ -1,2 +1,3 @@ -.card-widget.card-ad - != theme.ad.aside +if theme.ad && theme.ad.aside + .card-widget.ads-wrap + != theme.ad.aside diff --git a/layout/includes/widget/card_announcement.pug b/layout/includes/widget/card_announcement.pug index 5f6fbd1..0dcda40 100644 --- a/layout/includes/widget/card_announcement.pug +++ b/layout/includes/widget/card_announcement.pug @@ -1,6 +1,7 @@ -.card-widget.card-announcement - .card-content - .item-headline - i.fas.fa-bullhorn.card-announcement-animation - span= _p('aside.card_announcement') - .announcement_content!= theme.aside.card_announcement.content \ No newline at end of file +if theme.aside.card_announcement.enable + .card-widget.card-announcement + .card-content + .item-headline + i.fas.fa-bullhorn.card-announcement-animation + span= _p('aside.card_announcement') + .announcement_content!= theme.aside.card_announcement.content \ No newline at end of file diff --git a/layout/includes/widget/card_archives.pug b/layout/includes/widget/card_archives.pug index dfb5775..b1ce93d 100644 --- a/layout/includes/widget/card_archives.pug +++ b/layout/includes/widget/card_archives.pug @@ -1,11 +1,12 @@ -.card-widget.card-archives - .card-content - .item-headline - i.fas.fa-archive - span= _p('aside.card_archives') - - - let type = theme.aside.card_archives.type || 'monthly' - - let format = theme.aside.card_archives.format || 'MMMM YYYY' - - let order = theme.aside.card_archives.order || -1 - - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8 - != aside_archives({ type:type, format: format, order: order, limit: limit }) +if theme.aside.card_archives.enable + .card-widget.card-archives + .card-content + .item-headline + i.fas.fa-archive + span= _p('aside.card_archives') + + - let type = theme.aside.card_archives.type || 'monthly' + - let format = theme.aside.card_archives.format || 'MMMM YYYY' + - let order = theme.aside.card_archives.order || -1 + - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8 + != aside_archives({ type:type, format: format, order: order, limit: limit }) diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index b1faefb..00ed643 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -1,36 +1,37 @@ -.card-widget.card-info - .card-content - .card-info-avatar.is-center - if theme.lazyload.enable - img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") - else - img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") - .author-info__name= config.author - .author-info__description!= theme.aside.card_author.description || config.description +if theme.aside.card_author.enable + .card-widget.card-info + .card-content + .card-info-avatar.is-center + if theme.lazyload.enable + img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") + else + img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") + .author-info__name= config.author + .author-info__description!= theme.aside.card_author.description || config.description - .card-info-data - if site.posts.length - .card-info-data-item.is-center - a(href=url_for(config.archive_dir) + '/') - .headline= _p('aside.articles') - .length-num= site.posts.length + .card-info-data + if site.posts.length + .card-info-data-item.is-center + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length - if site.tags.length - .card-info-data-item.is-center - a(href=url_for(config.tag_dir) + '/') - .headline= _p('aside.tags') - .length-num= site.tags.length + if site.tags.length + .card-info-data-item.is-center + a(href=url_for(config.tag_dir) + '/') + .headline= _p('aside.tags') + .length-num= site.tags.length - if site.categories.length - .card-info-data-item.is-center - a(href=url_for(config.category_dir) + '/') - .headline= _p('aside.categories') - .length-num= site.categories.length + if site.categories.length + .card-info-data-item.is-center + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length - 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 - !=fragment_cache('social', function(){return partial('includes/header/social')}) + 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 + !=fragment_cache('social', function(){return partial('includes/header/social')}) diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug index 55c1827..eab8ba8 100644 --- a/layout/includes/widget/card_categories.pug +++ b/layout/includes/widget/card_categories.pug @@ -1,9 +1,8 @@ -if site.categories.length - .card-widget.card-categories - .card-content - .item-headline - i.fas.fa-folder-open - span= _p('aside.card_categories') - !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand }) - - +if theme.aside.card_categories.enable + if site.categories.length + .card-widget.card-categories + .card-content + .item-headline + i.fas.fa-folder-open + span= _p('aside.card_categories') + !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand }) diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug index 76a19aa..bf88d05 100644 --- a/layout/includes/widget/card_newest_comment.pug +++ b/layout/includes/widget/card_newest_comment.pug @@ -1,7 +1,8 @@ -.card-widget#card-newest-comments - .card-content - .item-headline - i.fas.fa-bolt - span= _p('aside.card_newest_comments.headline') - .aside-list - span= _p('aside.card_newest_comments.loading_text') +if theme.newest_comments.enable + .card-widget#card-newest-comments + .card-content + .item-headline + i.fas.fa-bolt + span= _p('aside.card_newest_comments.headline') + .aside-list + span= _p('aside.card_newest_comments.loading_text') diff --git a/layout/includes/widget/card_recent_post.pug b/layout/includes/widget/card_recent_post.pug index 03cba6e..fe90d70 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/layout/includes/widget/card_recent_post.pug @@ -1,27 +1,28 @@ -.card-widget.card-recent-post - .card-content - .item-headline - i.fas.fa-history - span= _p('aside.card_recent_post') - .aside-list - - 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){ - - let link = article.link || article.path - - let title = article.title || _p('no_title') - - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' - - let post_cover = article.cover - .aside-list-item(class=no_cover) - if post_cover && theme.cover.aside_enable - a.thumbnail(href=url_for(link) title=title) - if theme.lazyload.enable - img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) +if theme.aside.card_recent_post.enable + .card-widget.card-recent-post + .card-content + .item-headline + i.fas.fa-history + span= _p('aside.card_recent_post') + .aside-list + - 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){ + - let link = article.link || article.path + - let title = article.title || _p('no_title') + - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' + - let post_cover = article.cover + .aside-list-item(class=no_cover) + if post_cover && theme.cover.aside_enable + a.thumbnail(href=url_for(link) title=title) + if theme.lazyload.enable + img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) + else + img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) + .content + a.title(href=url_for(link) title=title)= title + if theme.aside.card_recent_post.sort === 'updated' + time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)] else - img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) - .content - a.title(href=url_for(link) title=title)= title - if theme.aside.card_recent_post.sort === 'updated' - time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)] - else - time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] - - }) + time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] + - }) \ No newline at end of file diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug index 4ca6ee6..1595ff7 100644 --- a/layout/includes/widget/card_tags.pug +++ b/layout/includes/widget/card_tags.pug @@ -1,12 +1,13 @@ -if site.tags.length - .card-widget.card-tags - .card-content - .item-headline - i.fas.fa-tags - span= _p('aside.card_tags') +if theme.aside.card_tags.enable + if site.tags.length + .card-widget.card-tags + .card-content + .item-headline + i.fas.fa-tags + span= _p('aside.card_tags') - - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 - if theme.aside.card_tags.color - .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) - else - .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'}) + - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 + if theme.aside.card_tags.color + .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) + else + .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'}) diff --git a/layout/includes/widget/card_webinfo.pug b/layout/includes/widget/card_webinfo.pug index ab96147..7b07218 100644 --- a/layout/includes/widget/card_webinfo.pug +++ b/layout/includes/widget/card_webinfo.pug @@ -1,31 +1,32 @@ -.card-widget.card-webinfo - .card-content - .item-headline - i.fas.fa-chart-line - span= _p('aside.card_webinfo.headline') - .webinfo - if theme.aside.card_webinfo.post_count - .webinfo-item - .item-name= _p('aside.card_webinfo.article_name') + " :" - .item-count= site.posts.length - if theme.runtimeshow.enable - .webinfo-item - .item-name= _p('aside.card_webinfo.runtime.name') + " :" - .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) - if theme.wordcount.enable && theme.wordcount.total_wordcount - .webinfo-item - .item-name=_p('aside.card_webinfo.site_wordcount') + " :" - .item-count=totalcount(site) - if theme.busuanzi.site_uv - .webinfo-item - .item-name= _p('aside.card_webinfo.site_uv_name') + " :" - .item-count#busuanzi_value_site_uv - if theme.busuanzi.site_pv - .webinfo-item - .item-name= _p('aside.card_webinfo.site_pv_name') + " :" - .item-count#busuanzi_value_site_pv - if theme.aside.card_webinfo.last_push_date - .webinfo-item - .item-name= _p('aside.card_webinfo.last_push_date.name') + " :" - .item-count#last-push-date(data-lastPushDate=date_xml(Date.now())) +if theme.aside.card_webinfo.enable + .card-widget.card-webinfo + .card-content + .item-headline + i.fas.fa-chart-line + span= _p('aside.card_webinfo.headline') + .webinfo + if theme.aside.card_webinfo.post_count + .webinfo-item + .item-name= _p('aside.card_webinfo.article_name') + " :" + .item-count= site.posts.length + if theme.runtimeshow.enable + .webinfo-item + .item-name= _p('aside.card_webinfo.runtime.name') + " :" + .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) + if theme.wordcount.enable && theme.wordcount.total_wordcount + .webinfo-item + .item-name=_p('aside.card_webinfo.site_wordcount') + " :" + .item-count=totalcount(site) + if theme.busuanzi.site_uv + .webinfo-item + .item-name= _p('aside.card_webinfo.site_uv_name') + " :" + .item-count#busuanzi_value_site_uv + if theme.busuanzi.site_pv + .webinfo-item + .item-name= _p('aside.card_webinfo.site_pv_name') + " :" + .item-count#busuanzi_value_site_pv + if theme.aside.card_webinfo.last_push_date + .webinfo-item + .item-name= _p('aside.card_webinfo.last_push_date.name') + " :" + .item-count#last-push-date(data-lastPushDate=date_xml(Date.now())) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index ec2a80e..92062eb 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,28 +1,17 @@ #aside_content.aside_content - if theme.aside.card_author.enable - !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) - if theme.aside.card_announcement.enable - !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) .sticky_layout if is_post() if showToc include ./card_post_toc.pug - if theme.aside.card_recent_post.enable - !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) - if theme.ad && theme.ad.aside - !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) else - if theme.aside.card_recent_post.enable - !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) - if theme.ad && theme.ad.aside - !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) - if theme.newest_comments.enable - !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache}) - if theme.aside.card_categories.enable - !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) - if theme.aside.card_tags.enable - !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache}) - if theme.aside.card_archives.enable - !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache}) - if theme.aside.card_webinfo.enable - !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) \ No newline at end of file + !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/layout/post.pug b/layout/post.pug index c57d99e..7249b9f 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -19,7 +19,7 @@ block content //- ad if theme.ad && theme.ad.post - .post-ad!=theme.ad.post + .ads-wrap!=theme.ad.post include includes/pagination.pug if theme.related_post && theme.related_post.enable diff --git a/package.json b/package.json index 180092b..d1c6640 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.3.0", + "version": "3.4.0-b1", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { @@ -26,7 +26,7 @@ "hexo-renderer-stylus": "^2.0.1", "hexo-renderer-pug": "^1.0.0" }, - "homepage": "https://demo.jerryc.me/", + "homepage": "https://butterfly.js.org/", "author": "Jerry ", "license": "Apache-2.0" } diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js index a787bad..bb83de5 100644 --- a/scripts/helpers/aside_categories.js +++ b/scripts/helpers/aside_categories.js @@ -65,11 +65,11 @@ hexo.extend.helper.register('aside_categories', function (categories, options) { result += '' - result += '' - if (child) { result += `` } + + result += '' } }) } diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js index a285008..6bec4c4 100644 --- a/scripts/tag/gallery.js +++ b/scripts/tag/gallery.js @@ -20,7 +20,7 @@ function galleryGroup (args) { return `
- + Group Image Gallery
${name}

${desrc}

diff --git a/scripts/tag/hide.js b/scripts/tag/hide.js index eb7059f..ae463c7 100644 --- a/scripts/tag/hide.js +++ b/scripts/tag/hide.js @@ -44,7 +44,7 @@ function hideBlock (args, content) { group += '"' return `
${hexo.render.renderSync({ text: content, engine: 'markdown' })}
` +
${hexo.render.renderSync({ text: content, engine: 'markdown' })}
` } function hideToggle (args, content) { diff --git a/scripts/tag/tabs.js b/scripts/tag/tabs.js index b818b46..050aeee 100644 --- a/scripts/tag/tabs.js +++ b/scripts/tag/tabs.js @@ -44,7 +44,7 @@ function postTabs (args, content) { const icon = tabIcon.trim() tabIcon.length > 0 && (tabIcon = ``) - const toTop = '' + const toTop = '' const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '' tabNav += `
    • ` diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 1ba495d..11f5473 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -151,6 +151,13 @@ if hexo-config('avatar.effect') == true 100% opacity: 1 +@keyframes to_hide + 0% + opacity: 1 + + 100% + opacity: 0 + @keyframes ribbon_to_show 0% opacity: 0 @@ -196,4 +203,4 @@ if hexo-config('avatar.effect') == true transform: translateX(200px) 100% - transform: translateX(0) \ No newline at end of file + transform: translateX(0) diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index fcecdb8..7c6b53f 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -57,16 +57,17 @@ body input::placeholder color: var(--font-color) -#web_bg - position: fixed - z-index: -999 - width: 100% - height: 100% - background: $web-bg - background-attachment: local - background-position: center - background-size: cover - background-repeat: no-repeat +if $web-bg + #web_bg + position: fixed + z-index: -999 + width: 100% + height: 100% + background: $web-bg + background-attachment: local + background-position: center + background-size: cover + background-repeat: no-repeat h1, h2, @@ -198,20 +199,13 @@ img max-width: 100% transition: all .2s -img[src=''], -img:not([src]) - opacity: 0 + &[src=''], + &:not([src]) + opacity: 0 .img-alt margin: -.5rem 0 .5rem color: #858585 &:hover - text-decoration: none !important - -.post-ad - margin: 2rem 0 - -.ad-height - display: block !important - height: auto !important \ No newline at end of file + text-decoration: none !important \ No newline at end of file diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index fccfaca..29e9f27 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -132,6 +132,7 @@ blockquote position: absolute right: 1.7rem opacity: 0 + transition: opacity .4s .copy-button position: absolute diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index ae9692e..c57da74 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -27,7 +27,7 @@ border-radius: 8px background: var(--card-bg) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) - transition: all .3s + transition: box-shadow .3s &:hover box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15) @@ -265,23 +265,38 @@ // toc #card-toc + +minWidth900() + right: 0 !important + +maxWidth900() position: fixed - right: 45px + right: -100% bottom: 30px z-index: 100 - display: none + max-height: calc(100% - 60px) width: $toc-mobile-width + opacity: 0 transform-origin: right bottom - animation: toc-open .3s - - .toc-child - display: block !important + // animation: toc-open .3s .toc-content overflow-y: auto max-height: calc(100vh - 120px) + +maxWidth900() + max-height: calc(100vh - 140px) + + .toc-child + display: none + + +maxWidth900() + display: block !important + + .toc-item + &.active + .toc-child + display: block + ol, li list-style: none diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 58fdc85..bfcce72 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -351,10 +351,10 @@ _:future, .menus_items display: none !important - #search_button span + #search-button span display: none !important - #search_button + #search-button display: inline padding: 0 0 0 .7rem diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 665fb5a..5c2ad25 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -275,3 +275,6 @@ no-beautify() color: $noticeOutdate-border content: '\f071' transform: translateY(-50%) + + .ads-wrap + margin: 2rem 0 diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 59bf70c..5ce560b 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -106,7 +106,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .error-img, #article-container iframe, img, - .gist + .gist, + .ads-wrap filter: brightness(.8) #aside_content .aside-list > .aside-list-item:not(:last-child) diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index f9a293e..e9ddf6e 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -43,6 +43,10 @@ order: 2 border-radius: 0 8px 8px 0 + &.ads-wrap + display: block !important + height: auto !important + .post_cover overflow: hidden width: 45% diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index 8f9fe95..0a0c918 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -57,9 +57,6 @@ color: $search-keyword-highlight font-weight: bold - .local-search-stats__hr - display: none !important - .search-result-list overflow-y: auto max-height: 10.5rem diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index 8395e74..bb76a4d 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -99,6 +99,9 @@ figure.gallery-group img opacity: 0 + .img-alt + display: none + .fancybox width: auto text-align: inherit \ No newline at end of file diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index 429f9f6..95534a5 100644 --- a/source/css/_tags/hide.styl +++ b/source/css/_tags/hide.styl @@ -10,6 +10,12 @@ &.open display: none + & + div + display: block + + & + span + display: inline + & > .hide-content display: none @@ -41,6 +47,9 @@ i transform: rotate(90deg) + & + div + display: block + & > .hide-content display: none margin: 1.5rem 1.2rem diff --git a/source/css/index.styl b/source/css/index.styl index 645f406..07cfc78 100644 --- a/source/css/index.styl +++ b/source/css/index.styl @@ -1,4 +1,6 @@ -@import 'nib' +if hexo-config('css_prefix') + @import 'nib' + @import '_third-party/normalize.min.css' // project @import 'var' diff --git a/source/js/main.js b/source/js/main.js index 5dda6ff..ebc842d 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,61 +1,57 @@ -$(function () { - const blogNameWidth = $('#site-name').width() - const menusWidth = $('#menus').width() +document.addEventListener('DOMContentLoaded', function () { + const blogNameWidth = document.getElementById('site-name').offsetWidth + const menusWidth = document.getElementById('menus').offsetWidth const adjustMenu = () => { - const $nav = $('#nav') + const $nav = document.getElementById('nav') let t if (window.innerWidth < 768) t = true - else t = blogNameWidth + menusWidth > $nav.width() - 30 + else t = blogNameWidth + menusWidth > $nav.offsetWidth - 100 if (t) { - $nav.addClass('hide-menu') + $nav.classList.add('hide-menu') } else { - $nav.removeClass('hide-menu') + $nav.classList.remove('hide-menu') } } // 初始化header const initAdjust = () => { adjustMenu() - $('#nav').addClass('show') + document.getElementById('nav').classList.add('show') } // sidebar menus const sidebarFn = () => { - const $toggleMenu = $('#toggle-menu') - const $mobileSidebarMenus = $('#sidebar-menus') - const $menuMask = $('#menu-mask') - const $body = $('body') + const $toggleMenu = document.getElementById('toggle-menu') + const $mobileSidebarMenus = document.getElementById('sidebar-menus') + const $menuMask = document.getElementById('menu-mask') + const $body = document.body function openMobileSidebar () { btf.sidebarPaddingR() - $body.css('overflow', 'hidden') - $menuMask.fadeIn() - $toggleMenu.removeClass('close').addClass('open') - $mobileSidebarMenus.addClass('open') + $body.style.overflow = 'hidden' + btf.fadeIn($menuMask, 0.5) + $mobileSidebarMenus.classList.add('open') } function closeMobileSidebar () { - $body.css({ overflow: '', 'padding-right': '' }) - $menuMask.fadeOut() - $toggleMenu.removeClass('open').addClass('close') - $mobileSidebarMenus.removeClass('open') + $body.style.cssText = "overflow: ''; padding-right: ''" + btf.fadeOut($menuMask, 0.5) + $mobileSidebarMenus.classList.remove('open') } - $toggleMenu.on('click', function () { - openMobileSidebar() - }) + $toggleMenu.addEventListener('click', openMobileSidebar) - $menuMask.on('click touchstart', function (e) { - if ($toggleMenu.hasClass('open')) { + $menuMask.addEventListener('click', e => { + if ($mobileSidebarMenus.classList.contains('open')) { closeMobileSidebar() } }) - $(window).on('resize', function (e) { - if (!$toggleMenu.is(':visible')) { - if ($toggleMenu.hasClass('open')) closeMobileSidebar() + window.addEventListener('resize', e => { + if (btf.isHidden($toggleMenu)) { + if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar() } }) } @@ -64,8 +60,8 @@ $(function () { * 首頁top_img底下的箭頭 */ const scrollDownInIndex = () => { - $('#scroll-down').on('click', function () { - btf.scrollToDest('#content-inner') + document.getElementById('scroll-down').addEventListener('click', function () { + btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300) }) } @@ -78,7 +74,7 @@ $(function () { const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined - const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"]') + const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]') if (isShowTool && $figureHighlight.length) { const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs' @@ -95,88 +91,100 @@ $(function () { highlightCopyEle = '
    ' } + const copy = (text, ctx) => { + if (document.queryCommandSupported && document.queryCommandSupported('copy')) { + document.execCommand('copy') + if (GLOBAL_CONFIG.Snackbar !== undefined) { + btf.snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + const prevEle = ctx.previousElementSibling + prevEle.innerText = GLOBAL_CONFIG.copy.success + prevEle.style.opacity = 1 + setTimeout(() => { prevEle.style.opacity = 0 }, 700) + } + } else { + if (GLOBAL_CONFIG.Snackbar !== undefined) { + btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport) + } else { + ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport + } + } + } + + // click events + const highlightCopyFn = (ele) => { + const $buttonParent = ele.parentNode + $buttonParent.classList.add('copy-true') + const selection = window.getSelection() + const range = document.createRange() + if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0]) + else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0]) + selection.removeAllRanges() + selection.addRange(range) + const text = selection.toString() + copy(text, ele.lastChild) + selection.removeAllRanges() + $buttonParent.classList.remove('copy-true') + } + + const highlightShrinkFn = (ele) => { + const $nextEle = [...ele.parentNode.children].slice(1) + ele.firstChild.classList.toggle('closed') + if (btf.isHidden($nextEle[0])) { + $nextEle.forEach(e => { e.style.display = 'block' }) + } else { + $nextEle.forEach(e => { e.style.display = 'none' }) + } + } + + const highlightToolsFn = function (e) { + const $target = e.target.classList + if ($target.contains('expand')) highlightShrinkFn(this) + else if ($target.contains('copy-button')) highlightCopyFn(this) + } + + const createEle = () => { + const newEle = document.createElement('div') + newEle.className = `highlight-tools ${highlightShrinkClass}` + newEle.addEventListener('click', highlightToolsFn) + return newEle + } + if (isHighlightLang) { if (isPrismjs) { - $figureHighlight.each(function () { - const $this = $(this) - const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code' + $figureHighlight.forEach(function (item) { + const langName = item.getAttribute('data-language') !== undefined ? item.getAttribute('data-language') : 'Code' const highlightLangEle = `
    ${langName}
    ` - $this.wrap('
    ').before(`
    ${highlightShrinkEle + highlightLangEle + highlightCopyEle}
    `) + btf.wrap(item, 'figure', '', 'highlight') + const newEle = createEle() + newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle + item.parentNode.insertBefore(newEle, item) }) } else { - $figureHighlight.each(function (i, o) { - const $this = $(this) - let langName = $this.attr('class').split(' ')[1] + $figureHighlight.forEach(function (item) { + let langName = item.getAttribute('class').split(' ')[1] if (langName === 'plain' || langName === undefined) langName = 'Code' const highlightLangEle = `
    ${langName}
    ` - $this.prepend(`
    ${highlightShrinkEle + highlightLangEle + highlightCopyEle}
    `) + const newEle = createEle() + newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle + item.insertBefore(newEle, item.firstChild) }) } } else { - const ele = `
    ${highlightShrinkEle + highlightCopyEle}
    ` - if (isPrismjs) $figureHighlight.wrap('
    ').before(ele) - else $figureHighlight.prepend(ele) - } - - /** - * 代碼收縮 - */ - - if (isHighlightShrink !== undefined) { - $('.highlight-tools >.expand').on('click', function () { - const $this = $(this) - const $table = $this.parent().nextAll() - $this.toggleClass('closed') - $table.is(':visible') ? $table.css('display', 'none') : $table.css('display', 'block') - }) - } - - /** - * 代碼copy - */ - if (isHighlightCopy) { - const copy = function (text, ctx) { - if (document.queryCommandSupported && document.queryCommandSupported('copy')) { - document.execCommand('copy') - if (GLOBAL_CONFIG.Snackbar !== undefined) { - btf.snackbarShow(GLOBAL_CONFIG.copy.success) - } else { - $(ctx).prev('.copy-notice') - .text(GLOBAL_CONFIG.copy.success) - .animate({ - opacity: 1 - }, 450, function () { - setTimeout(function () { - $(ctx).prev('.copy-notice').animate({ - opacity: 0 - }, 650) - }, 400) - }) - } - } else { - if (GLOBAL_CONFIG.Snackbar !== undefined) { - btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport) - } else { - $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) - } - } + if (isPrismjs) { + $figureHighlight.forEach(function (item) { + btf.wrap(item, 'figure', '', 'highlight') + const newEle = createEle() + newEle.innerHTML = highlightShrinkEle + highlightCopyEle + item.parentNode.insertBefore(newEle, item) + }) + } else { + $figureHighlight.forEach(function (item) { + const newEle = createEle() + newEle.innerHTML = highlightShrinkEle + highlightCopyEle + item.insertBefore(newEle, item.firstChild) + }) } - - // click events - $('.highlight-tools >.copy-button').on('click', function () { - const $buttonParent = $(this).parents('figure.highlight') - $buttonParent.addClass('copy-true') - const selection = window.getSelection() - const range = document.createRange() - if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0]) - else range.selectNodeContents($buttonParent.find('table .code pre')[0]) - selection.removeAllRanges() - selection.addRange(range) - const text = selection.toString() - copy(text, this) - selection.removeAllRanges() - $buttonParent.removeClass('copy-true') - }) } } } @@ -185,24 +193,27 @@ $(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) + document.querySelectorAll('#article-container img').forEach(function (item) { + const parentEle = item.parentNode + if (!parentEle.parentNode.classList.contains('justified-gallery')) { + const ele = document.createElement('div') + ele.className = 'img-alt is-center' + ele.textContent = item.getAttribute('alt') + parentEle.insertBefore(ele, item.nextSibling) } }) } /** * justified-gallery 圖庫排版 + * 需要 jQuery */ let detectJgJsLoad = false const runJustifiedGallery = function () { - const $justifiedGallery = $('.justified-gallery') + let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery') if ($justifiedGallery.length) { + $justifiedGallery = $($justifiedGallery) const $imgList = $justifiedGallery.find('img') $imgList.unwrap() if ($imgList.length) { @@ -214,8 +225,8 @@ $(function () { if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) else { - $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { btf.initJustifiedGallery($justifiedGallery) }) detectJgJsLoad = true @@ -228,21 +239,37 @@ $(function () { */ const addLightBox = function () { if (GLOBAL_CONFIG.lightbox === 'fancybox') { - const images = $('#article-container img:not(.gallery-group-img)').not($('a>img')) - images.each(function (i, o) { - 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(``) - }) + const images = document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') + if (images.length) { + btf.isJqueryLoad(() => { + const runFancybox = (ele) => { + ele.each(function (i, o) { + const $this = $(o) + const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src') + const dataCaption = $this.attr('alt') || '' + $this.wrap(``) + }) - $().fancybox({ - selector: '[data-fancybox]', - loop: true, - transitionEffect: 'slide', - protect: true, - buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], - hash: false - }) + $().fancybox({ + selector: '[data-fancybox]', + loop: true, + transitionEffect: 'slide', + protect: true, + buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], + hash: false + }) + } + + if (typeof $.fancybox === 'undefined') { + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () { + runFancybox($(images)) + }) + } else { + runFancybox($(images)) + } + }) + } } else { const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) zoom.on('open', function (event) { @@ -260,36 +287,36 @@ $(function () { const scrollFn = function () { let initTop = 0 let isChatShow = true - const $rightside = $('#rightside') - const $nav = $('#nav') + const $rightside = document.getElementById('rightside') + const $nav = document.getElementById('nav') const isChatBtnHide = typeof chatBtnHide === 'function' const isChatBtnShow = typeof chatBtnShow === 'function' - $(window).scroll(btf.throttle(function (event) { - const currentTop = $(this).scrollTop() + window.addEventListener('scroll', btf.throttle(function (e) { + const currentTop = window.scrollY || document.documentElement.scrollTop const isDown = scrollDirection(currentTop) if (currentTop > 56) { if (isDown) { - if ($nav.hasClass('visible')) $nav.removeClass('visible') + if ($nav.classList.contains('visible')) $nav.classList.remove('visible') if (isChatBtnShow && isChatShow === true) { chatBtnHide() isChatShow = false } } else { - if (!$nav.hasClass('visible')) $nav.addClass('visible') + if (!$nav.classList.contains('visible')) $nav.classList.add('visible') if (isChatBtnHide && isChatShow === false) { - window.chatBtnShow() + chatBtnShow() isChatShow = true } } - $nav.addClass('fixed') - if ($rightside.css('opacity') === '0') { - $rightside.css({ opacity: '1', transform: 'translateX(-38px)' }) + $nav.classList.add('fixed') + if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' } } else { if (currentTop === 0) { - $nav.removeClass('fixed').removeClass('visible') + $nav.classList.remove('fixed', 'visible') } - $rightside.css({ opacity: '', transform: '' }) + $rightside.style.cssText = "opacity: ''; transform: ''" } }, 200)) @@ -305,40 +332,29 @@ $(function () { * toc */ const tocFn = function () { - const $cardTocLayout = $('#card-toc') - const $cardToc = $cardTocLayout.find('.toc-content') - const $tocChild = $cardToc.find('.toc-child') - const $tocLink = $cardToc.find('.toc-link') - const $article = $('#article-container') - - $tocChild.hide() + const $cardTocLayout = document.getElementById('card-toc') + const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] + const $tocLink = $cardToc.querySelectorAll('.toc-link') + const $article = document.getElementById('article-container') // main of scroll - $(window).scroll(btf.throttle(function (event) { - const currentTop = $(this).scrollTop() + window.addEventListener('scroll', btf.throttle(function (e) { + const currentTop = window.scrollY || document.documentElement.scrollTop scrollPercent(currentTop) findHeadPosition(currentTop) }, 100)) - // expand toc-item - const expandToc = function ($item) { - if ($item.is(':visible')) { - return - } - $item.fadeIn(400) - } - const scrollPercent = function (currentTop) { - const docHeight = $article.height() - const winHeight = $(window).height() - const headerHeight = $article.offset().top - const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight) + const docHeight = $article.clientHeight + const winHeight = document.documentElement.clientHeight + const headerHeight = $article.offsetTop + const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight) const scrollPercent = (currentTop - headerHeight) / (contentMath) const scrollPercentRounded = Math.round(scrollPercent * 100) const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded - $cardToc.attr('progress-percentage', percentage) + $cardToc.setAttribute('progress-percentage', percentage) } // anchor @@ -351,94 +367,86 @@ $(function () { const mobileToc = { open: () => { - $cardTocLayout.css('display', 'block') + $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px' }, close: () => { - $cardTocLayout.css('animation', 'toc-close .2s') + $cardTocLayout.style.animation = 'toc-close .2s' setTimeout(() => { - $cardTocLayout.css({ display: '', animation: '' }) + $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''" }, 100) } } - $('#mobile-toc-button').on('click', () => { - if ($cardTocLayout.is(':visible')) { - mobileToc.close() - } else { - mobileToc.open() - } + document.getElementById('mobile-toc-button').addEventListener('click', () => { + if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open() + else mobileToc.close() }) // toc元素點擊 - $tocLink.on('click', function (e) { + $cardToc.addEventListener('click', (e) => { e.preventDefault() - btf.scrollToDest(decodeURI($(this).attr('href'))) + const $target = e.target.classList.contains('toc-link') + ? e.target + : e.target.parentElement + btf.scrollToDest(document.querySelector(decodeURI($target.getAttribute('href'))).offsetTop, 300) if (window.innerWidth < 900) { mobileToc.close() } }) - const autoScrollToc = function (currentTop, item) { - const activePosition = item.offset().top - const $tocContent = $cardToc - const sidebarScrollTop = $tocContent.scrollTop() - if (activePosition > (currentTop + $(window).height() - 100)) { - $tocContent.scrollTop(sidebarScrollTop + 100) + const autoScrollToc = function (item) { + const activePosition = item.getBoundingClientRect().top + const sidebarScrollTop = $cardToc.scrollTop + if (activePosition > (document.documentElement.clientHeight - 100)) { + $cardToc.scrollTop = sidebarScrollTop + 150 } - if (activePosition < currentTop + 100) { - $tocContent.scrollTop(sidebarScrollTop - 100) + if (activePosition < 100) { + $cardToc.scrollTop = sidebarScrollTop - 150 } } // find head position & add active class - // DOM Hierarchy: - // ol.toc > (li.toc-item, ...) - // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...)) - const list = $article.find('h1,h2,h3,h4,h5,h6') - + const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6') + let detectItem = '' 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 ($tocLink.length === 0) { return false } let currentId = '' - list.each(function () { - const head = $(this) - if (top > head.offset().top - 70) { - currentId = '#' + encodeURI($(this).attr('id')) + let currentIndex = '' + + list.forEach(function (ele, index) { + if (top > ele.offsetTop - 70) { + currentId = '#' + encodeURI(ele.getAttribute('id')) + currentIndex = index } }) + if (detectItem === currentIndex) return + if (currentId === '') { - $tocLink.removeClass('active') - $tocChild.hide() + $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') }) + detectItem = currentIndex + return } - const currentActive = $tocLink.filter('.active') - if (currentId && currentActive.attr('href') !== currentId) { - if (isAnchor) updateAnchor(currentId) + detectItem = currentIndex - $tocLink.removeClass('active') + $cardToc.querySelectorAll('.active').forEach(item => { item.classList.remove('active') }) + const currentActive = $tocLink[currentIndex] + currentActive.classList.add('active') + if (isAnchor) updateAnchor(currentId) - const _this = $tocLink.filter('[href="' + currentId + '"]') - _this.addClass('active') - autoScrollToc(top, _this) + setTimeout(function () { + autoScrollToc(currentActive) + }, 0) - 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() + let parent = currentActive.parentNode + + for (; !parent.matches('.toc'); parent = parent.parentNode) { + if (parent.matches('li')) parent.classList.add('active') } } } @@ -446,17 +454,11 @@ $(function () { /** * Rightside */ - - const $rightsideEle = $('#rightside') - - // read-mode - $rightsideEle.on('click', '#readmode', function () { - $('body').toggleClass('read-mode') - }) - - // Switch Between Light And Dark Mode - if ($('#darkmode').length) { - const switchReadMode = function () { + const rightSideFn = { + switchReadMode: () => { // read-mode + document.body.classList.toggle('read-mode') + }, + switchDarkMode: () => { // Switch Between Light And Dark Mode const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' if (nowMode === 'light') { activateDarkMode() @@ -467,30 +469,46 @@ $(function () { saveToLocal.set('theme', 'light', 2) GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) } - } - - $rightsideEle.on('click', '#darkmode', () => { - switchReadMode() + // handle some cases typeof utterancesTheme === 'function' && utterancesTheme() typeof FB === 'object' && window.loadFBComment() - window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200) - }) + window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) + }, + showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開 + document.getElementById('rightside-config-hide').classList.toggle('show') + }, + scrollToTop: () => { // Back to top + btf.scrollToDest(0, 500) + }, + hideAsideBtn: () => { // Hide aside + const $htmlDom = document.documentElement.classList + $htmlDom.contains('hide-aside') + ? saveToLocal.set('aside-status', 'show', 2) + : saveToLocal.set('aside-status', 'hide', 2) + $htmlDom.toggle('hide-aside') + } } - // rightside 點擊設置 按鈕 展開 - $rightsideEle.on('click', '#rightside_config', () => $('#rightside-config-hide').toggleClass('show')) - - // Back to top - $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body')) - - $rightsideEle.on('click', '#hide-aside-btn', () => { - const $htmlDom = $(document.documentElement) - if ($htmlDom.hasClass('hide-aside')) { - $htmlDom.removeClass('hide-aside') - saveToLocal.set('aside-status', 'show', 2) - } else { - $htmlDom.addClass('hide-aside') - saveToLocal.set('aside-status', 'hide', 2) + document.getElementById('rightside').addEventListener('click', function (e) { + const $target = e.target.id || e.target.parentNode.id + switch ($target) { + case 'go-up': + rightSideFn.scrollToTop() + break + case 'rightside_config': + rightSideFn.showOrHideBtn() + break + case 'readmode': + rightSideFn.switchReadMode() + break + case 'darkmode': + rightSideFn.switchDarkMode() + break + case 'hide-aside-btn': + rightSideFn.hideAsideBtn() + break + default: + break } }) @@ -500,16 +518,23 @@ $(function () { * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) */ const clickFnOfSubMenu = function () { - $('#sidebar-menus .expand').on('click', function () { - $(this).parents('.menus_item').find('> .menus_item_child').slideToggle() - $(this).toggleClass('hide') + document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) { + e.addEventListener('click', function () { + this.classList.toggle('hide') + const $dom = this.parentNode.nextElementSibling + if (btf.isHidden($dom)) { + $dom.style.display = 'block' + } else { + $dom.style.display = 'none' + } + }) }) - $(window).on('touchmove', function (e) { - const $menusChild = $('#nav .menus_item_child') - if ($menusChild.is(':visible')) { - $menusChild.css('display', 'none') - } + window.addEventListener('touchmove', function (e) { + const $menusChild = document.querySelectorAll('#nav .menus_item_child') + $menusChild.forEach(item => { + if (!btf.isHidden(item)) item.style.display = 'none' + }) }) } @@ -542,10 +567,10 @@ $(function () { * 網頁運行時間 */ const addRuntime = () => { - const $runtimeCount = $('#runtimeshow') - if ($runtimeCount.length) { - const publishDate = $runtimeCount.attr('data-publishDate') - $runtimeCount.text(btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime) + const $runtimeCount = document.getElementById('runtimeshow') + if ($runtimeCount !== null) { + const publishDate = $runtimeCount.getAttribute('data-publishDate') + $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime } } @@ -553,11 +578,10 @@ $(function () { * 最後一次更新時間 */ const addLastPushDate = () => { - const $lastPushDateItem = $('#last-push-date') - if ($lastPushDateItem.length) { - const lastPushDate = $lastPushDateItem.attr('data-lastPushDate') - const diffDay = btf.diffDate(lastPushDate, true) - $lastPushDateItem.text(diffDay) + const $lastPushDateItem = document.getElementById('last-push-date') + if ($lastPushDateItem !== null) { + const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate') + $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true) } } @@ -565,85 +589,101 @@ $(function () { * table overflow */ const addTableWrap = function () { - const $table = $('#article-container table').not($('figure.highlight > table')) - $table.each(function () { - $(this).wrap('
    ') - }) + const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table') + if ($table.length) { + $table.forEach(item => { + btf.wrap(item, 'div', '', 'table-wrap') + }) + } } /** * tag-hide */ const clickFnOfTagHide = function () { - const $hideInline = $('.hide-button') + const $hideInline = document.querySelectorAll('#article-container .hide-button') if ($hideInline.length) { - $hideInline.on('click', function (e) { - const $this = $(this) - const $hideContent = $(this).next('.hide-content') - $this.toggleClass('open') - $hideContent.toggle() - if ($this.hasClass('open')) { - if ($hideContent.find('.justified-gallery').length > 0) { - btf.initJustifiedGallery($hideContent.find('.justified-gallery')) + $hideInline.forEach(function (item) { + item.addEventListener('click', function (e) { + const $this = this + const $hideContent = $this.nextElementSibling + $this.classList.toggle('open') + if ($this.classList.contains('open')) { + if ($hideContent.querySelectorAll('.justified-gallery').length > 0) { + btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery')) + } } - } + }) }) } } const tabsFn = { clickFnOfTabs: function () { - const $tab = $('#article-container .tabs') - $tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) { - const $this = $(this) - const $tabItem = $this.parent() + document.querySelectorAll('#article-container .tab > button').forEach(function (item) { + item.addEventListener('click', function (e) { + const $this = this + const $tabItem = $this.parentNode - if (!$tabItem.hasClass('active')) { - const $tabContent = $this.parents('.nav-tabs').next() - $tabItem.siblings('.active').removeClass('active') - $tabItem.addClass('active') - const tabId = $this.attr('data-href') - $tabContent.find('> .tab-item-content').removeClass('active') - $tabContent.find(`> ${tabId}`).addClass('active') - const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery') - if ($isTabJustifiedGallery.length > 0) { - btf.initJustifiedGallery($isTabJustifiedGallery) + if (!$tabItem.classList.contains('active')) { + const $tabContent = $tabItem.parentNode.nextElementSibling + btf.siblings($tabItem, 'active')[0].classList.remove('active') + $tabItem.classList.add('active') + const tabId = $this.getAttribute('data-href').replace('#', '') + const childList = [...$tabContent.children] + childList.forEach(item => { + if (item.id === tabId) item.classList.add('active') + else item.classList.remove('active') + }) + const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`) + if ($isTabJustifiedGallery.length > 0) { + btf.initJustifiedGallery($isTabJustifiedGallery) + } } - } + }) }) }, backToTop: () => { - const backToTopBtn = $('#article-container .tabs .tab-to-top') - backToTopBtn.on('click', function () { - btf.scrollToDest($(this).parents('.tabs')) + document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) { + item.addEventListener('click', function () { + btf.scrollToDest(btf.getParents(this, '.tabs').offsetTop, 300) + }) }) } } const toggleCardCategory = function () { - const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i') - $cardCategory.on('click', function (e) { - e.preventDefault() - $(this).toggleClass('expand').parents('.parent').next().slideToggle(300) - }) + const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i') + if ($cardCategory.length > 0) { + $cardCategory.forEach(function (item) { + item.addEventListener('click', function (e) { + e.preventDefault() + const $this = this + $this.classList.toggle('expand') + const $parentEle = $this.parentNode.nextElementSibling + if (btf.isHidden($parentEle)) { + $parentEle.style.display = 'block' + } else { + $parentEle.style.display = 'none' + } + }) + }) + } } const switchComments = function () { let switchDone = false - $('#comment-switch > .switch-btn').on('click', function () { - const $btn = $(this) - $btn.hasClass('move') ? $btn.removeClass('move') : $btn.addClass('move') - $('#post-comment > .comment-wrap > div').each(function (i, o) { - const $this = $(o) - if ($this.is(':visible')) { - $this.hide() + const $switchBtn = document.querySelector('#comment-switch > .switch-btn') + $switchBtn && $switchBtn.addEventListener('click', function () { + this.classList.toggle('move') + document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) { + if (btf.isHidden(item)) { + item.style.cssText = 'display: block;animation: tabshow .5s' } else { - $this.css({ - display: 'block', - animation: 'tabshow .5s' - }) + item.style.cssText = "display: none;animation: ''" } }) + if (!switchDone && typeof loadOtherComment === 'function') { switchDone = true loadOtherComment() @@ -655,11 +695,14 @@ $(function () { const data = GLOBAL_CONFIG.noticeOutdate var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate) if (diffDay >= data.limitDay) { - const code = `
    ${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}
    ` + const ele = document.createElement('div') + ele.className = 'post-outdate-notice' + ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext + const $targetEle = document.getElementById('article-container') if (data.position === 'top') { - $('#article-container').prepend(code) + $targetEle.insertBefore(ele, $targetEle.firstChild) } else { - $('#article-container').append(code) + $targetEle.appendChild(ele) } } } @@ -673,17 +716,16 @@ $(function () { } const relativeDate = function (selector) { - selector.each((i, o) => { - const $this = $(o) - const timeVal = $this.attr('datetime') - $this.text(btf.diffDate(timeVal, true)).css('display', 'inline') + selector.forEach(item => { + const $this = item + const timeVal = $this.getAttribute('datetime') + $this.innerText = btf.diffDate(timeVal, true) + $this.style.display = 'inline' }) } const unRefreshFn = function () { - $(window).on('resize', function () { - adjustMenu() - }) + window.addEventListener('resize', adjustMenu) clickFnOfSubMenu() GLOBAL_CONFIG.islazyload && lazyloadImg() @@ -696,9 +738,9 @@ $(function () { if (GLOBAL_CONFIG_SITE.isPost) { GLOBAL_CONFIG_SITE.isToc && tocFn() GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice() - GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time')) + GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time')) } else { - GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time')) + GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time')) GLOBAL_CONFIG.runtime && addRuntime() addLastPushDate() toggleCardCategory() diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 00fe0a0..d1de45f 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -1,9 +1,9 @@ -$(function () { +window.addEventListener('load', () => { const openSearch = () => { - $('body').css({ width: '100%', overflow: 'hidden' }) - $('#algolia-search .search-dialog').css('display', 'block') - $('.ais-search-box--input').focus() - $('#search-mask').fadeIn() + document.body.style.cssText = 'width: 100%;overflow: hidden' + document.querySelector('#algolia-search .search-dialog').style.display = 'block' + document.querySelector('#algolia-search .ais-search-box--input').focus() + btf.fadeIn(document.getElementById('search-mask'), 0.5) // shortcut: ESC document.addEventListener('keydown', function f (event) { if (event.code === 'Escape') { @@ -14,30 +14,23 @@ $(function () { } const closeSearch = () => { - $('body').css({ width: '', overflow: '' }) - $('#algolia-search .search-dialog').css({ - animation: 'search_close .5s' - }) - - setTimeout(function () { - $('#algolia-search .search-dialog').css({ - animation: '', - display: 'none' - }) - }, 500) - - $('#search-mask').fadeOut() + document.body.style.cssText = "width: '';overflow: ''" + const $searchDialog = document.querySelector('#algolia-search .search-dialog') + $searchDialog.style.animation = 'search_close .5s' + setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500) + btf.fadeOut(document.getElementById('search-mask'), 0.5) } const searchClickFn = () => { - $('a.social-icon.search').on('click', openSearch) - $('#search-mask, .search-close-button').on('click touchstart', closeSearch) + document.querySelector('#search-button > .search').addEventListener('click', openSearch) + document.getElementById('search-mask').addEventListener('click', closeSearch) + document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch) } searchClickFn() window.addEventListener('pjax:complete', function () { - closeSearch() + getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch() searchClickFn() }) @@ -55,9 +48,9 @@ $(function () { hitsPerPage: algolia.hits.per_page || 10 }, searchFunction: function (helper) { - const searchInput = $('#algolia-search-input').find('input') + const searchInput = document.querySelector('#algolia-search-input input') - if (searchInput.val()) { + if (searchInput.value) { helper.search() } } diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 721ddc3..1abc7cf 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -1,18 +1,14 @@ -$(function () { +window.addEventListener('load', () => { let loadFlag = false const openSearch = function () { - $('body').css({ - width: '100%', - overflow: 'hidden' - }) - $('#local-search .search-dialog').css('display', 'block') - $('#local-search-input input').focus() - $('#search-mask').fadeIn() + document.body.style.cssText = 'width: 100%;overflow: hidden' + document.querySelector('#local-search .search-dialog').style.display = 'block' + document.querySelector('#local-search-input input').focus() + btf.fadeIn(document.getElementById('search-mask'), 0.5) if (!loadFlag) { search(GLOBAL_CONFIG.localSearch.path) loadFlag = true } - // shortcut: ESC document.addEventListener('keydown', function f (event) { if (event.code === 'Escape') { @@ -23,60 +19,48 @@ $(function () { } const closeSearch = function () { - $('body').css({ - width: '', - overflow: '' - }) - $('#local-search .search-dialog').css({ - animation: 'search_close .5s' - }) - - setTimeout(function () { - $('#local-search .search-dialog').css({ - animation: '', - display: 'none' - }) - }, 500) - - $('#search-mask').fadeOut() + document.body.style.cssText = "width: '';overflow: ''" + const $searchDialog = document.querySelector('#local-search .search-dialog') + $searchDialog.style.animation = 'search_close .5s' + setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500) + btf.fadeOut(document.getElementById('search-mask'), 0.5) } + // click function const searchClickFn = () => { - $('a.social-icon.search').on('click', openSearch) - $('#search-mask, .search-close-button').on('click', closeSearch) + document.querySelector('#search-button > .search').addEventListener('click', openSearch) + document.getElementById('search-mask').addEventListener('click', closeSearch) + document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch) } searchClickFn() + // pjax window.addEventListener('pjax:complete', function () { - $('#local-search .search-dialog').is(':visible') && closeSearch() + getComputedStyle(document.querySelector('#local-search .search-dialog')).display === 'block' && closeSearch() searchClickFn() }) function search (path) { - $.ajax({ - url: GLOBAL_CONFIG.root + path, - dataType: 'xml', - success: function (xmlResponse) { - // get the contents from search data - const datas = $('entry', xmlResponse).map(function () { + fetch(GLOBAL_CONFIG.root + path) + .then(response => response.text()) + .then(str => new window.DOMParser().parseFromString(str, 'text/xml')) + .then(data => { + const datas = [...data.querySelectorAll('entry')].map(function (item) { return { - title: $('title', this).text(), - content: $('content', this).text(), - url: $('url', this).text() + title: item.querySelector('title').textContent, + content: item.querySelector('content').textContent, + url: item.querySelector('url').textContent } - }).get() + }) - const $input = $('#local-search-input input')[0] - const $resultContent = $('#local-hits')[0] + const $input = document.querySelector('#local-search-input input') + const $resultContent = document.getElementById('local-search-results') $input.addEventListener('input', function () { let str = '
    ' const keywords = this.value.trim().toLowerCase().split(/[\s]+/) $resultContent.innerHTML = '' - if (this.value.trim().length <= 0) { - $('.local-search-stats__hr').hide() - return - } + if (this.value.trim().length <= 0) return let count = 0 // perform local searching datas.forEach(function (data) { @@ -141,7 +125,6 @@ $(function () { str += '
    ' + dataTitle + '' count += 1 - $('.local-search-stats__hr').show() if (dataContent !== '') { str += '

    ' + matchContent + '...

    ' @@ -158,7 +141,6 @@ $(function () { $resultContent.innerHTML = str window.pjax && window.pjax.refresh($resultContent) }) - } - }) + }) } }) diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js index 6a1e893..bbde3c0 100644 --- a/source/js/tw_cn.js +++ b/source/js/tw_cn.js @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -(function () { +document.addEventListener('DOMContentLoaded', function () { const translate = GLOBAL_CONFIG.translate const snackbarData = GLOBAL_CONFIG.Snackbar const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文 @@ -96,4 +96,4 @@ } translateInitialization() document.addEventListener('pjax:complete', translateInitialization) -})() +}) diff --git a/source/js/utils.js b/source/js/utils.js index 7183fb7..c9695cc 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -56,23 +56,10 @@ var btf = { const clientWidth = document.body.clientWidth const paddingRight = innerWidth - clientWidth if (innerWidth !== clientWidth) { - $('body').css('padding-right', paddingRight) + document.body.style.paddingRight = paddingRight + 'px' } }, - scrollToDest: name => { - const scrollOffset = $(name).offset().top - let offset - if ($(window).scrollTop() > scrollOffset) { - offset = 65 - } else { - offset = 0 - } - $('body,html').animate({ - scrollTop: scrollOffset - offset - }) - }, - snackbarShow: (text, showAction, duration) => { const sa = (typeof showAction !== 'undefined') ? showAction : false const dur = (typeof duration !== 'undefined') ? duration : 2000 @@ -88,6 +75,9 @@ var btf = { }, initJustifiedGallery: function (selector) { + if (!(selector instanceof jQuery)) { + selector = $(selector) + } selector.each(function (i, o) { if ($(this).is(':visible')) { $(this).justifiedGallery({ @@ -145,5 +135,118 @@ var btf = { } else { callback() } - } + }, + + scrollToDest: (pos, time) => { + if (pos < 0 || time < 0) { + return + } + var currentPos = window.scrollY || window.screenTop + + if (currentPos > pos) pos = pos - 65 + var start = null + time = time || 500 + window.requestAnimationFrame(function step (currentTime) { + start = !start ? currentTime : start + if (currentPos < pos) { + const progress = currentTime - start + window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos) + if (progress < time) { + window.requestAnimationFrame(step) + } else { + window.scrollTo(0, pos) + } + } else { + const progress = currentTime - start + window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time)) + if (progress < time) { + window.requestAnimationFrame(step) + } else { + window.scrollTo(0, pos) + } + } + }) + }, + + fadeIn: (ele, time) => { + ele.style.cssText = `display:block;animation: to_show ${time}s` + }, + + fadeOut: (ele, time) => { + ele.addEventListener('animationend', function f () { + ele.style.cssText = "display: none; animation: '' " + ele.removeEventListener('animationend', f) + }) + ele.style.animation = `to_hide ${time}s` + }, + + getParents: (elem, selector) => { + // polyfill + if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function (s) { + const matches = (this.document || this.ownerDocument).querySelectorAll(s) + let i = matches.length + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1 + } + } + + for (; elem && elem !== document; elem = elem.parentNode) { + if (elem.matches(selector)) return elem + } + return null + }, + + /** + * + * @param {*} ele + * @param {*} selector class name + */ + siblings: (ele, selector) => { + return [...ele.parentNode.children].filter((child) => { + if (selector) { + return child !== ele && child.classList.contains(selector) + } + }) + }, + + /** + * + * @param {*} selector + * @param {*} eleType the type of create element + * @param {*} id id + * @param {*} cn class name + */ + wrap: function (selector, eleType, id = null, cn = null) { + const creatEle = document.createElement(eleType) + if (id) creatEle.id = id + if (cn) creatEle.className = cn + selector.parentNode.insertBefore(creatEle, selector) + creatEle.appendChild(selector) + }, + + unwrap: function (el) { + const elParentNode = el.parentNode + if (elParentNode !== document.body) { + elParentNode.parentNode.insertBefore(el, elParentNode) + elParentNode.parentNode.removeChild(elParentNode) + } + }, + + isJqueryLoad: (fn) => { + if (typeof jQuery === 'undefined') { + getScript(GLOBAL_CONFIG.source.jQuery).then(fn) + } else { + fn() + } + }, + + isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0 + }