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..8515a5f 100644 --- a/_config.yml +++ b/_config.yml @@ -173,6 +173,7 @@ index_post_content: toc: enable: true number: true + style_simple: false post_copyright: enable: true @@ -239,7 +240,7 @@ addtoany: comments: # Up to two comments system, the first will be shown as default - # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo use: # - Valine # - Disqus @@ -374,11 +375,6 @@ footer: since: 2020 custom_text: copyright: true # Copyright of theme and framework - ICP: # Chinese ICP License - enable: false - url: - text: - icon: /img/icp.png # Analysis # -------------------------------------- @@ -542,6 +538,7 @@ ClickShowText: # - LOVE # - YOU fontSize: 15px + random: false mobile: false # Default display mode (網站默認的顯示模式) @@ -672,10 +669,14 @@ newest_comments: enable: false forum: api_key: + twikoo: false # Bottom right button (右下角按鈕) # -------------------------------------- +# Change font size +change_font_size: false + # Conversion between Traditional and Simplified Chinese (簡繁轉換) translate: enable: false @@ -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..0983604 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 @@ -74,6 +73,7 @@ aside: headline: Newest Comments loading_text: loading... error: Unable to get the data, please make sure the settings are correct. + zero: No Comment card_toc: Catalog date_suffix: @@ -88,12 +88,15 @@ share: Share rightside: readmode_title: Read Mode - translate_title: Switch Between Traditional Chinese And Simplified Chinese - night_mode_title: Switch Between Light And Dark Mode + font_plus_title: Increase font size + font_minus_title: Decrease font size + translate_title: Toggle Between Traditional Chinese And Simplified Chinese + night_mode_title: Toggle Between Light And Dark Mode back_to_top: Back To Top toc: Table Of Contents scroll_to_comment: Scroll To Comments setting: Setting + aside: Toggle between single-column and double-column copy_copyright: author: Author diff --git a/languages/en.yml b/languages/en.yml index d1699c3..ae08d27 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 @@ -74,6 +73,7 @@ aside: headline: Newest Comments loading_text: loading... error: Unable to get the data, please make sure the settings are correct. + zero: No Comment card_toc: Catalog date_suffix: @@ -88,12 +88,15 @@ share: Share rightside: readmode_title: Read Mode + font_plus_title: Increase font size + font_minus_title: Decrease font size translate_title: Switch Between Traditional Chinese And Simplified Chinese night_mode_title: Switch Between Light And Dark Mode back_to_top: Back To Top toc: Table Of Contents scroll_to_comment: Scroll To Comments setting: Setting + aside: Toggle between single-column and double-column copy_copyright: author: Author diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 2a1a762..753fc14 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: 上一篇 @@ -75,7 +73,8 @@ aside: card_newest_comments: headline: 最新评论 loading_text: 正在加载中... - error: 无法获取资料，请确认相关配置是否正确 + error: 无法获取评论，请确认相关配置是否正确 + zero: 没有评论 card_toc: 目录 date_suffix: @@ -90,12 +89,15 @@ share: 分享 rightside: readmode_title: 阅读模式 + font_plus_title: 放大字体 + font_minus_title: 缩小字体 translate_title: 简繁转换 night_mode_title: 浅色和深色模式转换 back_to_top: 回到顶部 toc: 目录 scroll_to_comment: 直达评论 setting: 设置 + aside: 单栏和双栏切换 copy_copyright: author: 作者 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 2b30d2a..21c4cda 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: 上一篇 @@ -75,7 +73,8 @@ aside: card_newest_comments: headline: 最新評論 loading_text: 正在加載中... - error: 無法獲取資料，請確認相關配置是否正確 + error: 無法獲取評論，請確認相關配置是否正確 + zero: 沒有評論 card_toc: 目錄 date_suffix: @@ -90,12 +89,15 @@ share: 分享 rightside: readmode_title: 閱讀模式 + font_plus_title: 放大字型 + font_minus_title: 縮小字型 translate_title: 簡繁轉換 night_mode_title: 淺色和深色模式轉換 back_to_top: 回到頂部 toc: 目錄 scroll_to_comment: 直達評論 setting: 設定 + aside: 單欄和雙欄切換 copy_copyright: author: 作者 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/footer.pug b/layout/includes/footer.pug index fc612f9..4d2ae79 100644 --- a/layout/includes/footer.pug +++ b/layout/includes/footer.pug @@ -15,9 +15,3 @@ a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly' if theme.footer.custom_text .footer_custom_text!=`${theme.footer.custom_text}` - if theme.footer.ICP.enable - .icp - a(href=theme.footer.ICP.url) - if theme.footer.ICP.icon - img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP') - span=theme.footer.ICP.text diff --git a/layout/includes/head.pug b/layout/includes/head.pug index ec8a57a..886053e 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -51,16 +51,13 @@ if (theme.pwa && theme.pwa.enable) //- main css 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)) +link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload="this.media='all'") if (theme.snackbar && theme.snackbar.enable) - link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) + link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'") if theme.algolia_search.enable - link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css)) + link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'") script(src=url_for(theme.CDN.algolia_search) defer) //- google_adsense @@ -71,7 +68,7 @@ if theme.algolia_search.enable //- font if theme.blog_title_font &&　theme.blog_title_font.font_link - link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link)) + link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link) media="print" onload="this.media='all'") //- global config !=partial('includes/head/config', {}, {cache:theme.fragment_cache}) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 99e3001..6ed3d8e 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -50,14 +50,6 @@ }) } - let ClickShowText = 'undefined'; - if (theme.ClickShowText && theme.ClickShowText.enable) { - ClickShowText = JSON.stringify({ - text: theme.ClickShowText.text.join(","), - fontSize: theme.ClickShowText.fontSize - }) - } - let Snackbar = 'undefined'; if (theme.snackbar && theme.snackbar.enable) { Snackbar = JSON.stringify({ @@ -116,12 +108,18 @@ script. month: '!{_p("date_suffix.month")}' }, copyright: !{copyright}, - 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 +154,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/config_site.pug b/layout/includes/head/config_site.pug index 19eb732..98c3d22 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -4,8 +4,8 @@ else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink else isHighlightShrink = theme.highlight_shrink - const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable - const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true ) + var pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable + var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true ) - script#config_change diff --git a/layout/includes/head/js.pug b/layout/includes/head/js.pug index 058b80a..09044df 100644 --- a/layout/includes/head/js.pug +++ b/layout/includes/head/js.pug @@ -60,6 +60,12 @@ script | document.documentElement.classList.remove('hide-aside') | } | } + + if theme.change_font_size + | const fontSizeVal = saveToLocal.get('global-font-size') + | if (fontSizeVal !== undefined) { + | document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px') + | } | })() 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/header/post-info.pug b/layout/includes/header/post-info.pug index 2d94928..96f1e9b 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -32,7 +32,7 @@ if (index < page.categories.data.length - 1) i.fas.fa-angle-right.post-meta-separator - .meta-secondline + .meta-secondline - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read) if (postWordcount) span.post-meta-separator | @@ -57,26 +57,32 @@ if !theme.comments.lazyload && page.comments !== false && theme.comments.use && theme.comments.count - var whichCount = theme.comments.use[0] - if whichCount !== 'Livere' && whichCount !== 'Utterances' + + mixin countBlock span.post-meta-separator | span.post-meta-commentcount - if whichCount === 'Disqus' || whichCount === 'Disqusjs' - i.far.fa-comments.fa-fw.post-meta-icon - span.post-meta-label= _p('post.comments') + ':' - span.disqus-comment-count.comment-count - a(href=full_url_for(page.path) + '#disqus_thread') - else if whichCount === 'Valine' - i.far.fa-comments.fa-fw.post-meta-icon - span.post-meta-label= _p('post.comments') + ':' - a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") - span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount") - else if whichCount === 'Gitalk' - i.far.fa-comments.fa-fw.post-meta-icon - span.post-meta-label= _p('post.comments') + ':' - a(href=url_for(page.path) + '#post-comment') - span.gitalk-comment-count.comment-count - else if whichCount === 'Facebook Comments' - i.far.fa-comments.fa-fw.post-meta-icon - span.post-meta-label= _p('post.comments') + ':' - a.comment-count(href=url_for(page.path) + '#post-comment') - span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + if block + block + + if whichCount === 'Disqus' || whichCount === 'Disqusjs' + +countBlock + span.disqus-comment-count + a(href=full_url_for(page.path) + '#disqus_thread') + else if whichCount === 'Valine' + +countBlock + a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") + span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount") + else if whichCount === 'Gitalk' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.gitalk-#card-toc + else if whichCount === 'Twikoo' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span#twikoo-count + else if whichCount === 'Facebook Comments' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file diff --git a/layout/includes/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/rightside.pug b/layout/includes/rightside.pug index 9a9e491..a52f6a1 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -3,25 +3,30 @@ if is_post() && theme.readmode button#readmode(type="button" title=_p('rightside.readmode_title')) i.fas.fa-book-open + if theme.change_font_size + button#font-plus(type="button" title=_p('rightside.font_plus_title')) + i.fas.fa-plus + button#font-minus(type="button" title=_p('rightside.font_minus_title')) + i.fas.fa-minus if theme.translate.enable button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default if theme.darkmode.enable && theme.darkmode.button button#darkmode(type="button" title=_p('rightside.night_mode_title')) i.fas.fa-adjust if theme.aside.enable && theme.aside.button && page.aside !== false - button#hide-aside-btn(type="button") + button#hide-aside-btn(type="button" title=_p('rightside.aside')) i.fas.fa-arrows-alt-h #rightside-config-show if is_post() - if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)) + if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size) button#rightside_config(type="button" title=_p("rightside.setting")) - i.fas.fa-cog - if showToc && theme.aside.mobile + i.fas.fa-cog.fa-spin + if showToc button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) i.fas.fa-list-ul - else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) + else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size button#rightside_config(type="button" title=_p("rightside.setting")) - i.fas.fa-cog + i.fas.fa-cog.fa-spin if theme.chat_btn button#chat_btn(type="button" title=_p("rightside.chat_btn")) diff --git a/layout/includes/third-party/aplayer.pug b/layout/includes/third-party/aplayer.pug index c7aa010..dd7af2f 100644 --- a/layout/includes/third-party/aplayer.pug +++ b/layout/includes/third-party/aplayer.pug @@ -1,3 +1,3 @@ -link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css)) +link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css) media="print" onload="this.media='all'") script(src=url_for(theme.CDN.aplayer_js)) script(src=url_for(theme.CDN.meting_js)) \ 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/index.pug b/layout/includes/third-party/comments/index.pug index 9f8b4b6..4514fce 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/layout/includes/third-party/comments/index.pug @@ -30,7 +30,7 @@ hr when 'Utterances' #utterances-wrap when 'Twikoo' - #twikoo + #twikoo-wrap when 'Facebook Comments' .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' data-numposts= theme.facebook_comments.pageSize || 10 diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 1e49ecd..5a18d17 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -1,24 +1,43 @@ script. - function loadTwikoo () { - function init () { - twikoo.init({ - envId: '!{theme.twikoo}' + (()=>{ + const $countDom = document.getElementById('twikoo-count') + const init = () => { + twikoo.init({ + envId: '!{theme.twikoo}', + el: '#twikoo-wrap' }) } - if (typeof twikoo.init === 'function') { - init() + const getCount = () => { + twikoo.getCommentsCount({ + envId: '!{theme.twikoo}', + urls: [window.location.pathname], + includeReply: false + }).then(function (res) { + $countDom.innerText = res[0].count + }).catch(function (err) { + console.error(err); + }); + } + + const loadTwikoo = (bool = false) => { + if (typeof twikoo === 'object') { + init() + bool && $countDom && setTimeout(()=>{getCount()},0) + } else { + getScript('!{theme.CDN.twikoo}').then(()=> { + init() + bool && $countDom && setTimeout(()=>{getCount()},0) + }) + } + } + + if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) + else loadTwikoo(true) } else { - $.getScript('!{theme.CDN.twikoo}', init) + window.loadOtherComment = () => { + loadTwikoo() + } } - } - - if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) { - if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo) - else loadTwikoo() - } else { - function loadOtherComment () { - loadTwikoo() - } - } - + })() \ No newline at end of file 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/effect.pug b/layout/includes/third-party/effect.pug index 9cd4051..a6f3063 100644 --- a/layout/includes/third-party/effect.pug +++ b/layout/includes/third-party/effect.pug @@ -25,4 +25,11 @@ if theme.click_heart && theme.click_heart.enable script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`) if theme.ClickShowText && theme.ClickShowText.enable - script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`) + script#click-show-text( + src= url_for(theme.CDN.ClickShowText) + data-mobile= `${theme.ClickShowText.mobile}` + data-text= theme.ClickShowText.text.join(",") + data-fontsize= theme.ClickShowText.fontSize + data-random= `${theme.ClickShowText.random}` + async + ) \ No newline at end of file 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..5d900d9 100644 --- a/layout/includes/third-party/newest-comments/disqus-comment.pug +++ b/layout/includes/third-party/newest-comments/disqus-comment.pug @@ -13,45 +13,55 @@ script. return content } - 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 + const getComment = () => { + 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 => { let result = '' - for (let i = 0; i < array.length; i++) { - result += '
' + if (array.length) { + for (let i = 0; i < array.length; i++) { + result += '
' - if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + if (!{theme.newest_comments.avatar}) { + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` + } + + result += `
+ ${array[i].content} +
${array[i].nick}
+
` } - - result += `
- ${array[i].content} -
${array[i].nick}
-
` + } else { + result += '!{_p("aside.card_newest_comments.zero")}' } let $dom = document.querySelector('#card-newest-comments .aside-list') $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() window.pjax && window.pjax.refresh($dom) } @@ -61,7 +71,7 @@ script. if (data) { generateHtml(JSON.parse(data)) } else { - getDisqusComment() + getComment() } } } diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug index e7e7bbc..03bb331 100644 --- a/layout/includes/third-party/newest-comments/github-issues.pug +++ b/layout/includes/third-party/newest-comments/github-issues.pug @@ -13,44 +13,54 @@ script. return content } - 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 + const getComment = () => { + 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 => { let result = '' - for (let i = 0; i < array.length; i++) { - result += '
' + if (array.length) { + for (let i = 0; i < array.length; i++) { + result += '
' - if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + if (!{theme.newest_comments.avatar}) { + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` + } + + result += `
+ ${array[i].content} +
${array[i].nick}
+
` } - - result += `
- ${array[i].content} -
${array[i].nick}
-
` + } else { + result += '!{_p("aside.card_newest_comments.zero")}' } let $dom = document.querySelector('#card-newest-comments .aside-list') $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() window.pjax && window.pjax.refresh($dom) } @@ -60,7 +70,7 @@ script. if (data) { generateHtml(JSON.parse(data)) } else { - getGithubIssues() + getComment() } } } diff --git a/layout/includes/third-party/newest-comments/index.pug b/layout/includes/third-party/newest-comments/index.pug index 24b51a7..bf422c4 100644 --- a/layout/includes/third-party/newest-comments/index.pug +++ b/layout/includes/third-party/newest-comments/index.pug @@ -3,4 +3,6 @@ if theme.newest_comments.leancloud.enable else if theme.newest_comments.github_issues.enable include ./github-issues.pug else if theme.newest_comments.disqus.enable - include ./disqus-comment.pug \ No newline at end of file + include ./disqus-comment.pug +else if theme.newest_comments.twikoo + include ./twikoo-comment.pug \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/leancloud.pug b/layout/includes/third-party/newest-comments/leancloud.pug index 2e6910a..2e53917 100644 --- a/layout/includes/third-party/newest-comments/leancloud.pug +++ b/layout/includes/third-party/newest-comments/leancloud.pug @@ -15,7 +15,8 @@ script. } const getIcon = (icon, mail) => { - if (icon) return icon + if (icon) return icon + let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}' let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}` return iconUrl @@ -24,25 +25,34 @@ script. const generateHtml = array => { let result = '' - for (let i = 0; i < array.length; i++) { - result += '
' + if (array.length) { + for (let i = 0; i < array.length; i++) { + result += '
' - if (!{theme.newest_comments.avatar}) { - result += `${array[i].nick}` + if (!{theme.newest_comments.avatar}) { + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` + } + + result += `
+ ${array[i].content} +
${array[i].nick}
+
` } - - result += `
- ${array[i].content} -
${array[i].nick}
-
` + } else { + result += '!{_p("aside.card_newest_comments.zero")}' } let $dom = document.querySelector('#card-newest-comments .aside-list') $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() window.pjax && window.pjax.refresh($dom) } - const getValineData = () => { + const getComment = () => { let serverURL = '' if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) { serverURL = '!{theme.newest_comments.leancloud.serverURL}' @@ -51,9 +61,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 +69,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 = () => { @@ -89,7 +96,7 @@ script. if (data) { generateHtml(JSON.parse(data)) } else { - getValineData() + getComment() } } } diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug new file mode 100644 index 0000000..f012760 --- /dev/null +++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug @@ -0,0 +1,84 @@ +script. + window.addEventListener('load', () => { + const changeContent = (content) => { + if (content === '') return content + + content = content.replace(/<[^>]+>/g,"") // remove html tag + content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link + content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url + + if (content.length > 150) { + content = content.substring(0,150) + '...' + } + return content + } + + const getComment = () => { + const runTwikoo = () => { + twikoo.getRecentComments({ + envId: '!{theme.twikoo}', + pageSize: !{theme.newest_comments.limit}, + includeReply: true + }).then(function (res) { + saveToLocal.set('twikoo-newest-comments', JSON.stringify(res), 10/(60*24)) + generateHtml(res) + }).catch(function (err) { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + }) + } + + if (typeof twikoo === 'object') { + runTwikoo() + } else { + getScript('!{theme.CDN.twikoo}').then(runTwikoo) + } + } + + const generateHtml = array => { + let result = '' + + if (array.length) { + for (let i = 0; i < array.length; i++) { + result += '
' + + if (!{theme.newest_comments.avatar}) { + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` + } + + result += `
+ ${changeContent(array[i].commentText)} +
${array[i].nick}
+
` + } + } else { + result += '!{_p("aside.card_newest_comments.zero")}' + } + + let $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() + window.pjax && window.pjax.refresh($dom) + } + + const newestCommentInit = () => { + if (document.querySelector('#card-newest-comments .aside-list')) { + const data = saveToLocal.get('twikoo-newest-comments') + if (data) { + generateHtml(JSON.parse(data)) + } else { + getComment() + } + } + } + + newestCommentInit() + document.addEventListener('pjax:complete', 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/share/share-js.pug b/layout/includes/third-party/share/share-js.pug index 538c905..7cfaad2 100644 --- a/layout/includes/third-party/share/share-js.pug +++ b/layout/includes/third-party/share/share-js.pug @@ -1,3 +1,3 @@ .social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites) -link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css)) +link(rel='stylesheet' href=url_for(theme.CDN.sharejs_css) media="print" onload="this.media='all'") script(src=url_for(theme.CDN.sharejs) defer) \ 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..94c496f 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,28 +1,26 @@ #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}) - .sticky_layout - if is_post() - if showToc + //- post + if is_post() + if showToc && theme.toc.style_simple + .sticky_layout 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}) else - if theme.aside.card_recent_post.enable + !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) + .sticky_layout + if showToc + include ./card_post_toc.pug !=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 + else + //- page + !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) + .sticky_layout + !=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..417a7c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.3.0", + "version": "3.4.0", "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..e77ff53 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -37,6 +37,10 @@ maxWidth900() @media screen and (max-width: 900px) {block} +minWidth901() + @media screen and (min-width: 901px) + {block} + minWidth900() @media screen and (min-width: 900px) {block} @@ -151,6 +155,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 +207,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..66a51bf 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -1,4 +1,5 @@ -[data-theme='light'] +:root + --global-font-size: $font-size --global-bg: $body-bg --font-color: $font-black --hr-border: lighten($theme-hr-color, 50%) @@ -36,7 +37,7 @@ body min-height: 100% background: var(--global-bg) color: var(--font-color) - font-size: $font-size + font-size: var(--global-font-size) font-family: $font-family line-height: $text-line-height -webkit-tap-highlight-color: rgba(0, 0, 0, 0) @@ -57,16 +58,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 +200,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..469909d 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -10,10 +10,6 @@ +maxWidth900() width: 100% - if hexo-config('aside.mobile') == false - +maxWidth768() - display: none - > .card-widget:first-child margin-top: 0 @@ -27,11 +23,16 @@ 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) + if hexo-config('aside.mobile') == false + +maxWidth768() + &:not(#card-toc) + display: none + .card-info img width: 110px @@ -229,13 +230,14 @@ padding: 0 0 0 .8rem > .parent - .card-category-list - &-name - width: 70% !important + > a + .card-category-list + &-name + width: 70% !important - &-count - width: calc(100% - 70% - 20px) - text-align: right + &-count + width: calc(100% - 70% - 20px) + text-align: right i float: right @@ -248,7 +250,7 @@ transform: rotate(-90deg) if hexo-config('aside.card_categories.expand') == false - + .child + > .child display: none .card-webinfo @@ -265,23 +267,37 @@ // toc #card-toc + +minWidth901() + 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 .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 @@ -314,6 +330,10 @@ font-style: italic font-size: 1.2rem + :only-child + > .card-widget + margin-top: 0 + @keyframes toc-open 0% transform: scale(.7) diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index ee2e343..5f96c15 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -31,3 +31,5 @@ .icp-icon padding: 0 4px vertical-align: text-bottom + max-height: 1.4em + width auto diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 58fdc85..b081f93 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -133,9 +133,9 @@ .post-title @extend .limit-more-line margin-bottom: .4rem - font-size: 2.5em - font-weight: normal color: var(--white) + font-weight: normal + font-size: 2.5em line-height: 1.5 -webkit-line-clamp: 3 @@ -193,12 +193,9 @@ border-bottom: 1px solid var(--light-grey) color: var(--text-highlight-color) -[data-theme='light'] - #post - #post-info - #post-meta, - #post-meta a - color: #78818a + #post-meta, + #post-meta a + color: #78818a // css hack // all browser in ios and safari in all apple device @@ -349,12 +346,15 @@ _:future, font-size: inherit .menus_items + position: absolute + left: 0 + visibility: hidden + opacity: 0 + + #search-button span display: none !important - #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/_layout/rightside.styl b/source/css/_layout/rightside.styl index 2b1f0b7..39d1299 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -29,10 +29,6 @@ &:hover background-color: var(--btn-hover-color) - #rightside_config - i - animation: avatar_turn_around 2s linear infinite - #mobile-toc-button display: none 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/_mode/readmode.styl b/source/css/_mode/readmode.styl index 802e296..b10849a 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -1,14 +1,13 @@ if hexo-config('readmode') - [data-theme='light'] - .read-mode - --font-color: #4c4948 - --readmode-light-color: #fff - --white: #4c4948 - --light-grey: #4c4948 - --gray: #d6dbdf - --hr-border: #d6dbdf - --hr-before-color: darken(#d6dbdf, 10) - -highlight-bg: #f7f7f7 + .read-mode + --font-color: #4c4948 + --readmode-light-color: #fff + --white: #4c4948 + --light-grey: #4c4948 + --gray: #d6dbdf + --hr-border: #d6dbdf + --hr-before-color: darken(#d6dbdf, 10) + -highlight-bg: #f7f7f7 [data-theme='dark'] .read-mode 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/img/icp.png b/source/img/icp.png deleted file mode 100644 index 3b5539d..0000000 Binary files a/source/img/icp.png and /dev/null differ diff --git a/source/js/main.js b/source/js/main.js index 5dda6ff..565749c 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,61 +1,68 @@ -$(function () { - const blogNameWidth = $('#site-name').width() - const menusWidth = $('#menus').width() +document.addEventListener('DOMContentLoaded', function () { + let blogNameWidth = document.getElementById('site-name').offsetWidth + const $menusEle = document.querySelector('#menus .menus_items') + let menusWidth = $menusEle && $menusEle.offsetWidth + const $searchEle = document.querySelector('#search-button') + let searchWidth = $searchEle && $searchEle.offsetWidth + let detectFontSizeChange = false const adjustMenu = () => { - const $nav = $('#nav') + if (detectFontSizeChange) { + blogNameWidth = document.getElementById('site-name').offsetWidth + menusWidth = $menusEle && $menusEle.offsetWidth + searchWidth = $searchEle && $searchEle.offsetWidth + detectFontSizeChange = false + } + const $nav = document.getElementById('nav') let t if (window.innerWidth < 768) t = true - else t = blogNameWidth + menusWidth > $nav.width() - 30 + else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120 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.overflow = '' + $body.style.paddingRight = '' + 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 +71,9 @@ $(function () { * 首頁top_img底下的箭頭 */ const scrollDownInIndex = () => { - $('#scroll-down').on('click', function () { - btf.scrollToDest('#content-inner') + const $scrollDownEle = document.getElementById('scroll-down') + $scrollDownEle && $scrollDownEle.addEventListener('click', function () { + btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300) }) } @@ -78,7 +86,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 +103,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,71 +205,98 @@ $(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') - if ($justifiedGallery.length) { - const $imgList = $justifiedGallery.find('img') - $imgList.unwrap() - if ($imgList.length) { - $imgList.each(function (i, o) { - if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) - $(o).wrap('
    ') - }) - } + const runJustifiedGallery = function (ele) { + const $justifiedGallery = $(ele) + const $imgList = $justifiedGallery.find('img') + $imgList.unwrap() + if ($imgList.length) { + $imgList.each(function (i, o) { + if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) + $(o).wrap('
    ') + }) + } - if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) - else { - $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { - btf.initJustifiedGallery($justifiedGallery) - }) - detectJgJsLoad = true - } + if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) + else { + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { + btf.initJustifiedGallery($justifiedGallery) + }) + detectJgJsLoad = true } } /** * fancybox和 mediumZoom */ - 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(``) - }) - - $().fancybox({ - selector: '[data-fancybox]', - loop: true, - transitionEffect: 'slide', - protect: true, - buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], - hash: false - }) - } else { - const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) - zoom.on('open', function (event) { - const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff' - zoom.update({ - background: photoBg + const addFancybox = function (ele) { + if (ele.length) { + const runFancybox = (ele) => { + ele.each(function (i, o) { + const $this = $(o) + const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src') + const dataCaption = $this.attr('alt') || '' + $this.wrap(``) }) + + $().fancybox({ + selector: '[data-fancybox]', + loop: true, + transitionEffect: 'slide', + protect: true, + buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], + hash: false + }) + } + + if (typeof $.fancybox === 'undefined') { + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () { + runFancybox($(ele)) + }) + } else { + runFancybox($(ele)) + } + } + } + + const addMediumZoom = () => { + const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) + zoom.on('open', e => { + const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff' + zoom.update({ + background: photoBg + }) + }) + } + + const jqLoadAndRun = () => { + const isFancybox = GLOBAL_CONFIG.lightbox === 'fancybox' + const $fancyboxEle = isFancybox ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') : null + const $jgEle = document.querySelectorAll('#article-container .justified-gallery') + const jgEleLength = $jgEle.length + + if (jgEleLength || $fancyboxEle !== null) { + btf.isJqueryLoad(() => { + jgEleLength && runJustifiedGallery($jgEle) + isFancybox && addFancybox($fancyboxEle) }) } } @@ -258,38 +305,50 @@ $(function () { * 滾動處理 */ const scrollFn = function () { + const $rightside = document.getElementById('rightside') + const innerHeight = window.innerHeight + 56 + + // 當滾動條小于 56 的時候 + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + return + } + let initTop = 0 let isChatShow = true - const $rightside = $('#rightside') - const $nav = $('#nav') + 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: ''" + } + + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' } }, 200)) @@ -305,140 +364,121 @@ $(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) + const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded + $cardToc.setAttribute('progress-percentage', percentage) } // anchor const isAnchor = GLOBAL_CONFIG.isanchor const updateAnchor = function (anchor) { if (window.history.replaceState && anchor !== window.location.hash) { - window.history.replaceState(undefined, undefined, anchor) + if (!anchor) anchor = location.pathname + window.history.replaceState({}, '', anchor) } } 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(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 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) { + if ($tocLink.length === 0 || top === 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 > btf.getEleTop(ele) - 70) { + currentId = '#' + encodeURI(ele.getAttribute('id')) + currentIndex = index } }) + if (detectItem === currentIndex) return + + if (isAnchor) updateAnchor(currentId) + 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') - 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 +486,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 +501,72 @@ $(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') + }, + + adjustFontSize: (plus) => { + const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size')) + let newValue = '' + detectFontSizeChange = true + if (plus) { + if (fontSizeVal >= 20) return + newValue = fontSizeVal + 1 + document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() + } else { + if (fontSizeVal <= 10) return + newValue = fontSizeVal - 1 + document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() + } + + saveToLocal.set('global-font-size', newValue, 2) + // document.getElementById('font-text').innerText = newValue + } } - // 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 + case 'font-plus': + rightSideFn.adjustFontSize(true) + break + case 'font-minus': + rightSideFn.adjustFontSize() + break + default: + break } }) @@ -500,16 +576,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 +625,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 +636,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 +647,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.getEleTop(btf.getParents(this, '.tabs')), 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() @@ -653,13 +751,16 @@ $(function () { const addPostOutdateNotice = function () { const data = GLOBAL_CONFIG.noticeOutdate - var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate) + const 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 +774,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 +796,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() @@ -708,8 +808,8 @@ $(function () { GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex() GLOBAL_CONFIG.highlight && addHighlightTool() GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() - runJustifiedGallery() - GLOBAL_CONFIG.lightbox !== 'null' && addLightBox() + jqLoadAndRun() + GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() scrollFn() addTableWrap() clickFnOfTagHide() 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..b53e48a 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -1,6 +1,4 @@ -/* eslint-disable no-unused-vars */ - -var btf = { +const btf = { debounce: function (func, wait, immediate) { let timeout return function () { @@ -56,23 +54,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 +73,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 +133,119 @@ var btf = { } else { callback() } + }, + + scrollToDest: (pos, time) => { + if (pos < 0 || time < 0) { + return + } + + const currentPos = window.scrollY || window.screenTop + if (currentPos > pos) pos = pos - 70 + + if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) { + window.scrollTo({ + top: pos, + behavior: 'smooth' + }) + return + } + + let 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) => { + for (; elem && elem !== document; elem = elem.parentNode) { + if (elem.matches(selector)) return elem + } + return null + }, + + siblings: (ele, selector) => { + return [...ele.parentNode.children].filter((child) => { + if (selector) { + return child !== ele && child.matches(selector) + } + return child !== ele + }) + }, + + /** + * + * @param {*} selector + * @param {*} eleType the type of create element + * @param {*} id id + * @param {*} cn class name + */ + wrap: function (selector, eleType, id = '', cn = '') { + 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, + + getEleTop: (ele) => { + let actualTop = ele.offsetTop + let current = ele.offsetParent + + while (current !== null) { + actualTop += current.offsetTop + current = current.offsetParent + } + + return actualTop } + }