From 43790dec07ea34e0fe90f3d854b6c9b020e64d34 Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 20 Jul 2021 23:56:40 +0800 Subject: [PATCH 01/16] =?UTF-8?q?breaking=20changes:=20=E7=B2=BE=E7=B0=A1?= =?UTF-8?q?=E5=90=84=E8=A9=95=E8=AB=96=E7=9A=84=E9=85=8D=E7=BD=AE=20fix:?= =?UTF-8?q?=20=E4=BF=AE=E5=BE=A9footer=20=E5=9C=A8=E9=83=A8=E5=88=86?= =?UTF-8?q?=E7=80=8F=E8=A6=BD=E5=99=A8=E6=B2=92=E6=9C=89=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?=E5=9C=A8=E5=BA=95=E9=83=A8=E7=9A=84=20bug=20improvement:=20?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E8=A8=BB?= =?UTF-8?q?=E9=87=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 23 +++---------------- .../third-party/comments/disqusjs.pug | 11 +++------ .../includes/third-party/comments/gitalk.pug | 5 ---- .../includes/third-party/comments/valine.pug | 8 ------- package.json | 2 +- source/css/_global/index.styl | 4 ++-- source/css/_layout/head.styl | 8 +++---- source/css/_page/common.styl | 2 +- source/css/var.styl | 2 +- 9 files changed, 15 insertions(+), 50 deletions(-) diff --git a/_config.yml b/_config.yml index fa6cadb59..a09855500 100644 --- a/_config.yml +++ b/_config.yml @@ -281,12 +281,8 @@ disqus: # https://github.com/SukkaW/DisqusJS disqusjs: shortname: - siteName: apikey: - api: - nocomment: # display when a blog post or an article has no comment attached - admin: - adminLabel: + option: # livere (來必力) # https://www.livere.com/ @@ -301,11 +297,6 @@ gitalk: repo: owner: admin: - language: en # en, zh-CN, zh-TW, es-ES, fr, ru - perPage: 10 # Pagination size, with maximum 100. - distractionFreeMode: false # Facebook-like distraction free mode. - pagerDirection: last # Comment sorting direction, available values are last and first. - createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically option: # valine @@ -313,17 +304,9 @@ gitalk: valine: appId: # leancloud application app id appKey: # leancloud application app key - pageSize: 10 # comment list page size avatar: monsterid # gravatar style https://valine.js.org/#/avatar - lang: en # i18n: zh-CN/zh-TW/en/ja - placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints) - guest_info: nick,mail,link # valine comment header info (nick/mail/link) - recordIP: false # Record reviewer IP serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) bg: # valine background - emojiCDN: # emoji CDN - enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar - requiredFields: nick,mail # required fields (nick/mail) visitor: false option: @@ -461,9 +444,9 @@ google_adsense: # -------------------------------------- site_verification: - # - name: google_site_verification + # - name: google-site-verification # content: xxxxxx - # - name: baidu_site_verification + # - name: baidu-site-verification # content: xxxxxxx # Beautify/Effect (美化/效果) diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug index e88849aee..268c16f3e 100644 --- a/layout/includes/third-party/comments/disqusjs.pug +++ b/layout/includes/third-party/comments/disqusjs.pug @@ -1,4 +1,3 @@ -- let disqusjsApi = theme.disqusjs.api || 'https://disqus.skk.moe/disqus/' - let disqusjsPageTitle = page.title.replace(/'/ig,"\\'") script. @@ -12,20 +11,16 @@ script. function initDisqusjs () { window.DISQUS = null - new DisqusJS({ + new DisqusJS(Object.assign({ shortname: '!{theme.disqusjs.shortname}', - siteName: '!{theme.disqusjs.siteName}', identifier: '!{ page.path }', url: '!{ page.permalink }', title: '!{ disqusjsPageTitle }', - api: '!{disqusjsApi}', apikey: '!{theme.disqusjs.apikey}', - nocomment: '!{theme.disqusjs.nocomment}', - admin: '!{theme.disqusjs.admin}', - adminLabel: '!{theme.disqusjs.adminLabel}' - }); + },!{JSON.stringify(theme.disqusjs.option)})) } + window.disqusReset = initDisqusjs if (window.disqusJsLoad) initDisqusjs() diff --git a/layout/includes/third-party/comments/gitalk.pug b/layout/includes/third-party/comments/gitalk.pug index 8e78386a0..06ecfd964 100644 --- a/layout/includes/third-party/comments/gitalk.pug +++ b/layout/includes/third-party/comments/gitalk.pug @@ -15,11 +15,6 @@ script. owner: '!{theme.gitalk.owner}', admin: ['!{theme.gitalk.admin}'], id: '!{md5(page.path)}', - language: '!{theme.gitalk.language}', - perPage: !{theme.gitalk.perPage}, - distractionFreeMode: !{theme.gitalk.distractionFreeMode}, - pagerDirection: '!{theme.gitalk.pagerDirection}', - createIssueManually: !{theme.gitalk.createIssueManually}, updateCountCallback: commentCount },!{JSON.stringify(theme.gitalk.option)})) diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug index d5121bc82..91b3110d8 100644 --- a/layout/includes/third-party/comments/valine.pug +++ b/layout/includes/third-party/comments/valine.pug @@ -9,18 +9,10 @@ script. el: '#vcomment', appId: '#{theme.valine.appId}', appKey: '#{theme.valine.appKey}', - placeholder: '#{theme.valine.placeholder}', avatar: '#{theme.valine.avatar}', - meta: '#{theme.valine.guest_info }'.split(','), - pageSize: '#{theme.valine.pageSize}', - lang: '#{theme.valine.lang}', - recordIP: #{theme.valine.recordIP}, serverURLs: '#{theme.valine.serverURLs}', - emojiCDN: '#{theme.valine.emojiCDN}', emojiMaps: !{emojiMaps}, - enableQQ: #{theme.valine.enableQQ}, path: window.location.pathname, - requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}], visitor: #{theme.valine.visitor} }, !{JSON.stringify(theme.valine.option)})) } diff --git a/package.json b/package.json index 4a9118bf5..c8b5a00e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.8.1", + "version": "4.0.0-b1", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 058667193..8edc7f8c7 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -27,8 +27,8 @@ --blockquote-bg: $blockquote-background-color --reward-pop: $reward-pop-up-bg --toc-link-color: $toc-link-color - --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .06) - --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .15) + --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) + --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) html height: 100% diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index cefba44f2..bcd740a8e 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -9,7 +9,7 @@ // index &.full_page - min-height: $index_top_img_height + height: $index_top_img_height background-attachment: fixed #site-info @@ -70,7 +70,7 @@ // page &.not-home-page - min-height: 20rem + height: 20rem +maxWidth768() height: 14rem @@ -86,7 +86,7 @@ // post &.post-bg - min-height: 20rem + height: 20rem +maxWidth768() height: 18rem @@ -118,7 +118,7 @@ &.not-top-img margin-bottom: .5rem - min-height: 60px + height: 60px background: 0 #nav diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index 40768049a..c69521646 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -1,7 +1,7 @@ #body-wrap display: flex flex-direction: column - height: 100vh + min-height: 100vh .layout display: flex diff --git a/source/css/var.styl b/source/css/var.styl index 620540648..87e1503d5 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -33,7 +33,7 @@ $font-color = #1F2D3D $rem = 20px $text-line-height = 2 $web-bg = hexo-config('background') && unquote(hexo-config('background')) -$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100% +$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43% // Global color & SVG $light-blue = $theme-color From 45d6ced50792a149ec0a090e4d35cc431f082faa Mon Sep 17 00:00:00 2001 From: Jerry Date: Fri, 30 Jul 2021 01:09:55 +0800 Subject: [PATCH 02/16] =?UTF-8?q?=E4=BF=AE=E5=BE=A9=20Waline=20=E8=A9=95?= =?UTF-8?q?=E8=AB=96=E7=B3=BB=E7=B5=B1=20=E8=A8=AD=E7=BD=AE=20avatarCDN=20?= =?UTF-8?q?=E7=84=A1=E6=95=88=E7=9A=84=20bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 ++++++++++---- README_CN.md | 17 ++++++++++++----- layout/includes/third-party/comments/waline.pug | 11 +++++++---- package.json | 2 +- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 54757a8ca..900186839 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme. -## Installation +## 💻 Installation ### GIT @@ -48,7 +48,7 @@ In Hexo site root directory npm i hexo-theme-butterfly ``` -## Configuration +## ⚙ Configuration Set theme in the hexo work folder's root config file `_config.yml`: @@ -58,7 +58,7 @@ npm i hexo-theme-butterfly > npm install hexo-renderer-pug hexo-renderer-stylus -## Features +## 🎉 Features - [x] Card UI Design - [X] Support sub-menu @@ -97,7 +97,13 @@ npm i hexo-theme-butterfly - [x] Lazyload images - [x] Instantpage/Pangu/Snackbar notification toast/PWA...... -## Screenshots +## ✨ Contributors + + + + + +## 📷 Screenshots ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg) ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg) diff --git a/README_CN.md b/README_CN.md index 672126914..8dc6794c3 100644 --- a/README_CN.md +++ b/README_CN.md @@ -20,7 +20,7 @@ 一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題 -## 安裝 +## 💻 安裝 ### Git 安裝 @@ -48,7 +48,8 @@ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/bu npm i hexo-theme-butterfly ``` -## 應用主題 +## ⚙ 應用主題 + 修改hexo配置文件`_config.yml`，把主題改為`Butterfly` ``` @@ -57,7 +58,7 @@ theme: butterfly >如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save -## 特色 +## 🎉 特色 - [x] 卡片化設計 - [X] 支持二級目錄 @@ -96,11 +97,17 @@ theme: butterfly - [x] 圖片懶加載 - [x] Instantpage/Pangu/Snackbar彈窗/PWA...... -## 截圖 +## ✨ 贡献者 + + + + + +## 📷 截圖 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg) ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg) ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg) ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg) ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png) -![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png) \ No newline at end of file +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png) diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug index ae1a3822e..2407e4a7c 100644 --- a/layout/includes/third-party/comments/waline.pug +++ b/layout/includes/third-party/comments/waline.pug @@ -1,14 +1,17 @@ +- const { serverURL, avatar, avatarCDN, visitor, option } = theme.waline + script. function loadWaline () { function initWaline () { const waline = new Waline(Object.assign({ el: '#waline-wrap', - serverURL: '!{theme.waline.serverURL}', - avatar: '#{theme.waline.avatar}', + serverURL: '!{serverURL}', + avatar: '#{avatar}', + avatarCDN: '!{avatarCDN || "https://sdn.geekzu.org/avatar/"}', path: location.pathname, - visitor: #{theme.waline.visitor}, + visitor: !{visitor}, dark: 'html[data-theme="dark"]' - }, !{JSON.stringify(theme.waline.option)})) + }, !{JSON.stringify(option)})) } if (typeof Waline === 'function') initWaline() diff --git a/package.json b/package.json index c8b5a00e1..42f73d8b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b1", + "version": "4.0.0-b2", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { From f1bf2413a0f67bd410c7ca0a8a5fcf577ee4318f Mon Sep 17 00:00:00 2001 From: Jerry Date: Sun, 8 Aug 2021 15:36:22 +0800 Subject: [PATCH 03/16] =?UTF-8?q?breaking=20changes:=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=20fancybox=20=E5=88=B0=204=20improvement:=20=E7=B6=B2=E7=AB=99?= =?UTF-8?q?=E8=B3=87=E6=96=99=E9=A1=AF=E7=A4=BA=EF=BC=8C=E4=BD=86=E6=A8=99?= =?UTF-8?q?=E7=B1=A4=E5=92=8C=E5=88=86=E9=A1=9E=E7=82=BA0=E6=99=82?= =?UTF-8?q?=EF=BC=8C=E6=95=B8=E9=87=8F=E9=A1=AF=E7=A4=BA=E7=82=BA=200?= =?UTF-8?q?=EF=BC=8C=E8=80=8C=E4=B8=8D=E6=98=AF=E9=9A=B1=E8=97=8F=20improv?= =?UTF-8?q?ement:=20subtitle=20=E4=BB=A3=E7=A2=BC=E5=84=AA=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=201.=E7=95=B6source=E8=A8=AD=E7=82=BAfalse=EF=BC=8C?= =?UTF-8?q?=E5=90=8C=E6=99=82sub=E4=B9=9F=E6=B2=92=E6=9C=89=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E5=B0=87=E6=9C=83=E8=AE=80=E5=8F=96hexo?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E7=9A=84=20subtitle,2.?= =?UTF-8?q?=E7=84=A1=E9=A0=88=E4=BD=BF=E7=94=A8=E8=BD=89=E7=BE=A9=E5=AD=97?= =?UTF-8?q?=E7=AC=A6=20improvement:=20=E7=A6=81=E6=AD=A2ios=E9=BB=9E?= =?UTF-8?q?=E6=93=8A=E6=90=9C=E7=B4=A2=E6=A1=86=EF=BC=8C=E9=A0=81=E9=9D=A2?= =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=9A=84=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 11 +-- layout/includes/head.pug | 2 +- layout/includes/page/flink.pug | 2 +- layout/includes/sidebar.pug | 33 +++---- layout/includes/third-party/subtitle.pug | 74 ++++++++------- layout/includes/widget/card_author.pug | 29 +++--- package.json | 2 +- scripts/tag/gallery.js | 2 +- source/css/_global/index.styl | 3 - source/css/_layout/post.styl | 1 + source/css/_layout/sidebar.styl | 15 ++- source/css/_tags/gallery.styl | 2 +- source/js/main.js | 116 ++++++++++++----------- 13 files changed, 141 insertions(+), 151 deletions(-) diff --git a/_config.yml b/_config.yml index a09855500..586808d9f 100644 --- a/_config.yml +++ b/_config.yml @@ -595,16 +595,13 @@ subtitle: loop: true # source調用第三方服務 # source: false 關閉調用 - # source: 1 調用搏天api的隨機語錄（簡體） + # source: 1 調用搏天 api 的隨機語錄（簡體） # source: 2 調用一言網的一句話（簡體） # source: 3 調用一句網（簡體） # source: 4 調用今日詩詞（簡體） # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false - # 如果有英文逗號' , ',請使用轉義字元 , - # 如果有英文雙引號' " ',請使用轉義字元 " - # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住 - # 如果關閉打字效果，subtitle只會顯示sub的第一行文字 + # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 sub: # Loading Animation (加載動畫) @@ -876,8 +873,8 @@ CDN: pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js # photo - fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css - fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js + fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css + fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js # snackbar diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 5708d7ce5..3c1c96d3a 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -20,7 +20,7 @@ meta(charset='UTF-8') meta(http-equiv="X-UA-Compatible" content="IE=edge") -meta(name="viewport" content="width=device-width,initial-scale=1") +meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no") title= tabTitle if pageKeywords meta(name="keywords" content=pageKeywords) diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index 65b91d86b..104d288ae 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -13,7 +13,7 @@ each item in i.link_list .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") - .flink-item-icon + .flink-item-icon.not-lightbox img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index d8a66a37c..45a97ee04 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -3,26 +3,21 @@ #sidebar-menus .avatar-img.is-center img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar") - .site-data - if site.posts.length - .data-item.is-center - .data-item-link - a(href=url_for(config.archive_dir) + '/') - .headline= _p('aside.articles') - .length-num= site.posts.length + .site-data.is-center + .data-item + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length - if site.tags.length - .data-item.is-center - .data-item-link - a(href=url_for(config.tag_dir) + '/' ) - .headline= _p('aside.tags') - .length-num= site.tags.length + .data-item + a(href=url_for(config.tag_dir) + '/' ) + .headline= _p('aside.tags') + .length-num= site.tags.length + + .data-item + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length - if site.categories.length - .data-item.is-center - .data-item-link - a(href=url_for(config.category_dir) + '/') - .headline= _p('aside.categories') - .length-num= site.categories.length hr !=partial('includes/header/menu_item', {}, {cache: true}) diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index ee0f58371..1b2720c74 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -1,4 +1,5 @@ -- let source = theme.subtitle.source +- const { effect,loop,source,sub } = theme.subtitle +- let subContent = sub || new Array() case source when 1 @@ -7,14 +8,14 @@ case source 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', { + if (!{effect}) { + const sub = !{JSON.stringify(subContent)} + sub.unshift(data.text) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -23,7 +24,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -39,15 +40,15 @@ case source 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', { + if (!{effect}) { + const from = '出自 ' + data.from + const sub = !{JSON.stringify(subContent)} + sub.unshift(data.hitokoto, from) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -56,7 +57,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -70,16 +71,16 @@ case source script. function subtitleType () { getScript('https://yijuzhan.com/api/word.php?m=js').then(() => { - var con = str[0] - if (!{theme.subtitle.effect}) { - var from = '出自 ' + str[1] - var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') - var both = sub.unshift(con, from) - var typed = new Typed('#subtitle', { + const con = str[0] + if (!{effect}) { + const from = '出自 ' + str[1] + const sub = !{JSON.stringify(subContent)} + sub.unshift(con, from) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -88,7 +89,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -102,16 +103,16 @@ case source script. function subtitleType () { 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(',') - var content = result.data.content - var both = sub.unshift(content) - var typed = new Typed('#subtitle', { + jinrishici.load(result =>{ + if (!{effect}) { + const sub = !{JSON.stringify(subContent)} + const content = result.data.content + sub.unshift(content) + window.typed = new Typed('#subtitle', { strings: sub, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50, }) } else { @@ -121,7 +122,7 @@ case source }) } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { @@ -132,22 +133,23 @@ case source } default + - subContent = subContent.length ? subContent : new Array(config.subtitle) script. function subtitleType () { - if (!{theme.subtitle.effect}) { - var typed = new Typed("#subtitle", { - strings: "!{theme.subtitle.sub}".split(","), + if (!{effect}) { + window.typed = new Typed("#subtitle", { + strings: !{JSON.stringify(subContent)}, startDelay: 300, typeSpeed: 150, - loop: !{theme.subtitle.loop}, + loop: !{loop}, backSpeed: 50 }) } else { - document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}' + document.getElementById("subtitle").innerHTML = '!{subContent[0]}' } } - if (!{theme.subtitle.effect}) { + if (!{effect}) { if (typeof Typed === 'function') { subtitleType() } else { diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index 57b1f9dad..dd8cc7b1c 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -6,24 +6,21 @@ if theme.aside.card_author.enable .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.is-center + .card-info-data-item + 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 + .card-info-data-item + 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 + .card-info-data-item + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length if theme.aside.card_author.button.enable a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) diff --git a/package.json b/package.json index 42f73d8b2..a4f0af3bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b2", + "version": "4.0.0-b3", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js index 6bec4c452..82067c126 100644 --- a/scripts/tag/gallery.js +++ b/scripts/tag/gallery.js @@ -19,7 +19,7 @@ function galleryGroup (args) { const img = urlFor(args[3]) return ` -
+
Group Image Gallery
${name}
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 8edc7f8c7..09c966ba7 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -199,9 +199,6 @@ if $site-name-font transform: scaleX(1) img - max-width: 100% - transition: all .2s - &[src=''], &:not([src]) opacity: 0 diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 2785ae145..0b341c6b3 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -154,6 +154,7 @@ no-beautify() img display: block margin: 0 auto .8rem + max-width: 100% p margin: 0 0 .8rem diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 25e8ae581..933f4ec09 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -34,16 +34,15 @@ .data-item display: table-cell - .data-item-link - & > a > div - @extend .limit-one-line + & > a > div + @extend .limit-one-line - .length-num - color: var(--text-highlight-color) - font-size: 1.28em + .length-num + color: var(--text-highlight-color) + font-size: 1.28em - .headline - color: var(--font-color) + .headline + color: var(--font-color) hr margin: 1rem auto diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index bb76a4dbc..743a645b1 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -27,7 +27,7 @@ figure.gallery-group img position: relative margin: 0 !important - max-width: none + max-width: none !important width: calc(100% + 20px) height: 250px backface-visibility: hidden diff --git a/source/js/main.js b/source/js/main.js index 4bf883958..42c3a42aa 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -234,67 +234,39 @@ document.addEventListener('DOMContentLoaded', function () { }) } - /** - * justified-gallery 圖庫排版 - * 需要 jQuery - */ - - let detectJgJsLoad = false - 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.source.justifiedGallery.js}`, function () { - btf.initJustifiedGallery($justifiedGallery) - }) - detectJgJsLoad = true - } - } - /** * fancybox和 mediumZoom */ - const addFancybox = function (ele) { - 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(``) + const addFancybox = () => { + const runFancybox = () => { + document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').forEach(i => { + const lazyloadSrc = i.dataset.lazySrc || i.src + const dataCaption = i.alt || '' + btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc }) }) - $().fancybox({ - selector: '[data-fancybox]', - loop: true, - transitionEffect: 'slide', - protect: true, - buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], - hash: false + Fancybox.destroy() + Fancybox.bind('[data-fancybox]', { + Hash: false }) } - if (typeof $.fancybox === 'undefined') { - $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () { - runFancybox($(ele)) + if (typeof Fancybox !== 'function') { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href = GLOBAL_CONFIG.source.fancybox.css + document.head.appendChild(ele) + + getScript(`${GLOBAL_CONFIG.source.fancybox.js}`).then(() => { + runFancybox() }) } else { - runFancybox($(ele)) + runFancybox() } } const addMediumZoom = () => { - const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.flink-item-icon) > img')) + const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img')) zoom.on('open', e => { const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' zoom.update({ @@ -303,20 +275,51 @@ document.addEventListener('DOMContentLoaded', function () { }) } + // It needs to call it after the Justified Gallery done, or the fancybox maybe not work + const runLightbox = () => { + GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() + GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox() + } + + /** + * justified-gallery 圖庫排版 + * 需要 jQuery + */ + let detectJgJsLoad = false + 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) { + runLightbox() + btf.initJustifiedGallery($justifiedGallery) + return + } + + $('head').append(``) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { + runLightbox() + btf.initJustifiedGallery($justifiedGallery) + }) + detectJgJsLoad = true + } + const jqLoadAndRun = () => { - const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox' - ? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.flink-item-icon) > img, #article-container > img') - : [] - const fbLengthNoZero = $fancyboxEle.length > 0 const $jgEle = document.querySelectorAll('#article-container .justified-gallery') - const jgLengthNoZero = $jgEle.length > 0 - - if (jgLengthNoZero || fbLengthNoZero) { + if ($jgEle.length) { btf.isJqueryLoad(() => { - jgLengthNoZero && runJustifiedGallery($jgEle) - fbLengthNoZero && addFancybox($fancyboxEle) + runJustifiedGallery($jgEle) }) + return } + runLightbox() } /** @@ -853,7 +856,6 @@ document.addEventListener('DOMContentLoaded', function () { addHighlightTool() GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() jqLoadAndRun() - GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() scrollFn() addTableWrap() clickFnOfTagHide() From f1d1ae663956278532ee6da97140d1228c249f3a Mon Sep 17 00:00:00 2001 From: Eurkon <53698089+Eurkon@users.noreply.github.com> Date: Thu, 12 Aug 2021 14:13:02 +0800 Subject: [PATCH 04/16] =?UTF-8?q?fix:=20=E6=96=87=E7=AB=A0=20post-info=20?= =?UTF-8?q?=E4=B8=AD=E5=8F=91=E8=A1=A8=E6=97=B6=E9=97=B4=20title=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=20undefined=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/includes/header/post-info.pug | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 1edae7292..45c430acc 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -21,9 +21,9 @@ - let data_type_update = theme.post_meta.post.date_type === 'updated' - let date_type = data_type_update ? 'updated' : 'date' - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt' - - let data_info = data_type_update ? _p('post.updated') : _p('post.created') + - let date_title = data_type_update ? _p('post.updated') : _p('post.created') i.fa-fw.post-meta-icon(class=date_icon) - span.post-meta-label= data_info + span.post-meta-label= date_title time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format) if (theme.post_meta.post.categories && page.categories.data.length > 0) span.post-meta-categories @@ -108,4 +108,4 @@ when 'Facebook Comments' +countBlock a(href=url_for(page.path) + '#post-comment') - span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file + span.fb-comments-count(data-href=urlNoIndex()) From 7210f5b431b3e53147538b1ba056da02b24fa121 Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 18 Aug 2021 00:07:31 +0800 Subject: [PATCH 05/16] =?UTF-8?q?breaking=20changes:=20toc=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=9B=B4=E6=94=B9=EF=BC=8C=E9=A0=81=E9=9D=A2=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20toc=20=E9=A1=AF=E7=A4=BA=20close=20#636=20feat:=20?= =?UTF-8?q?=E4=BB=A3=E7=A2=BC=E6=A1=86=E8=A8=AD=E7=BD=AE=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=E9=99=90=E5=88=B6=EF=BC=8C=E5=B1=95=E9=96=8B=E5=BE=8C=E6=8C=89?= =?UTF-8?q?=E9=88=95=E4=B8=8D=E6=9C=83=E6=B6=88=E5=A4=B1=EF=BC=8C=E5=8F=AF?= =?UTF-8?q?=E9=BB=9E=E6=93=8A=E5=86=8D=E6=AC=A1=E6=91=BA=E7=96=8A=20close?= =?UTF-8?q?=20#637=20feat:=20=E5=A2=9E=E5=8A=A0=20no-lightbox=20class=20?= =?UTF-8?q?=E5=81=B5=E6=B8=AC=EF=BC=8C=E5=8F=AF=E9=85=8D=E7=BD=AE=20fancyb?= =?UTF-8?q?ox=20=E5=92=8C=20medium-zoom=20=E4=B8=8D=E6=87=89=E7=94=A8?= =?UTF-8?q?=E6=96=BC=E5=9C=96=E7=89=87=20#636=20fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E9=96=8B=E5=95=9F=20lazyload=20=E6=99=82=EF=BC=8C=20fancybox?= =?UTF-8?q?=20=E7=9A=84=E7=B8=AE=E7=95=A5=E5=9C=96=E9=A1=AF=E7=A4=BA=20laz?= =?UTF-8?q?yload=20=E5=8A=A0=E8=BC=89=E5=9C=96=E7=89=87=E7=9A=84=20bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 3 ++- layout/category.pug | 4 ++-- layout/includes/head/config_site.pug | 17 +++++++++++++---- layout/includes/header/post-info.pug | 2 +- layout/includes/page/flink.pug | 4 ++-- layout/includes/rightside.pug | 6 +++--- layout/includes/widget/index.pug | 4 +++- package.json | 4 ++-- scripts/tag/gallery.js | 4 ++-- source/css/_highlight/highlight.styl | 6 +++++- source/js/main.js | 6 +++--- 11 files changed, 38 insertions(+), 22 deletions(-) diff --git a/_config.yml b/_config.yml index 586808d9f..ae2a6f25c 100644 --- a/_config.yml +++ b/_config.yml @@ -175,7 +175,8 @@ index_post_content: # toc (目錄) toc: - enable: true + post: true + page: false number: true style_simple: false diff --git a/layout/category.pug b/layout/category.pug index 5dc21d58c..234a0af65 100644 --- a/layout/category.pug +++ b/layout/category.pug @@ -3,9 +3,9 @@ extends includes/layout.pug block content if theme.category_ui == 'index' include ./includes/mixins/post-ui.pug - #recent-posts.recent-posts.category_ui + #recent-posts.recent-posts.category_ui +postUI - include includes/pagination.pug + include includes/pagination.pug else include ./includes/mixins/article-sort.pug #category diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug index 1d78e982c..220c55f31 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -1,13 +1,22 @@ - + const titleVal = pageTitle.replace(/'/ig,"\\'") + let isHighlightShrink if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined' else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink else isHighlightShrink = theme.highlight_shrink - 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 ) - - let titleVal = pageTitle.replace(/'/ig,"\\'") + var showToc = false + if (theme.aside.enable) { + let tocEnable = false + if (is_post()) { + if (theme.toc.post) tocEnable = true + } else if (is_page()) { + if (theme.toc.page) tocEnable = true + } + const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable + showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true ) + } - script#config-diff. diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 45c430acc..61b2e7bd3 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -108,4 +108,4 @@ when 'Facebook Comments' +countBlock a(href=url_for(page.path) + '#post-comment') - span.fb-comments-count(data-href=urlNoIndex()) + span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index 104d288ae..c986f592b 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -13,8 +13,8 @@ each item in i.link_list .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") - .flink-item-icon.not-lightbox - img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) + .flink-item-icon + img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr != page.content diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index a52f6a1c5..0e0bdf558 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -21,13 +21,13 @@ 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.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) || theme.change_font_size button#rightside_config(type="button" title=_p("rightside.setting")) i.fas.fa-cog.fa-spin + if showToc + button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) + i.fas.fa-list-ul if theme.chat_btn button#chat_btn(type="button" title=_p("rightside.chat_btn")) i.fas.fa-sms diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index f9b993067..9d523d2f0 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -7,7 +7,7 @@ else !=partial('includes/widget/card_author', {}, {cache: true}) !=partial('includes/widget/card_announcement', {}, {cache: true}) - !=partial('includes/widget/card_top_self', {}, {cache: true}) + !=partial('includes/widget/card_top_self', {}, {cache: true}) .sticky_layout if showToc include ./card_post_toc.pug @@ -20,6 +20,8 @@ !=partial('includes/widget/card_top_self', {}, {cache: true}) .sticky_layout + if showToc + include ./card_post_toc.pug !=partial('includes/widget/card_recent_post', {}, {cache: true}) !=partial('includes/widget/card_ad', {}, {cache: true}) !=partial('includes/widget/card_newest_comment', {}, {cache: true}) diff --git a/package.json b/package.json index a4f0af3bd..de4578d7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b3", + "version": "4.0.0-b4", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { @@ -20,7 +20,7 @@ }, "bugs": { "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues", - "email": "btf@immyw.com" + "email": "i@immyw.com" }, "dependencies": { "hexo-renderer-stylus": "^2.0.1", diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js index 82067c126..21ebb55a4 100644 --- a/scripts/tag/gallery.js +++ b/scripts/tag/gallery.js @@ -19,8 +19,8 @@ function galleryGroup (args) { const img = urlFor(args[3]) return ` -
- Group Image Gallery +
+ Group Image Gallery
${name}

${desrc}

diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 1a2523008..0e9de7289 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -209,7 +209,11 @@ blockquote animation: code-expand-key 1.2s infinite &.expand-done - display: none !important + & > i + transform: rotate(180deg) + + & + table + margin-bottom: 1.8em &:not(.expand-done) & ~ table, diff --git a/source/js/main.js b/source/js/main.js index 42c3a42aa..d8de92625 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -239,7 +239,7 @@ document.addEventListener('DOMContentLoaded', function () { */ const addFancybox = () => { const runFancybox = () => { - document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').forEach(i => { + document.querySelectorAll('#article-container img:not(.no-lightbox)').forEach(i => { const lazyloadSrc = i.dataset.lazySrc || i.src const dataCaption = i.alt || '' btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc }) @@ -266,7 +266,7 @@ document.addEventListener('DOMContentLoaded', function () { } const addMediumZoom = () => { - const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img')) + const zoom = mediumZoom(document.querySelectorAll('#article-container img:not(.no-lightbox)')) zoom.on('open', e => { const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' zoom.update({ @@ -841,7 +841,6 @@ document.addEventListener('DOMContentLoaded', function () { initAdjust() if (GLOBAL_CONFIG_SITE.isPost) { - GLOBAL_CONFIG_SITE.isToc && tocFn() GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice() GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time')) } else { @@ -851,6 +850,7 @@ document.addEventListener('DOMContentLoaded', function () { toggleCardCategory() } + GLOBAL_CONFIG_SITE.isToc && tocFn() sidebarFn() GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex() addHighlightTool() From 484f036adb2e84f9dcb8fbe15df6218e1712910b Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 1 Sep 2021 16:10:39 +0800 Subject: [PATCH 06/16] =?UTF-8?q?breaking=20changes:=20=E5=88=AA=E9=99=A4?= =?UTF-8?q?=20hide=5Fsidebar=5Fmenu=5Fchild=20=E9=85=8D=E7=BD=AE=EF=BC=8C?= =?UTF-8?q?=E6=94=B9=E7=82=BA=E7=9B=B4=E6=8E=A5=E5=9C=A8=20menu=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20close=20#640=20feat:=20sidebar=20menu=20?= =?UTF-8?q?=E9=BB=9E=E6=93=8A=E5=B1=95=E9=96=8B=E4=B8=8D=E5=86=8D=E9=99=90?= =?UTF-8?q?=E5=88=B6=E5=8F=AA=E8=83=BD=E9=BB=9E=E6=93=8A=E6=8C=89=E9=88=95?= =?UTF-8?q?=20#640=20feat:=20TWIKOO=20=E8=A9=95=E8=AB=96=E5=9C=96=E7=89=87?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20lightbox=20feat:=20=E5=8D=87=E7=B4=9A=20fa?= =?UTF-8?q?cebook=20comment=20js=20=E5=88=B0=20v11=20fix:=20=E4=BF=AE?= =?UTF-8?q?=E5=BE=A9=E5=8F=AF=E8=83=BD=E5=B0=8E=E8=87=B4=E7=9B=B8=E9=97=9C?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=8F=88=E6=8E=A5=E5=87=BA=E9=8C=AF=E7=9A=84?= =?UTF-8?q?bug=20#549=20improvement:=20=E8=AA=BF=E6=95=B4=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E6=A1=86=20ocean=20theme=20=E4=B8=8B=E6=BB=BE?= =?UTF-8?q?=E5=8B=95=E6=A2=9D=E9=A1=8F=E8=89=B2=20close=20#651=20improveme?= =?UTF-8?q?nt:=20=E7=95=B6=E5=9C=96=E7=89=87=E6=B2=92=E6=9C=89=20figcaptio?= =?UTF-8?q?n=20=E6=99=82=EF=BC=8C=E4=B8=8D=E6=9C=83=E6=B7=BB=E5=8A=A0=20fi?= =?UTF-8?q?gcaption=20=E4=BB=A3=E7=A2=BC=20improvement:=20=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E5=84=AA=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 9 +- layout/includes/additional-js.pug | 31 ++-- layout/includes/head.pug | 4 +- layout/includes/head/config.pug | 4 - layout/includes/header/menu_item.pug | 29 ++-- .../comments/facebook_comments.pug | 2 +- .../includes/third-party/comments/twikoo.pug | 5 +- .../third-party/comments/utterances.pug | 4 +- package.json | 2 +- scripts/helpers/related_post.js | 34 +---- source/css/_highlight/highlight.styl | 3 +- source/css/_highlight/theme.styl | 2 +- source/css/_layout/head.styl | 6 +- source/css/_layout/sidebar.styl | 24 +-- source/js/main.js | 142 ++++++------------ source/js/utils.js | 29 +++- 16 files changed, 141 insertions(+), 189 deletions(-) diff --git a/_config.yml b/_config.yml index ae2a6f25c..f8ae95ffb 100644 --- a/_config.yml +++ b/_config.yml @@ -1,11 +1,7 @@ # Main menu navigation (導航目錄) +# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單 # -------------------------------------- -# format: name: link || icon -# sub-menu -# name || icon: -# name: link || icon - menu: # Home: / || fas fa-home # Archives: /archives/ || fas fa-archive @@ -17,9 +13,6 @@ menu: # Link: /link/ || fas fa-link # About: /about/ || fas fa-heart -# Hide the child menu items in mobile sidebar -hide_sidebar_menu_child: false - # Code Blocks (代碼相關) # -------------------------------------- diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index d125cd7c5..56d0f2972 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -7,9 +7,11 @@ 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") + script(src=url_for(theme.CDN.instantpage), type='module') if theme.lazyload.enable script(src=url_for(theme.CDN.lazyload)) @@ -18,21 +20,22 @@ div script(src=url_for(theme.CDN.snackbar)) if theme.pangu.enable - !=partial('includes/third-party/pangu.pug', {}, {cache: true}) + != partial("includes/third-party/pangu.pug", {}, { cache: true }) //- search if theme.algolia_search.enable + script(src=url_for(theme.CDN.algolia_search)) script(src=url_for(theme.CDN.algolia_js)) else if theme.local_search.enable script(src=url_for(theme.CDN.local_search)) if theme.preloader - !=partial('includes/loading/loading-js', {}, {cache: true}) + != partial("includes/loading/loading-js", {}, { cache: true }) .js-pjax if needLoadCountJs - !=partial('includes/third-party/card-post-count/index', {}, {cache: true}) - + != partial("includes/third-party/card-post-count/index", {}, { cache: true }) + if loadSubJs include ./third-party/subtitle.pug @@ -41,20 +44,20 @@ div if commentsJsLoad include ./third-party/comments/js.pug - !=partial('includes/third-party/prismjs', {}, {cache: true}) + != partial("includes/third-party/prismjs", {}, { cache: true }) if theme.aside.enable && theme.newest_comments.enable if theme.pjax.enable - !=partial('includes/third-party/newest-comments/index', {}, {cache: true}) + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) else if (!is_post() && page.aside !== false) - !=partial('includes/third-party/newest-comments/index', {}, {cache: true}) + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) + + != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) - !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + != partial("includes/third-party/effect", {}, { cache: true }) - !=partial('includes/third-party/effect', {}, {cache: true}) + != partial("includes/third-party/chat/index", {}, { cache: true }) - !=partial('includes/third-party/chat/index', {}, {cache: true}) - if theme.aplayerInject && theme.aplayerInject.enable if theme.pjax.enable || theme.aplayerInject.per_page include ./third-party/aplayer.pug @@ -62,7 +65,7 @@ div include ./third-party/aplayer.pug if theme.pjax.enable - !=partial('includes/third-party/pjax', {}, {cache: true}) - + != partial("includes/third-party/pjax", {}, { cache: true }) + if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv script(async data-pjax src=url_for(theme.CDN.busuanzi)) diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 3c1c96d3a..cefb64457 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -54,7 +54,9 @@ if (theme.snackbar && theme.snackbar.enable) if theme.algolia_search.enable 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) + +if theme.fancybox + link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'") //- google_adsense !=partial('includes/head/google_adsense', {}, {cache: true}) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 9dd4f3b00..f669dbea1 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -116,10 +116,6 @@ script. 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}, diff --git a/layout/includes/header/menu_item.pug b/layout/includes/header/menu_item.pug index 5a63994da..d172db74a 100644 --- a/layout/includes/header/menu_item.pug +++ b/layout/includes/header/menu_item.pug @@ -1,26 +1,27 @@ if theme.menu - //- for mobile sidebar - - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : '' - .menus_items each value, label in theme.menu if typeof value !== 'object' .menus_item - a.site-page(href=url_for(trim(value.split('||')[0]))) - if value.split('||')[1] - i.fa-fw(class=trim(value.split('||')[1])) + - const valueArray = value.split('||') + a.site-page(href=url_for(trim(valueArray[0]))) + if valueArray[1] + i.fa-fw(class=trim(valueArray[1])) span=' '+label else .menus_item - a.site-page(href='javascript:void(0);') - if label.split('||')[1] - i.fa-fw(class=trim(label.split('||')[1])) - span=' '+ trim(label.split('||')[0]) - i.fas.fa-chevron-down.expand(class=sidebarChildHide) + - const labelArray = label.split('||') + - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : '' + a.site-page.group(class=`${hideClass}` href='javascript:void(0);') + if labelArray[1] + i.fa-fw(class=trim(labelArray[1])) + span=' '+ trim(labelArray[0]) + i.fas.fa-chevron-down ul.menus_item_child each val,lab in value + - const valArray = val.split('||') li - a.site-page.child(href=url_for(trim(val.split('||')[0]))) - if val.split('||')[1] - i.fa-fw(class=trim(val.split('||')[1])) + a.site-page.child(href=url_for(trim(valArray[0]))) + if valArray[1] + i.fa-fw(class=trim(valArray[1])) span=' '+ lab \ No newline at end of file diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug index 03cf3cd13..54807cc70 100644 --- a/layout/includes/third-party/comments/facebook_comments.pug +++ b/layout/includes/third-party/comments/facebook_comments.pug @@ -7,7 +7,7 @@ script. if (typeof FB === 'object') FB.XFBML.parse() else { let ele = document.createElement('script') - ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0') + ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v11.0') ele.setAttribute('async', 'true') ele.setAttribute('defer', 'true') ele.setAttribute('crossorigin', 'anonymous') diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 8fcf32f78..c191ceca9 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -5,7 +5,10 @@ script. twikoo.init(Object.assign({ el: '#twikoo-wrap', envId: '!{theme.twikoo.envId}', - region: '!{theme.twikoo.region}' + region: '!{theme.twikoo.region}', + onCommentLoaded: function () { + btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)')) + } }, !{JSON.stringify(theme.twikoo.option)})) } diff --git a/layout/includes/third-party/comments/utterances.pug b/layout/includes/third-party/comments/utterances.pug index dbd422f13..25cccf228 100644 --- a/layout/includes/third-party/comments/utterances.pug +++ b/layout/includes/third-party/comments/utterances.pug @@ -13,13 +13,13 @@ script. } function utterancesTheme () { - if (document.querySelector('.utterances-frame')) { + const iframe = document.querySelector('.utterances-frame') + if (iframe) { const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' const message = { type: 'set-theme', theme: theme }; - const iframe = document.querySelector('.utterances-frame'); iframe.contentWindow.postMessage(message, 'https://utteranc.es'); } } diff --git a/package.json b/package.json index de4578d7e..b49ca223a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b4", + "version": "4.0.0-b5", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js index 1e7efd427..2f8371a39 100644 --- a/scripts/helpers/related_post.js +++ b/scripts/helpers/related_post.js @@ -46,11 +46,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { if (relatedPosts.length > 0) { result += '
' - result += - '
' + - ' ' + - headlineLang + - '
' + result += `
${headlineLang}
` result += '
' for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) { @@ -58,32 +54,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover - result += - '
' - result += - 'cover' + result += `
` + result += `cover` if (dateType === 'created') { - result += - '
' + - ' ' + - this.date(relatedPosts[i].created, hexoConfig.date_format) + - '
' + result += `
${this.date(relatedPosts[i].created, hexoConfig.date_format)}
` } else { - result += - '
' + - ' ' + - this.date(relatedPosts[i].updated, hexoConfig.date_format) + - '
' + result += `
${this.date(relatedPosts[i].updated, hexoConfig.date_format)}
` } - result += - '
' + relatedPosts[i].title + '
' + result += `
${relatedPosts[i].title}
` result += '
' } diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 0e9de7289..b69660e0b 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -212,7 +212,8 @@ blockquote & > i transform: rotate(180deg) - & + table + & + table, + & + pre margin-bottom: 1.8em &:not(.expand-done) diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index 528f18e51..c9c45c712 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -63,7 +63,7 @@ if $highlight_theme == 'ocean' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 5) + $highlight-scrollbar = darken($highlight-foreground, 40) if $highlighEnable $highlight-comment = rgba(101, 115, 126, .8) diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index bcd740a8e..3bb93ae2c 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -293,10 +293,10 @@ .menus_item_child display: block - i.expand - transform: rotate(180deg) !important + & > a > i:last-child + transform: rotate(180deg) - i.expand + & > a > i:last-child padding: 4px transition: transform .3s diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 933f4ec09..783ca205b 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -65,18 +65,20 @@ width: 15% text-align: left - .expand - position: absolute - top: .78em - right: .9rem - transition: transform .3s + &.group + & > i:last-child + position: absolute + top: .78em + right: .9rem + transition: transform .3s - &.hide - transform: rotate(90deg) !important + &.hide + & > i:last-child + transform: rotate(90deg) + + & + .menus_item_child + display: none .menus_item_child margin: 0 - list-style: none - - if hexo-config('hide_sidebar_menu_child') - display: none \ No newline at end of file + list-style: none \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index d8de92625..be826602d 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -67,8 +67,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 首頁top_img底下的箭頭 - */ + * 首頁top_img底下的箭頭 + */ const scrollDownInIndex = () => { const $scrollDownEle = document.getElementById('scroll-down') $scrollDownEle && $scrollDownEle.addEventListener('click', function () { @@ -77,9 +77,9 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 代碼 - * 只適用於Hexo默認的代碼渲染 - */ + * 代碼 + * 只適用於Hexo默認的代碼渲染 + */ const addHighlightTool = function () { const highLight = GLOBAL_CONFIG.highlight if (!highLight) return @@ -220,76 +220,38 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * PhotoFigcaption - */ + * PhotoFigcaption + */ function addPhotoFigcaption () { document.querySelectorAll('#article-container img').forEach(function (item) { const parentEle = item.parentNode - if (!parentEle.parentNode.classList.contains('justified-gallery')) { + const altValue = item.alt + if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) { const ele = document.createElement('div') ele.className = 'img-alt is-center' - ele.textContent = item.getAttribute('alt') + ele.textContent = altValue parentEle.insertBefore(ele, item.nextSibling) } }) } /** - * fancybox和 mediumZoom - */ - const addFancybox = () => { - const runFancybox = () => { - document.querySelectorAll('#article-container img:not(.no-lightbox)').forEach(i => { - const lazyloadSrc = i.dataset.lazySrc || i.src - const dataCaption = i.alt || '' - btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc }) - }) - - Fancybox.destroy() - Fancybox.bind('[data-fancybox]', { - Hash: false - }) - } - - if (typeof Fancybox !== 'function') { - const ele = document.createElement('link') - ele.rel = 'stylesheet' - ele.href = GLOBAL_CONFIG.source.fancybox.css - document.head.appendChild(ele) - - getScript(`${GLOBAL_CONFIG.source.fancybox.js}`).then(() => { - runFancybox() - }) - } else { - runFancybox() - } - } - - const addMediumZoom = () => { - const zoom = mediumZoom(document.querySelectorAll('#article-container img:not(.no-lightbox)')) - zoom.on('open', e => { - const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' - zoom.update({ - background: photoBg - }) - }) - } - - // It needs to call it after the Justified Gallery done, or the fancybox maybe not work + * Lightbox + * It needs to call it after the Justified Gallery done, or the fancybox maybe not work + */ const runLightbox = () => { - GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() - GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox() + btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)')) } /** - * justified-gallery 圖庫排版 - * 需要 jQuery - */ + * justified-gallery 圖庫排版 + * 需要 jQuery + */ let detectJgJsLoad = false const runJustifiedGallery = function (ele) { const $justifiedGallery = $(ele) const $imgList = $justifiedGallery.find('img') - $imgList.unwrap() + $imgList.unwrap() // remove

tag if ($imgList.length) { $imgList.each(function (i, o) { if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) @@ -297,17 +259,15 @@ document.addEventListener('DOMContentLoaded', function () { }) } + runLightbox() + if (detectJgJsLoad) { - runLightbox() btf.initJustifiedGallery($justifiedGallery) return } $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { - runLightbox() - btf.initJustifiedGallery($justifiedGallery) - }) + $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) }) detectJgJsLoad = true } @@ -323,8 +283,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 滾動處理 - */ + * 滾動處理 + */ const scrollFn = function () { const $rightside = document.getElementById('rightside') const innerHeight = window.innerHeight + 56 @@ -387,8 +347,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * toc - */ + * toc + */ const tocFn = function () { const $cardTocLayout = document.getElementById('card-toc') const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] @@ -517,8 +477,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * Rightside - */ + * Rightside + */ const rightSideFn = { switchReadMode: () => { // read-mode const $body = document.body @@ -582,7 +542,6 @@ document.addEventListener('DOMContentLoaded', function () { } saveToLocal.set('global-font-size', newValue, 2) - // document.getElementById('font-text').innerText = newValue } } @@ -616,34 +575,21 @@ document.addEventListener('DOMContentLoaded', function () { }) /** - * menu - * 側邊欄sub-menu 展開/收縮 - * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) - */ - const clickFnOfSubMenu = function () { - document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) { - e.addEventListener('click', function () { + * menu + * 側邊欄sub-menu 展開/收縮 + * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) + */ + const clickFnOfSubMenu = () => { + document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) { + item.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.addEventListener('touchmove', function (e) { - const $menusChild = document.querySelectorAll('#nav .menus_item_child') - $menusChild.forEach(item => { - if (!btf.isHidden(item)) item.style.display = 'none' }) }) } /** - * 複製時加上版權信息 - */ + * 複製時加上版權信息 + */ const addCopyright = () => { const copyright = GLOBAL_CONFIG.copyright document.body.oncopy = (e) => { @@ -667,8 +613,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 網頁運行時間 - */ + * 網頁運行時間 + */ const addRuntime = () => { const $runtimeCount = document.getElementById('runtimeshow') if ($runtimeCount) { @@ -678,8 +624,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * 最後一次更新時間 - */ + * 最後一次更新時間 + */ const addLastPushDate = () => { const $lastPushDateItem = document.getElementById('last-push-date') if ($lastPushDateItem) { @@ -689,8 +635,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * table overflow - */ + * table overflow + */ const addTableWrap = function () { const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table') if ($table.length) { @@ -701,8 +647,8 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * tag-hide - */ + * tag-hide + */ const clickFnOfTagHide = function () { const $hideInline = document.querySelectorAll('#article-container .hide-button') if ($hideInline.length) { diff --git a/source/js/utils.js b/source/js/utils.js index 8fa5d8a0e..3e52f1b1d 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -246,6 +246,33 @@ const btf = { } return actualTop - } + }, + + loadLightbox: ele => { + const service = GLOBAL_CONFIG.lightbox + + if (service === 'mediumZoom') { + const zoom = mediumZoom(ele) + zoom.on('open', e => { + const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' + zoom.update({ + background: photoBg + }) + }) + } + if (service === 'fancybox') { + ele.forEach(i => { + if (i.parentNode.tagName !== 'A') { + const dataSrc = i.dataset.lazySrc || i.src + const dataCaption = i.alt || '' + btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc }) + } + }) + + Fancybox.bind('[data-fancybox]', { + Hash: false + }) + } + } } From 3708fdf569fd9d5847c43d03a7c48c11fac63107 Mon Sep 17 00:00:00 2001 From: Jerry Date: Mon, 20 Sep 2021 17:55:20 +0800 Subject: [PATCH 07/16] =?UTF-8?q?breaking=20changes:=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=20html=20=E7=9A=84=20font-size=20=E6=94=B9=E7=82=BA=E7=80=8F?= =?UTF-8?q?=E8=A6=BD=E5=99=A8=E9=BB=98=E8=AA=8D=E5=A4=A7=E5=B0=8F=20feat:?= =?UTF-8?q?=20=E7=82=BA=E6=96=87=E7=AB=A0=E5=96=AE=E7=8D=A8=E8=A8=AD?= =?UTF-8?q?=E7=BD=AE=20TOC=20simple=5Fstyle=20=E9=A1=AF=E7=A4=BA=20closed?= =?UTF-8?q?=20#631=20feat:=20page=20=E9=A0=81=E9=A0=82=E9=83=A8=E5=9C=96?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=BB=91=E8=89=B2=E9=81=AE=E7=BD=A9=20closed?= =?UTF-8?q?=20#671=20feat:=20=E9=A6=96=E9=A0=81=20pagination=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20UI=20fix:=20=E4=BF=AE=E5=BE=A9=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2=E6=99=82=EF=BC=8C=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=8F=92=E4=BB=B6=E9=85=8D=E7=BD=AE=E7=82=BA=E4=B8=8D?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=96=87=E7=AB=A0=E5=85=A7=E5=AE=B9=E6=9C=83?= =?UTF-8?q?=E7=84=A1=E6=B3=95=E4=BD=BF=E7=94=A8=E6=90=9C=E7=B4=A2=20?= =?UTF-8?q?=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9=E9=96=8B=E5=95=9F?= =?UTF-8?q?=20photofigcaption=20=E5=BE=8C=EF=BC=8C=E5=B0=8E=E8=87=B4inline?= =?UTF-8?q?Img=E6=A8=99=E7=B1=A4=E5=A4=96=E6=8E=9B=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?=E9=8C=AF=E4=BA=82=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=20=E5=AD=97=E9=AB=94=E9=81=8E=E5=A4=A7/=E9=81=8E=E5=B0=8F?= =?UTF-8?q?=E8=80=8C=E5=B0=8E=E8=87=B4=20=E9=83=A8=E5=88=86=20ui=20?= =?UTF-8?q?=E5=81=8F=E7=A7=BB=E7=9A=84=20bug=20improvement:=20=E4=B8=BB?= =?UTF-8?q?=E9=A1=8C=20css=20=E4=BD=BF=E7=94=A8=E7=9A=84=20rem=20=E6=94=B9?= =?UTF-8?q?=E7=82=BA=20em=20=E6=88=96=20px=20improvement:=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E6=B2=A1=E6=9C=89=E9=A1=B6=E9=83=A8=E5=9B=BE=E4=B8=8B?= =?UTF-8?q?=EF=BC=8C=E6=96=87=E7=AB=A0=E9=A1=B5=E7=9A=84=E6=A0=87=E9=A2=98?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=20closed=20#669=20improvement:=20=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E5=84=AA=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 2 +- layout/includes/mixins/post-ui.pug | 19 ++-- layout/includes/widget/card_post_toc.pug | 1 + layout/includes/widget/index.pug | 4 +- package.json | 2 +- source/css/_global/function.styl | 14 ++- source/css/_global/index.styl | 32 ++++--- source/css/_highlight/highlight.styl | 52 ++++------- source/css/_highlight/highlight/index.styl | 12 +-- source/css/_highlight/prismjs/index.styl | 2 +- source/css/_highlight/theme.styl | 6 +- source/css/_layout/aside.styl | 74 +++++++-------- source/css/_layout/comments.styl | 8 +- source/css/_layout/footer.styl | 8 +- source/css/_layout/head.styl | 85 +++++++++--------- source/css/_layout/loading.styl | 2 +- source/css/_layout/pagination.styl | 47 ++++++---- source/css/_layout/post.styl | 79 ++++++++-------- source/css/_layout/relatedposts.styl | 4 +- source/css/_layout/reward.styl | 7 +- source/css/_layout/sidebar.styl | 12 +-- source/css/_layout/third-party.styl | 7 +- source/css/_mode/readmode.styl | 4 +- source/css/_page/404.styl | 30 +++---- source/css/_page/archives.styl | 28 +++--- source/css/_page/categories.styl | 12 +-- source/css/_page/common.styl | 21 +++-- source/css/_page/flink.styl | 3 - source/css/_page/homepage.styl | 100 +++++++-------------- source/css/_page/tags.styl | 2 +- source/css/_search/algolia.styl | 22 ++--- source/css/_search/index.styl | 16 ++-- source/css/_search/local-search.styl | 14 +-- source/css/_tags/button.styl | 18 ++-- source/css/_tags/gallery.styl | 16 ++-- source/css/_tags/hexo.styl | 4 +- source/css/_tags/hide.styl | 14 +-- source/css/_tags/note.styl | 14 +-- source/css/_tags/tabs.styl | 8 +- source/css/var.styl | 1 - source/js/main.js | 3 +- source/js/search/local-search.js | 3 +- 42 files changed, 387 insertions(+), 425 deletions(-) diff --git a/_config.yml b/_config.yml index f8ae95ffb..2e19882f2 100644 --- a/_config.yml +++ b/_config.yml @@ -171,7 +171,7 @@ toc: post: true page: false number: true - style_simple: false + style_simple: false # for post post_copyright: enable: true diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index cdf62ee5d..4a4a12364 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -1,14 +1,19 @@ mixin postUI(posts) each article , index in page.posts.data .recent-post-item - - let link = article.link || article.path - - let title = article.title || _p('no_title') - - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' - - let post_cover = article.cover - - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - + let link = article.link || article.path + let title = article.title || _p('no_title') + const position = theme.cover.position + let leftOrRight = position === 'both' + ? index%2 == 0 ? 'left' : 'right' + : position === 'left' ? 'left' : 'right' + let post_cover = article.cover + let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - if post_cover && theme.cover.index_enable .post_cover(class=leftOrRight) - a(href=url_for(link) title=title) + a(href=url_for(link) title=title) img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) .recent-post-info(class=no_cover) a.article-title(href=url_for(link) title=title)= title @@ -20,7 +25,7 @@ mixin postUI(posts) span.article-meta__separator | if (theme.post_meta.page.date_type) span.post-meta-date - if (theme.post_meta.page.date_type === 'both') + if (theme.post_meta.page.date_type === 'both') i.far.fa-calendar-alt span.article-meta-label=_p('post.created') time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug index 3874dc772..ec803353a 100644 --- a/layout/includes/widget/card_post_toc.pug +++ b/layout/includes/widget/card_post_toc.pug @@ -4,6 +4,7 @@ .item-headline i.fas.fa-stream span= _p('aside.card_toc') + span.toc-percentage if (page.encrypt == true) .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index 9d523d2f0..72f27849d 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,7 +1,9 @@ #aside-content.aside-content //- post if is_post() - if showToc && theme.toc.style_simple + - const tocStyle = page.style_simple + - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple + if showToc && tocStyleVal .sticky_layout include ./card_post_toc.pug else diff --git a/package.json b/package.json index b49ca223a..f32661135 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b5", + "version": "4.0.0-b6", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 9173ce72e..6788bb8ab 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -17,6 +17,16 @@ text-rendering: auto -webkit-font-smoothing: antialiased +// card hover +.cardHover + border-radius: 8px + background: var(--card-bg) + box-shadow: var(--card-box-shadow) + transition: all .3s + + &:hover + box-shadow: var(--card-hover-box-shadow) + maxWidth600() @media screen and (max-width: 600px) {block} @@ -123,12 +133,12 @@ if hexo-config('avatar.effect') == true @keyframes bottom-top 0% - opacity: 0 margin-top: 50px + opacity: 0 100% - opacity: 1 margin-top: 0 + opacity: 1 @keyframes titlescale 0% diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 09c966ba7..23f40b542 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -30,10 +30,6 @@ --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) -html - height: 100% - font-size: 20px - body position: relative min-height: 100% @@ -79,7 +75,7 @@ h4, h5, h6 position: relative - margin: 1rem 0 .7rem + margin: 20px 0 14px color: var(--text-highlight-color) font-weight: bold @@ -91,7 +87,7 @@ h6 hr position: relative - margin: 2rem auto + margin: 40px auto border: 2px dashed var(--hr-border) if hexo-config('hr_icon.enable') @@ -115,7 +111,7 @@ hr .table-wrap overflow-x: scroll - margin: 0 0 1rem + margin: 0 0 20px table display: table @@ -129,7 +125,7 @@ table th, td - padding: .3rem .6rem + padding: 6px 12px border: 1px solid var(--light-grey) vertical-align: middle @@ -213,8 +209,24 @@ if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-confi filter: none .img-alt - margin: -.5rem 0 .5rem + margin: -10px 0 10px color: #858585 &:hover - text-decoration: none !important \ No newline at end of file + text-decoration: none !important + +blockquote + margin: 0 0 20px + padding: 12px 15px + border-left: 3px solid $blockquote-padding-color + background-color: var(--blockquote-bg) + color: var(--blockquote-color) + + footer + cite + &:before + padding: 0 5px + content: '—' + + & > :last-child + margin-bottom: 0 !important diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index b69660e0b..4be710315 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -23,7 +23,7 @@ if $prismjsEnable $code-block overflow: auto - margin: 0 0 1rem + margin: 0 0 20px padding: 0 background: var(--hl-bg) color: var(--hl-color) @@ -33,28 +33,6 @@ $code-block counter-reset: line white-space: pre-wrap -blockquote - margin: 0 0 1rem - padding: .1rem .8rem - border-left: .2rem solid $blockquote-padding-color - background-color: var(--blockquote-bg) - color: var(--blockquote-color) - - a - word-break: break-all - - p - margin: 0 !important - padding: .5rem 0 - - footer - padding: 0 0 .5rem - - cite - &:before - padding: 0 .3em - content: '—' - #article-container pre, code @@ -62,7 +40,7 @@ blockquote font-family: $code-font-family !important code - padding: .1rem .2rem + padding: 2px 4px background: $code-background color: $code-foreground @@ -87,7 +65,7 @@ blockquote figcaption, .caption - padding: .3rem 0 .1rem .7rem + padding: 6px 0 2px 14px font-size: $code-font-size line-height: 1em @@ -104,7 +82,7 @@ blockquote display: flex align-items: center overflow: hidden - min-height: 1.2rem + min-height: 24px height: 2.15em background: var(--hltools-bg) color: var(--hltools-color) @@ -115,12 +93,12 @@ blockquote .expand position: absolute - padding: .4rem .7rem + padding: .57em .7em cursor: pointer transition: transform .3s & + .code-lang - left: 1.7rem + left: 1.6em &.closed transition: all .3s @@ -128,7 +106,7 @@ blockquote .code-lang position: absolute - left: .7rem + left: 14px text-transform: uppercase font-weight: bold font-size: 1.15em @@ -136,13 +114,13 @@ blockquote .copy-notice position: absolute - right: 1.7rem + right: 2.1em opacity: 0 transition: opacity .4s .copy-button position: absolute - right: .7rem + right: 14px cursor: pointer transition: color .2s @@ -160,7 +138,7 @@ blockquote if $highlight_theme == 'mac' || ($highlight_theme == 'mac light') figure.highlight - margin: 0 0 1.2rem + margin: 0 0 24px border-radius: 7px box-shadow: 0 5px 10px 0 $highlight-mac-border -webkit-transform: translateZ(0) @@ -168,7 +146,7 @@ blockquote .highlight-tools &:after position: absolute - left: .7rem + left: 14px width: 12px height: 12px border-radius: 50% @@ -184,13 +162,13 @@ blockquote transform: rotate(90deg) !important & ~ .copy-notice - right: 2.8rem + right: 3.3em & ~ .copy-button - right: 1.8rem + right: 2.1em .code-lang - left: 3.8rem !important + left: 75px if hexo-config('highlight_height_limit') .code-expand-btn @@ -204,7 +182,7 @@ blockquote cursor: pointer i - padding: .3rem 0 + padding: 6px 0 color: var(--hlnumber-color) animation: code-expand-key 1.2s infinite diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl index cb214c062..bdb9d96ab 100644 --- a/source/css/_highlight/highlight/index.styl +++ b/source/css/_highlight/highlight/index.styl @@ -7,8 +7,8 @@ if $highlight_theme != false if wordWrap &:before display: inline-block - padding: 0 .3rem 0 0 - min-width: 1.6rem + padding: 0 6px 0 0 + min-width: 30px color: var(--hlnumber-color) content: counter(line) counter-increment: line @@ -27,13 +27,13 @@ if $highlight_theme != false border: none .gutter pre - padding-right: .5rem - padding-left: .5rem + padding-right: 10px + padding-left: 10px background-color: var(--hlnumber-bg) color: var(--hlnumber-color) text-align: right .code pre - padding-right: .5rem - padding-left: .5rem + padding-right: 10px + padding-left: 10px width: 100% diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index b21c5bf08..f0be1d5dc 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -14,7 +14,7 @@ if $highlight_theme != false .caption margin-left: -3.8em - padding: .2rem .8rem !important + padding: 4px 16px !important a padding: 0 !important diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index c9c45c712..58fc330cf 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -11,7 +11,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac') color: alpha($highlight-foreground, .8), bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 6) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = #969896 @@ -37,7 +37,7 @@ if $highlight_theme == 'pale night' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 6) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = #676E95 @@ -63,7 +63,7 @@ if $highlight_theme == 'ocean' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-foreground, 40) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = rgba(101, 115, 126, .8) diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 3d88d3669..be55212f1 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -14,20 +14,14 @@ margin-top: 0 +maxWidth900() - margin-top: 1rem + margin-top: 20px .card-widget + @extend .cardHover position: relative overflow: hidden - margin-top: 1rem - padding: 1rem 1.2rem - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: box-shadow .3s - - &:hover - box-shadow: var(--card-hover-box-shadow) + margin-top: 20px + padding: 20px 24px if hexo-config('aside.mobile') == false +maxWidth768() @@ -41,11 +35,11 @@ font-size: 1.57em &__description - margin-top: -.3rem + margin-top: -.42em .card-info-data display: table - margin: .7rem 0 .2rem + margin: 14px 0 4px width: 100% table-layout: fixed @@ -59,18 +53,17 @@ font-size: 1em .length-num - margin-top: -.3rem + margin-top: -.42em color: var(--text-highlight-color) font-size: 1.4em .card-info-social-icons - margin: .3rem 0 -.3rem + margin: 6px 0 -6px .social-icon - margin: 0 .5rem + margin: 0 10px color: var(--font-color) font-size: 1.4em - cursor: pointer i transition: all .3s @@ -80,21 +73,21 @@ #card-info-btn display: block - margin-top: .7rem + margin-top: 14px background-color: var(--btn-bg) color: var(--btn-color) text-align: center line-height: 2.4 span - padding-left: .5rem + padding-left: 10px .item-headline - padding-bottom: .3rem + padding-bottom: 6px font-size: 1.2em span - margin-left: .3rem + margin-left: 6px .sticky_layout +minWidth900() @@ -106,7 +99,7 @@ .card-tag-cloud a display: inline-block - padding: 0 .2rem + padding: 0 4px &:hover color: $text-hover !important @@ -114,13 +107,13 @@ .aside-list & > span display: block - margin-bottom: .5rem + margin-bottom: 10px text-align: center & > .aside-list-item display: flex align-items: center - padding: .3rem 0 + padding: 6px 0 &:first-child padding-top: 0 @@ -184,13 +177,13 @@ .card-categories ul.card-category-list > .card-category-list-item a display: inline-block - padding: .15rem .5rem + padding: 3px 10px width: 100% color: var(--font-color) transition: all .4s &:hover - padding: .15rem .85rem + padding: 3px 17px background-color: var(--text-bg-hover) span @@ -208,7 +201,7 @@ .card-categories .card-category-list &.child - padding: 0 0 0 .8rem + padding: 0 0 0 16px > .parent > a @@ -222,8 +215,8 @@ i float: right - margin-right: -.35rem - padding: .35rem + margin-right: -.5em + padding: .5em transition: transform .3s transform: rotate(0) @@ -239,12 +232,12 @@ .webinfo-item display: flex align-items: center - padding: .1rem .5rem 0 + padding: 2px 10px 0 div &:first-child flex: 1 - padding-right: 1rem + padding-right: 20px // toc #card-toc @@ -261,7 +254,15 @@ opacity: 0 transform-origin: right bottom + .toc-percentage + float: right + margin-top: -9px + color: #a9a9a9 + font-style: italic + font-size: 140% + .toc-content + clear: both overflow-y: auto max-height: calc(100vh - 120px) @@ -288,11 +289,11 @@ ol margin: 0 - padding-left: .4rem + padding-left: 15px .toc-link display: block - padding-left: .3rem + padding-left: 6px border-left: 3px solid transparent color: var(--toc-link-color) transition: all .2s ease-in-out @@ -302,15 +303,6 @@ background: $theme-toc-color color: $toc-active-color - &:before - position: absolute - top: .6rem - right: 1.2rem - color: #a9a9a9 - content: attr(progress-percentage) - font-style: italic - font-size: 1.2rem - :only-child > .card-widget margin-top: 0 diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl index 04d2fa79b..838094a41 100644 --- a/source/css/_layout/comments.styl +++ b/source/css/_layout/comments.styl @@ -1,6 +1,6 @@ #post-comment .comment-head - margin-bottom: 1rem + margin-bottom: 20px .comment-headline display: inline-block @@ -13,8 +13,8 @@ if hexo-config('comments.text') float: right - margin: .1rem auto 0 - padding: .2rem .8rem + margin: 2px auto 0 + padding: 4px 16px width: max-content border-radius: 8px background: $comments-switch-bg @@ -33,7 +33,7 @@ .switch-btn position: relative display: inline-block - margin: -4px .4rem 0 + margin: -4px 8px 0 width: 42px height: 22px border-radius: 34px diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 5f96c153b..3b8a3bf6a 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -15,7 +15,7 @@ #footer-wrap position: relative - padding: 2rem 1rem + padding: 40px 20px color: var(--light-grey) text-align: center @@ -26,10 +26,10 @@ text-decoration: underline .footer-separator - margin: 0 .2rem + margin: 0 4px .icp-icon padding: 0 4px - vertical-align: text-bottom max-height: 1.4em - width auto + width: auto + vertical-align: text-bottom diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 3bb93ae2c..e487fe6bb 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -7,6 +7,13 @@ background-repeat: no-repeat transition: all .5s + &:not(.not-top-img):before + position: absolute + width: 100% + height: 100% + background-color: alpha($dark-black, .3) + content: '' + // index &.full_page height: $index_top_img_height @@ -15,14 +22,14 @@ #site-info position: absolute top: $index_site_info_top - padding: 0 .5rem + padding: 0 10px width: 100% #site-title, #site-subtitle, #scroll-down .scroll-down-effects text-align: center - text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) + text-shadow: 2px 2px 4px rgba(0, 0, 0, .15) line-height: 1.5 #site-title @@ -43,18 +50,17 @@ #site_social_icons display: none margin: 0 auto - width: 15rem + width: 300px text-align: center +maxWidth768() display: block .social-icon - margin: 0 .5rem + margin: 0 10px color: var(--light-grey) - text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) + text-shadow: 2px 2px 4px rgba(0, 0, 0, .15) font-size: 1.43em - cursor: pointer #scroll-down position: absolute @@ -70,54 +76,47 @@ // page &.not-home-page - height: 20rem + height: 400px +maxWidth768() - height: 14rem + height: 280px #page-site-info position: absolute - top: 10rem - padding: 0 .5rem + top: 200px + padding: 0 10px width: 100% +maxWidth768() - top: 7rem + top: 140px // post &.post-bg - height: 20rem + height: 400px +maxWidth768() - height: 18rem + height: 360px &:before - position: absolute - top: 0 - left: 0 - display: block - width: 100% - height: 100% background-color: alpha($dark-black, .5) - content: '' #post-info position: absolute - bottom: 5rem + bottom: 100px padding: 0 8% width: 100% text-align: center +maxWidth900() - bottom: 1.5rem + bottom: 30px text-align: left +maxWidth768() - bottom: 1.1rem - padding: 0 1.1rem + bottom: 22px + padding: 0 22px &.not-top-img - margin-bottom: .5rem + margin-bottom: 10px height: 60px background: 0 @@ -157,21 +156,17 @@ top: 70px transition: top .5s -.apple - #page-header.full_page - background-attachment: scroll !important - #page h1.page-title - margin: .4rem 0 1rem + margin: 8px 0 20px // for not top_img #post & > #post-info - margin-bottom: 1.5rem + margin-bottom: 30px .post-title - padding-bottom: .2rem + padding-bottom: 4px border-bottom: 1px solid var(--light-grey) color: var(--text-highlight-color) @@ -185,7 +180,7 @@ #post-info .post-title @extend .limit-more-line - margin-bottom: .4rem + margin-bottom: 8px color: var(--white) font-weight: normal font-size: 2.5em @@ -193,10 +188,10 @@ -webkit-line-clamp: 3 +maxWidth768() - font-size: 1.72em + font-size: 2.1em .post-edit-link - padding-left: .5rem + padding-left: 10px #post-meta color: var(--light-grey) @@ -216,14 +211,14 @@ .post-meta &-separator - margin: 0 .25rem + margin: 0 5px &-icon - margin-right: .2rem + margin-right: 4px &-label if hexo-config('post_meta.post.label') - margin-right: .2rem + margin-right: 4px else display: none @@ -264,7 +259,7 @@ #toggle-menu display: none - padding: .1rem 0 0 .3rem + padding: 2px 0 0 6px vertical-align: top &:hover @@ -277,7 +272,7 @@ color: var(--white) #site-name - text-shadow: .1rem .1rem .2rem rgba($dark-black, .15) + text-shadow: 2px 2px 4px rgba($dark-black, .15) font-weight: bold cursor: pointer @@ -287,7 +282,7 @@ .menus_item position: relative display: inline-block - padding: 0 0 0 .7rem + padding: 0 0 0 14px &:hover .menus_item_child @@ -327,7 +322,7 @@ a display: inline-block - padding: .3rem .7rem + padding: 6px 14px width: 100% color: var(--font-color) !important text-shadow: none !important @@ -350,12 +345,12 @@ #search-button display: inline - padding: 0 0 0 .7rem + padding: 0 0 0 14px .site-page position: relative - padding-bottom: .3rem - text-shadow: .05rem .05rem .1rem rgba($dark-black, .3) + padding-bottom: 6px + text-shadow: 1px 1px 2px rgba($dark-black, .3) font-size: .78em cursor: pointer diff --git a/source/css/_layout/loading.styl b/source/css/_layout/loading.styl index dc5d19137..29a08bd6f 100644 --- a/source/css/_layout/loading.styl +++ b/source/css/_layout/loading.styl @@ -43,7 +43,7 @@ if hexo-config('preloader') .loading-word position: absolute color: var(--preloader-color) - font-size: .8rem + font-size: 16px .configure-core width: 100% diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index aee8acad0..5038e572b 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -1,24 +1,12 @@ #pagination - overflow: hidden - margin-top: 1rem - width: 100% - .pagination + margin-top: 20px text-align: center .page-number - display: inline-block - margin: 0 .2rem - min-width: w = 1.2rem - height: w - text-align: center - line-height: w - cursor: pointer - &.current background: $theme-paginator-color color: var(--white) - cursor: default img.prev-cover, img.next-cover @@ -32,7 +20,7 @@ .pagination-info position: absolute top: 50% - padding: 1rem 2rem + padding: 20px 40px width: 100% transform: translate(0, -50%) @@ -75,5 +63,32 @@ transform: scale(1.1) &.pagination-post - margin-top: 2rem - background: $dark-black \ No newline at end of file + overflow: hidden + margin-top: 40px + background: $dark-black + +.layout + & > .recent-posts + .pagination + & > * + @extend .cardHover + display: inline-block + margin: 0 6px + width: w = 2.5em + height: w + line-height: w + + &:hover + background: var(--btn-hover-color) + color: var(--btn-color) + + & > div:not(.recent-posts) + .pagination + .page-number + display: inline-block + margin: 0 4px + min-width: w = 24px + height: w + text-align: center + line-height: w + cursor: pointer diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 0b341c6b3..d6fa246e9 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,16 +1,13 @@ beautify() headStyle(fontsize) - padding-left: unit(fontsize + .4, 'rem') - - code - font-size: unit(fontsize, 'rem') + padding-left: unit(fontsize + .4, 'px') &:before - margin-left: unit((-(fontsize + .2)), 'rem') - font-size: unit(fontsize, 'rem') + margin-left: unit((-(fontsize + 4)), 'px') + font-size: unit(fontsize, 'px') &:hover - padding-left: unit(fontsize + .6, 'rem') + padding-left: unit(fontsize + 12, 'px') h1, h2, @@ -22,7 +19,7 @@ beautify() &:before position: absolute - top: calc(50% - .35rem) + top: calc(50% - 7px) color: $title-prefix-icon-color content: $title-prefix-icon line-height: 1 @@ -34,47 +31,47 @@ beautify() color: $light-blue h1 - headStyle(1) + headStyle(20) h2 - headStyle(.9) + headStyle(18) h3 - headStyle(.8) + headStyle(16) h4 - headStyle(.7) + headStyle(14) h5 - headStyle(.6) + headStyle(12) h6 - headStyle(.6) + headStyle(12) ol, ul - margin-top: .4rem - padding: 0 0 0 .8rem + margin-top: 8px + padding: 0 0 0 16px list-style: none counter-reset: li +maxWidth768() - padding: 0 0 0 .4rem + padding: 0 0 0 8px p - margin: 0 0 .5rem + margin: 0 0 10px ol, ul - padding-left: .6rem + padding-left: 12px +maxWidth768() - padding-left: .2rem + padding-left: 4px li &:not(.tab) position: relative - margin: .2rem 0 + margin: 4px 0 &:hover &:before @@ -127,19 +124,19 @@ beautify() no-beautify() ol, ul - margin-top: .4rem + margin-top: 8px p - margin: 0 0 .5rem + margin: 0 0 10px ol, ul - padding-left: .5rem + padding-left: 10px li position: relative - margin: .3rem 0 - padding-left: .3rem + margin: 6px 0 + padding-left: 6px #article-container word-wrap: break-word @@ -153,14 +150,14 @@ no-beautify() img display: block - margin: 0 auto .8rem + margin: 0 auto 20px max-width: 100% p - margin: 0 0 .8rem + margin: 0 0 16px iframe - margin: 0 0 1rem + margin: 0 0 20px kbd margin: 0 3px @@ -197,11 +194,11 @@ no-beautify() &__tags display: inline-block - margin: .4rem .4rem .4rem 0 - padding: 0 .6rem + margin: 8px 8px 8px 0 + padding: 0 12px width: fit-content border: 1px solid $light-blue - border-radius: .6rem + border-radius: 12px color: $light-blue font-size: .85em transition: all .2s ease-in-out @@ -213,7 +210,7 @@ no-beautify() .post_share display: inline-block float: right - margin: .4rem 0 + margin: 8px 0 width: fit-content .social-share @@ -228,19 +225,19 @@ no-beautify() .post-copyright position: relative - margin: 2rem 0 .5rem - padding: .5rem .8rem + margin: 40px 0 10px + padding: 10px 16px border: 1px solid var(--light-grey) transition: box-shadow .3s ease-in-out &:before @extend .fontawesomeIcon position: absolute - top: .1rem - right: .6rem + top: 2px + right: 12px color: $theme-color content: '\f1f9' - font-size: 1rem + font-size: 1.3em &:hover box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) @@ -251,7 +248,7 @@ no-beautify() font-weight: bold &-info - padding-left: .3rem + padding-left: 6px a text-decoration: underline @@ -262,7 +259,7 @@ no-beautify() .post-outdate-notice position: relative - margin: 0 0 1rem + margin: 0 0 20px padding: .5em 1.2em border-radius: 3px background-color: $noticeOutdate-bg @@ -282,4 +279,4 @@ no-beautify() transform: translateY(-50%) .ads-wrap - margin: 2rem 0 + margin: 40px 0 diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 5d69ec51a..dba91543e 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -1,5 +1,5 @@ .relatedPosts - margin-top: 2rem + margin-top: 40px & > .headline margin-bottom: 5px @@ -40,7 +40,7 @@ .content position: absolute top: 50% - padding: 0 1rem + padding: 0 20px width: 100% transform: translate(0, -50%) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index ba919553c..b69f71f31 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -1,12 +1,12 @@ .post-reward position: relative - margin-top: 4rem + margin-top: 80px width: 100% text-align: center .reward-button display: inline-block - padding: .2rem 1.2rem + padding: 4px 24px background: var(--btn-bg) color: var(--btn-color) cursor: pointer @@ -28,7 +28,7 @@ .reward-all display: inline-block margin: 0 - padding: 1rem .5rem + padding: 20px 10px border-radius: 4px background: var(--reward-pop) @@ -64,6 +64,5 @@ height: 130px .post-qr-code-desc - padding-top: .4rem width: 130px color: $reward-pop-up-color diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 783ca205b..d557980bf 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -23,11 +23,11 @@ transform: translate3d(-100%, 0, 0) & > .avatar-img - margin: 1rem auto + margin: 20px auto .site-data display: table - padding: 0 .5rem + padding: 0 10px width: 100% table-layout: fixed @@ -45,16 +45,16 @@ color: var(--font-color) hr - margin: 1rem auto + margin: 20px auto .menus_items - padding: 0 .5rem 2rem + padding: 0 10px 40px .site-page @extend .limit-one-line position: relative display: block - padding: .3rem 1.5rem .3rem 1.1rem + padding: 6px 30px 6px 22px color: var(--font-color) font-size: 1.15em @@ -69,7 +69,7 @@ & > i:last-child position: absolute top: .78em - right: .9rem + right: 18px transition: transform .3s &.hide diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 0d3fc08cc..accc41020 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -24,7 +24,6 @@ --waline-font-size: 1.1em --waline-theme-color: $button-bg --waline-active-color: $button-hover-color - --waline-avatar-size: 2.75rem .vuser transition: all .5s @@ -64,7 +63,7 @@ if hexo-config('waline.bg') .mermaid overflow: auto - margin: 0 0 1rem + margin: 0 0 20px background: $white text-align: center opacity: 0 @@ -80,7 +79,7 @@ if hexo-config('waline.bg') #gitalk-container .gt-meta margin: 0 0 .8em - padding: .3rem 0 .8em + padding: 6px 0 16px .katex-wrap overflow: auto @@ -100,7 +99,7 @@ mjx-container[display], #article-container .aplayer - margin: 0 0 1rem + margin: 0 0 20px if hexo-config('beautify.enable') ol, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index aa1620720..19c790c58 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -131,7 +131,7 @@ if hexo-config('readmode') ul >li &:before - border: .15rem solid var(--gray) !important + border-color: var(--gray) !important .tabs border: 2px solid var(--tab-border-color) @@ -160,7 +160,7 @@ if hexo-config('readmode') color: var(--font-color) blockquote - border-left: .2rem solid var(--gray) + border-color: var(--gray) background-color: var(--readmode-light-color) kbd diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl index 20e6fedfb..60244be4b 100644 --- a/source/css/_page/404.styl +++ b/source/css/_page/404.styl @@ -6,29 +6,23 @@ if hexo-config('error_404.enable') right: 0 left: 0 margin: 0 auto - padding: 0 1rem + padding: 0 20px max-width: 1000px transform: translate(0, -50%) .error-content + @extend .cardHover display: flex flex-direction: row justify-content: center align-items: center - margin: 0 1rem - height: 18rem - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: all .3s - - &:hover - box-shadow: var(--card-hover-box-shadow) + margin: 0 20px + height: 360px +maxWidth768() flex-direction: column margin: 0 - height: 25rem + height: 500px .error-img flex: 1 @@ -47,7 +41,7 @@ if hexo-config('error_404.enable') .error-info flex: 1 - padding: .5rem + padding: 10px text-align: center font-size: 14px @@ -59,28 +53,28 @@ if hexo-config('error_404.enable') width: 100% .error_title - margin-top: -4rem + margin-top: -80px font-size: 9em +maxWidth768() - margin-top: -3rem + margin-top: -60px .error_subtitle @extend .limit-more-line - margin-top: -3.5rem + margin-top: -70px word-break: break-word font-size: 1.6em -webkit-line-clamp: 2 a display: inline-block - margin-top: .5rem - padding: .3rem 1.5rem + margin-top: 10px + padding: 6px 30px background: var(--btn-bg) color: var(--btn-color) i - padding-right: .3rem + padding-right: 6px & + #rightside display: none \ No newline at end of file diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl index ede2dcf64..f2bc8c518 100644 --- a/source/css/_page/archives.styl +++ b/source/css/_page/archives.styl @@ -1,13 +1,13 @@ .article-sort - margin-left: .5rem - padding-left: 1rem + margin-left: 10px + padding-left: 20px border-left: 2px solid lighten($light-blue, 20) &-title position: relative - margin-left: .5rem - padding-bottom: 1rem - padding-left: 1rem + margin-left: 10px + padding-bottom: 20px + padding-left: 20px font-size: 1.72em &:hover @@ -16,10 +16,10 @@ &:before position: absolute - top: calc(((100% - 1.8rem) / 2)) - left: -.45rem + top: calc(((100% - 36px) / 2)) + left: -9px z-index: 1 - width: w = .5rem + width: w = 10px height: h = w border: .5 * w solid $light-blue border-radius: w @@ -33,7 +33,7 @@ bottom: 0 left: 0 z-index: 0 - width: .1rem + width: 2px height: 1.5em background: lighten($light-blue, 20) content: '' @@ -42,7 +42,7 @@ position: relative display: flex align-items: center - margin: 0 0 1rem .5rem + margin: 0 0 20px 10px transition: all .2s ease-in-out &:hover @@ -50,9 +50,9 @@ border-color: $pseudo-hover &:before - $w = .3rem + $w = 6px position: absolute - left: calc(-1rem - 17px) + left: calc(-20px - 17px) width: w = $w height: h = w border: .5 * w solid $light-blue @@ -82,7 +82,7 @@ font-size: 95% time - padding-left: .3rem + padding-left: 6px cursor: default &-title @@ -112,4 +112,4 @@ &-info flex: 1 - padding: 0 .8rem + padding: 0 16px diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index 4e2d9cbe6..38d92cfb0 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -1,6 +1,6 @@ #page .category-lists - padding: 1rem 0 1.5rem + padding: 20px 0 30px +maxWidth768() padding: 0 @@ -19,7 +19,7 @@ color: $text-hover .category-list-count - margin-left: .4rem + margin-left: 8px color: $theme-meta-color &:before @@ -29,17 +29,17 @@ content: ')' ul - margin-top: .4rem - padding: 0 0 0 1rem + margin-top: 8px + padding: 0 0 0 20px list-style: none counter-reset: li ul - padding-left: .2rem + padding-left: 4px li position: relative - margin: .3rem 0 + margin: 6px 0 padding: .12em .4em .12em 1.4em &:before diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index c69521646..bf984822e 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -7,7 +7,7 @@ display: flex flex: 1 auto margin: 0 auto - padding: 2rem 15px + padding: 40px 15px max-width: 1200px width: 100% @@ -15,23 +15,18 @@ flex-direction: column +maxWidth768() - padding: 1rem 5px + padding: 20px 5px +minWidth2000() max-width: 1500px & > div:first-child:not(.recent-posts) + @extend .cardHover align-self: flex-start padding: 50px 40px - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - - &:hover - box-shadow: var(--card-hover-box-shadow) +maxWidth768() - padding: 1.8rem .7rem !important + padding: 36px 14px & > div:first-child width: 75% @@ -53,3 +48,11 @@ & > div width: 100% !important + +// for apple device +.apple + #page-header.full_page + background-attachment: scroll !important + + .recent-post-item + transform: translateZ(0) diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl index 1d8dbc08b..651d4b70a 100644 --- a/source/css/_page/flink.styl +++ b/source/css/_page/flink.styl @@ -1,8 +1,5 @@ #article-container .flink - .flink-desc - margin: .2rem 0 .5rem - .flink-list overflow: auto padding: 10px 10px 0 diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 7d10e3e89..288e02bf7 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -1,48 +1,23 @@ #recent-posts & > .recent-post-item:not(:first-child) - margin-top: 1rem + margin-top: 20px & > .recent-post-item + @extend .cardHover display: flex flex-direction: row align-items: center + overflow: hidden height: 20em - border-radius: 12px 8px 8px 12px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: all .3s +maxWidth768() - border-radius: 12px 12px 8px 8px + flex-direction: column + height: auto &:hover - box-shadow: var(--card-hover-box-shadow) - img.post_bg transform: scale(1.1) - if hexo-config('cover.position') == 'both' - .left_radius - border-radius: 8px 0 0 8px - - .right_radius - order: 2 - border-radius: 0 8px 8px 0 - else if hexo-config('cover.position') == 'left' - .left_radius - border-radius: 8px 0 0 8px - - .right_radius - border-radius: 8px 0 0 8px - else if hexo-config('cover.position') == 'right' - .left_radius - order: 2 - border-radius: 0 8px 8px 0 - - .right_radius - order: 2 - border-radius: 0 8px 8px 0 - &.ads-wrap display: block !important height: auto !important @@ -51,7 +26,10 @@ overflow: hidden width: 45% height: 100% - -webkit-mask-image: -webkit-radial-gradient(white, black) + + +maxWidth768() + width: 100% + height: 230px img.post_bg width: 100% @@ -59,31 +37,42 @@ transition: all .6s object-fit: cover - &:hover - transform: scale(1.1) + &.right + order: 1 + + +maxWidth768() + order: 0 & >.recent-post-info - display: inline-block - overflow: hidden padding: 0 40px width: 55% + +maxWidth768() + padding: 20px 20px 30px + width: 100% + &.no-cover width: 100% + +maxWidth768() + padding: 30px 20px + & > .article-title @extend .limit-more-line - margin-bottom: .3rem color: var(--text-highlight-color) font-size: 1.72em line-height: 1.4 transition: all .2s ease-in-out -webkit-line-clamp: 2 + +maxWidth768() + font-size: 1.43em + &:hover color: $text-hover & > .article-meta-wrap + margin: 6px 0 color: $theme-meta-color font-size: 90% @@ -94,22 +83,22 @@ color: $sticky-color i - margin: 0 .2rem 0 0 + margin: 0 4px 0 0 .article-meta-label if hexo-config('post_meta.page.label') - padding-right: .2rem + padding-right: 4px else display: none .article-meta__separator - margin: 0 .3rem + margin: 0 6px .article-meta__link - margin: 0 .2rem + margin: 0 4px .fa-angle-right - margin: 0 .2rem + margin: 0 4px if hexo-config('post_meta.page.date_format') == 'relative' time @@ -124,31 +113,4 @@ & > .content @extend .limit-more-line - margin-top: .3rem - -webkit-line-clamp: 3 - -+maxWidth768() - #recent-posts - .recent-post-item - flex-direction: column - height: auto !important - - .post_cover - order: 1 !important - width: 100% - height: 230px - border-radius: 8px 8px 0 0 - - .recent-post-info - order: 2 !important - padding: 1rem 1rem 1.5rem - width: 100% - - &.no-cover - padding: 1.5rem 1rem - - .article-title - font-size: 1.43em - - .content - height: auto + -webkit-line-clamp: 3 \ No newline at end of file diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl index ff9ad43c2..ee3e9320e 100644 --- a/source/css/_page/tags.styl +++ b/source/css/_page/tags.styl @@ -2,7 +2,7 @@ &-list a display: inline-block - padding: 0 .4rem + padding: 0 8px transition: all .3s &:hover diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index be72c4a31..702f8dce1 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -6,16 +6,16 @@ width: 100% input - padding: .25rem .7rem + padding: 5px 14px outline: none border: 2px solid $search-color - border-radius: 2rem + border-radius: 40px background: var(--search-bg) color: var(--search-input-color) .ais-hits--item.algolia-hit-item position: relative - padding-left: 1.2rem + padding-left: 24px &:hover &:before @@ -28,7 +28,7 @@ left: 0 width: w = $w height: h = w - border: .15rem solid $search-color + border: 3px solid $search-color border-radius: w background: transparent content: '' @@ -48,20 +48,20 @@ font-weight: bold .ais-pagination.pagination - margin: .8rem 0 0 + margin: 16px 0 0 padding: 0 text-align: center .ais-pagination--item - margin: 0 .2rem + margin: 0 4px padding: 0 a display: inline-block - min-width: 1.2rem - height: 1.2rem + min-width: 24px + height: 24px text-align: center - line-height: 1.2rem + line-height: 24px .ais-pagination--item.current a @@ -71,5 +71,5 @@ .algolia-logo padding-top: 2px - width: 4rem - height: 1.5rem \ No newline at end of file + width: 80px + height: 30px \ No newline at end of file diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 948f41e7f..9a5886284 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -1,12 +1,12 @@ .search-dialog position: fixed - top: 5rem + top: 100px left: 50% z-index: 1001 display: none - margin-left: -15rem - padding: 1rem - width: 30rem + margin-left: -300px + padding: 20px + width: 600px border-radius: 8px background: var(--search-bg) animation: titlescale .5s @@ -20,12 +20,12 @@ border-radius: 0 hr - margin: 1rem auto + margin: 20px auto span.search-close-button position: absolute - top: .8rem - right: 1rem + top: 16px + right: 20px color: $grey font-size: 1.4em line-height: 1 @@ -36,7 +36,7 @@ color: $search-color &__title - padding: 0 0 .7rem + padding: 0 0 14px color: $search-color font-size: 1.4em line-height: 1 diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index e24abd17d..aa0747723 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -6,18 +6,18 @@ width: 100% input - padding: .25rem .7rem + padding: 5px 14px width: 100% outline: none border: 2px solid $search-color - border-radius: 2rem + border-radius: 40px background: var(--search-bg) color: var(--search-input-color) -webkit-appearance: none .local-search__hit-item position: relative - padding-left: 1.2rem + padding-left: 24px line-height: 1.7 &:hover @@ -31,7 +31,7 @@ left: 0 width: w = $w height: h = w - border: .15rem solid $search-color + border: 3px solid $search-color border-radius: w background: transparent content: '' @@ -48,7 +48,7 @@ color: $search-color .search-result - margin: 0 0 .4rem + margin: 0 0 8px word-break: break-all .search-keyword @@ -57,8 +57,8 @@ .search-result-list overflow-y: auto - max-height: 10.5rem + max-height: 210px +maxWidth768() - padding-bottom: 2rem + padding-bottom: 40px max-height: 75vh !important diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index 7dcf0a71f..2547ccf72 100644 --- a/source/css/_tags/button.styl +++ b/source/css/_tags/button.styl @@ -1,36 +1,36 @@ #article-container .btn-center - margin: 0 0 1rem + margin: 0 0 20px text-align: center .btn-beautify display: inline-block - margin: 0 .2rem .3rem - padding: 0 1rem + margin: 0 4px 6px + padding: 0 15px background-color: $btn-default-color color: $btn-color line-height: 2 i + span - margin-left: .3rem + margin-left: 6px &:not(.block) + .btn-beautify:not(.block) - margin: 0 .2rem 1rem + margin: 0 4px 20px &.block display: block - margin: 0 0 1rem + margin: 0 0 20px width: fit-content width: -moz-fit-content &.center - margin: 0 auto 1rem + margin: 0 auto 20px &.right - margin: 0 0 1rem auto + margin: 0 0 20px auto &.larger - padding: .3rem 1.3rem + padding: 6px 15px &:hover text-decoration: none diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index 743a645b1..b72606214 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -2,15 +2,15 @@ figure.gallery-group position: relative float: left overflow: hidden - margin: .3rem .2rem - width: calc(50% - .4rem) + margin: 6px 4px + width: calc(50% - 8px) height: 250px border-radius: 8px background: $dark-black -webkit-transform: translate3d(0, 0, 0) +maxWidth600() - width: calc(100% - .4rem) + width: calc(100% - 8px) &:hover img @@ -40,7 +40,7 @@ figure.gallery-group position: absolute top: 0 left: 0 - padding: 1.5rem + padding: 30px width: 100% height: 100% color: $gallery-color @@ -59,7 +59,7 @@ figure.gallery-group p @extend .limit-more-line margin: 0 - padding: .4rem 0 0 + padding: 8px 0 0 letter-spacing: 1px font-size: 1.1em line-height: 1.5 @@ -72,7 +72,7 @@ figure.gallery-group @extend .limit-more-line position: relative margin: 0 - padding: .4rem 0 + padding: 8px 0 font-weight: bold font-size: 1.65em line-height: 1.5 @@ -91,10 +91,10 @@ figure.gallery-group .gallery-group-main overflow: auto - padding: 0 0 .8rem + padding: 0 0 16px .justified-gallery - margin: 0 0 .8rem + margin: 0 0 16px img opacity: 0 diff --git a/source/css/_tags/hexo.styl b/source/css/_tags/hexo.styl index 57e87b923..08cdee78a 100644 --- a/source/css/_tags/hexo.styl +++ b/source/css/_tags/hexo.styl @@ -11,13 +11,13 @@ blockquote &.right float: right - margin: 1em 0 0 .5rem + margin: 1em 0 0 .5em // hexo tag video .video-container position: relative overflow: hidden - margin-bottom: .8rem + margin-bottom: 16px padding-top: 56.25% height: 0 diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index 95534a555..d9785b408 100644 --- a/source/css/_tags/hide.styl +++ b/source/css/_tags/hide.styl @@ -3,7 +3,7 @@ .hide-block & > .hide-button display: inline-block - padding: .3rem 1rem + padding: 6px 20px background: $tag-hide-bg color: var(--white) @@ -21,20 +21,20 @@ .hide-inline & > .hide-button - margin: 0 .3rem + margin: 0 6px & > .hide-content - margin: 0 .3rem + margin: 0 6px .hide-block - margin: 0 0 .8rem + margin: 0 0 16px .hide-toggle - margin-bottom: 1rem + margin-bottom: 20px border: 1px solid $tag-hide-toggle-bg & > .hide-button - padding: .3rem .5rem + padding: 6px 10px background: $tag-hide-toggle-bg color: #1F2D3D cursor: pointer @@ -52,4 +52,4 @@ & > .hide-content display: none - margin: 1.5rem 1.2rem + margin: 30px 24px diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl index cb5d89931..e128e6510 100644 --- a/source/css/_tags/note.styl +++ b/source/css/_tags/note.styl @@ -1,19 +1,19 @@ .note $note-icons = hexo-config('note.icons') position: relative - margin: 0 0 1rem + margin: 0 0 20px padding: 15px if hexo-config('note.border_radius') is a 'unit' border-radius: unit(hexo-config('note.border_radius'), px) &.icon - padding-left: 2.25rem + padding-left: 3em & > .note-icon position: absolute - top: calc(50% - .4rem) - left: .7rem + top: calc(50% - .5em) + left: .8em font-size: larger for $type in $tagsP-types @@ -75,12 +75,12 @@ if $note-icons &:not(.no-icon) - padding-left: 2.25rem + padding-left: 3em &::before position: absolute - top: calc(50% - .8rem) - left: .7rem + top: calc(50% - .95em) + left: .8em font-size: larger @extend .fontawesomeIcon diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl index 785991dc2..90ede9c97 100644 --- a/source/css/_tags/tabs.styl +++ b/source/css/_tags/tabs.styl @@ -2,7 +2,7 @@ #article-container .tabs position: relative - margin: 0 0 1rem + margin: 0 0 20px border-right: 1px solid var(--tab-border-color) border-bottom: 1px solid var(--tab-border-color) border-left: 1px solid var(--tab-border-color) @@ -24,7 +24,7 @@ button display: block - padding: .5rem 1rem + padding: 8px 18px width: 100% border-top: 2px solid var(--tab-border-color) background: var(--tab-botton-bg) @@ -51,10 +51,10 @@ .tab-item-content position: relative display: none - padding: 1.8rem 1.2rem + padding: 36px 24px +maxWidth768() - padding: 1.2rem .7rem + padding: 24px 14px &.active display: block diff --git a/source/css/var.styl b/source/css/var.styl index 87e1503d5..d36ab41bf 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -30,7 +30,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size) $font-color = #1F2D3D -$rem = 20px $text-line-height = 2 $web-bg = hexo-config('background') && unquote(hexo-config('background')) $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh diff --git a/source/js/main.js b/source/js/main.js index be826602d..e6e83afcd 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -354,6 +354,7 @@ document.addEventListener('DOMContentLoaded', function () { const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] const $tocLink = $cardToc.querySelectorAll('.toc-link') const $article = document.getElementById('article-container') + const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage') // main of scroll window.tocScrollFn = function () { @@ -373,7 +374,7 @@ document.addEventListener('DOMContentLoaded', function () { const scrollPercent = (currentTop - headerHeight) / (contentMath) const scrollPercentRounded = Math.round(scrollPercent * 100) const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded - $cardToc.setAttribute('progress-percentage', percentage) + $tocPercentage.textContent = percentage } // anchor diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 1abc7cfa1..5b134457b 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -47,9 +47,10 @@ window.addEventListener('load', () => { .then(str => new window.DOMParser().parseFromString(str, 'text/xml')) .then(data => { const datas = [...data.querySelectorAll('entry')].map(function (item) { + const content = item.querySelector('content') return { title: item.querySelector('title').textContent, - content: item.querySelector('content').textContent, + content: content ? content.textContent : '', url: item.querySelector('url').textContent } }) From 7e729cff79fb87d12d8fbc65af10bf236265d5c2 Mon Sep 17 00:00:00 2001 From: Jerry Date: Mon, 27 Sep 2021 00:12:13 +0800 Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A8=99?= =?UTF-8?q?=E7=B1=A4=E5=A4=96=E6=8E=9B=20timeline=20closed=20#644=20fix:?= =?UTF-8?q?=20=E8=87=AA=E5=BB=BA=E9=A0=81=E9=9D=A2=E5=9C=96=E7=89=87?= =?UTF-8?q?=E6=B2=92=E6=9C=89=20blur=20=E6=95=88=E6=9E=9C=20improvement:?= =?UTF-8?q?=20=E5=84=AA=E5=8C=96=20404=20=E9=A0=81=E9=9D=A2=20UI=20improve?= =?UTF-8?q?ment:=20lazyload=20=E9=BB=98=E8=AA=8D=E4=BD=94=E4=BD=8D?= =?UTF-8?q?=E5=9C=96=E6=94=B9=E7=82=BA=E9=80=8F=E6=98=8E=E5=9C=96=E7=89=87?= =?UTF-8?q?=20improvement:=20=E5=84=AA=E5=8C=96=20lazyload=20blur=20?= =?UTF-8?q?=E5=87=BA=E7=8F=BE=E7=89=B9=E6=95=88=20improvement:=20=E5=84=AA?= =?UTF-8?q?=E5=8C=96=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- languages/default.yml | 4 +- languages/en.yml | 4 +- languages/zh-CN.yml | 4 +- languages/zh-TW.yml | 4 +- layout/includes/404.pug | 15 +++---- layout/includes/head.pug | 2 +- package.json | 2 +- scripts/filters/post_lazyload.js | 2 +- scripts/tag/timeline.js | 40 +++++++++++++++++++ source/css/_global/function.styl | 23 +++++++++++ source/css/_global/index.styl | 5 ++- source/css/_layout/aside.styl | 11 ++---- source/css/_layout/footer.styl | 2 +- source/css/_layout/pagination.styl | 16 +------- source/css/_layout/post.styl | 3 +- source/css/_layout/relatedposts.styl | 13 +------ source/css/_mode/darkmode.styl | 1 + source/css/_mode/readmode.styl | 3 ++ source/css/_page/404.styl | 53 ++++++++++--------------- source/css/_page/archives.styl | 14 ++----- source/css/_page/categories.styl | 2 +- source/css/_page/flink.styl | 3 +- source/css/_page/homepage.styl | 5 +-- source/css/_search/algolia.styl | 2 +- source/css/_search/local-search.styl | 2 +- source/css/_tags/gallery.styl | 2 +- source/css/_tags/timeline.styl | 58 ++++++++++++++++++++++++++++ source/css/var.styl | 6 ++- 28 files changed, 186 insertions(+), 115 deletions(-) create mode 100644 scripts/tag/timeline.js create mode 100644 source/css/_tags/timeline.styl diff --git a/languages/default.yml b/languages/default.yml index 3e0cd285e..09f14c17f 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -118,6 +118,4 @@ Snackbar: loading: Loading... -error404: - error_title: Page not found - back_button: Go back home +error404: Page not found diff --git a/languages/en.yml b/languages/en.yml index 40aabfb15..2465afa22 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -118,6 +118,4 @@ Snackbar: loading: Loading... -error404: - error_title: Page not found - back_button: Go back home +error404: Page not found diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index a48bf3e13..3270a21f7 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -119,6 +119,4 @@ Snackbar: loading: 加载中... -error404: - error_title: 页面没有找到 - back_button: 回到主页 +error404: 页面没有找到 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 23563317f..4217284c1 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -119,6 +119,4 @@ Snackbar: loading: 載入中... -error404: - error_title: 頁面沒有找到 - back_button: 回到主頁 +error404: 頁面沒有找到 diff --git a/layout/includes/404.pug b/layout/includes/404.pug index 5d370c005..4a022c85e 100644 --- a/layout/includes/404.pug +++ b/layout/includes/404.pug @@ -1,17 +1,12 @@ -- var top_img = theme.error_404.background || theme.default_top_img -- var bg_img = `background-image: url('${url_for(top_img)}')` +- var top_img_404 = theme.error_404.background || theme.default_top_img #body-wrap.error404 - div(style='display: none') - include ./header/index.pug + include ./header/index.pug #error-wrap .error-content - .error-img(style=bg_img) + .error-img + img(src=url_for(top_img_404) alt='Page not found') .error-info h1.error_title= '404' - .error_subtitle= theme.error_404.subtitle - a.button--animated(href=config.root) - i.fas.fa-rocket - = _p('error404.back_button') - + .error_subtitle= theme.error_404.subtitle || _p('error404') diff --git a/layout/includes/head.pug b/layout/includes/head.pug index cefb64457..6af325a7a 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -4,7 +4,7 @@ - else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category - else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year - else if (is_year()) pageTitle += ': ' + page.year -- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title') +- else if (is_current('/404.html', [strict])) pageTitle = _p('error404') - else pageTitle = page.title || config.title || '' - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : '' diff --git a/package.json b/package.json index f32661135..4fb23c4bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b6", + "version": "4.0.0-b7", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js index 0b21de977..c4267d1cc 100644 --- a/scripts/filters/post_lazyload.js +++ b/scripts/filters/post_lazyload.js @@ -9,7 +9,7 @@ const urlFor = require('hexo-util').url_for.bind(hexo) function lazyload (htmlContent) { - const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' + const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' return htmlContent.replace(/(\n([\w\W\s\S]*?)/g + + let result = '' + if (args.length) { + args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' }) + result += `

${args}
` + } + + const matches = [] + let match + + while ((match = tlBlock.exec(content)) !== null) { + matches.push(match[1]) + matches.push(match[2]) + } + + console.log(matches) + + for (let i = 0; i < matches.length; i += 2) { + const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' }) + const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' }) + + const tlTitleHtml = `
${tlChildTitle}
` + const tlContentHtml = `
${tlChildContent}
` + + result += `
${tlTitleHtml + tlContentHtml}
` + } + + return `
${result}
` +} + +hexo.extend.tag.register('timeline', timeLineFn, { ends: true }) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 6788bb8ab..003d9a7bc 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -27,6 +27,29 @@ &:hover box-shadow: var(--card-hover-box-shadow) +.imgHover + width: 100% + height: 100% + transition: filter 375ms ease-in .2s, transform .6s + object-fit: cover + + &:hover + transform: scale(1.1) + +.postImgHover + &:hover + img + opacity: .8 + transform: scale(1.1) + + img + position: absolute + width: 100% + height: 100% + opacity: .4 + transition: all .6s, filter 375ms ease-in .2s + object-fit: cover + maxWidth600() @media screen and (max-width: 600px) {block} diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 23f40b542..a14cad004 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -29,6 +29,9 @@ --toc-link-color: $toc-link-color --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) + --timeline-bg: $timeline-content-bg + --timeline-border-color: $timeline-border-color + --pseudo-hover: $pseudo-hover body position: relative @@ -203,7 +206,7 @@ img if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder') img &[data-lazy-src]:not(.loaded) - filter: blur(10px) brightness(1) + filter: blur(8px) brightness(1) &[data-lazy-src].error filter: none diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index be55212f1..d59c24fda 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -130,13 +130,7 @@ height: w & > img - width: 100% - height: 100% - transition: all .6s - object-fit: cover - - &:hover - transform: scale(1.1) + @extend .imgHover .content flex: 1 @@ -253,6 +247,7 @@ width: $toc-mobile-width opacity: 0 transform-origin: right bottom + transition: none .toc-percentage float: right @@ -323,7 +318,7 @@ img height: 100% - transition: all .5s + transition: filter 375ms ease-in 0.2s, transform .3s object-fit: cover &:hover diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 3b8a3bf6a..3fb1d3950 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -1,7 +1,7 @@ #footer position: relative background: $light-blue - background-attachment: local + background-attachment: scroll background-position: bottom background-size: cover diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 5038e572b..601e7bcbd 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -8,15 +8,6 @@ background: $theme-paginator-color color: var(--white) - img.prev-cover, - img.next-cover - position: absolute - width: 100% - height: 100% - opacity: .4 - transition: all .6s - object-fit: cover - .pagination-info position: absolute top: 50% @@ -45,6 +36,7 @@ .prev-post, .next-post + @extend .postImgHover width: 50% +maxWidth768() @@ -56,12 +48,6 @@ overflow: hidden height: 150px - &:hover - img.prev-cover, - img.next-cover - opacity: .8 - transform: scale(1.1) - &.pagination-post overflow: hidden margin-top: 40px diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index d6fa246e9..482cbc2b2 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -108,7 +108,7 @@ beautify() &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .42em @@ -152,6 +152,7 @@ no-beautify() display: block margin: 0 auto 20px max-width: 100% + transition: filter 375ms ease-in 0.2s p margin: 0 0 16px diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index dba91543e..e0642023a 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -16,11 +16,7 @@ height: 200px background: $dark-black vertical-align: bottom - - &:hover - .cover - opacity: .8 - transform: scale(1.1) + @extend .postImgHover +maxWidth768() margin: 2px @@ -30,13 +26,6 @@ +maxWidth600() width: calc(100% - 4px) - .cover - width: 100% - height: 100% - opacity: .4 - transition: all .6s - object-fit: cover - .content position: absolute top: 50% diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index d287bfcb4..14e3b7805 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -35,6 +35,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --hlnumber-color: alpha(#FFFFFF, .4) --hlscrollbar-bg: lighten(#121212, 5) --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) + --timeline-bg: lighten(#121212, 5) #web_bg:before, #footer:before, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 19c790c58..8d2b4f753 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -11,6 +11,9 @@ if hexo-config('readmode') --exit-btn-bg: #C0C0C0 --exit-btn-color: #fff --exit-btn-hover: darken(#C0C0C0, 20) + --timeline-bg: none + --timeline-border-color: none + --pseudo-hover: none [data-theme='dark'] .read-mode diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl index 60244be4b..ea8e05644 100644 --- a/source/css/_page/404.styl +++ b/source/css/_page/404.styl @@ -6,75 +6,64 @@ if hexo-config('error_404.enable') right: 0 left: 0 margin: 0 auto - padding: 0 20px + padding: 60px 20px 0 max-width: 1000px transform: translate(0, -50%) .error-content @extend .cardHover - display: flex - flex-direction: row - justify-content: center - align-items: center + overflow: hidden margin: 0 20px height: 360px +maxWidth768() - flex-direction: column margin: 0 height: 500px .error-img - flex: 1 + display: inline-block + overflow: hidden + width: 50% height: 100% - border-top-left-radius: 8px - border-bottom-left-radius: 8px - background-color: $theme-color - background-position: center - background-size: cover +maxWidth768() - flex: 1 width: 100% - border-top-right-radius: 8px - border-bottom-left-radius: 0 + height: 45% + + img + @extend .imgHover + background-color: $theme-color .error-info - flex: 1 - padding: 10px + display: inline-flex + flex-direction: column + justify-content: center + align-content: center + width: 50% + height: 100% + vertical-align: top text-align: center - font-size: 14px if $site-name-font font-family: $site-name-font +maxWidth768() - flex: 1.1 width: 100% + height: 55% .error_title - margin-top: -80px + margin-top: -.6em font-size: 9em +maxWidth768() - margin-top: -60px + font-size: 8em .error_subtitle @extend .limit-more-line - margin-top: -70px + margin-top: -3em word-break: break-word font-size: 1.6em -webkit-line-clamp: 2 - a - display: inline-block - margin-top: 10px - padding: 6px 30px - background: var(--btn-bg) - color: var(--btn-color) - - i - padding-right: 6px - & + #rightside display: none \ No newline at end of file diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl index f2bc8c518..4575fbb95 100644 --- a/source/css/_page/archives.styl +++ b/source/css/_page/archives.styl @@ -12,7 +12,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before position: absolute @@ -47,7 +47,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = 6px @@ -75,7 +75,7 @@ border-color: $light-blue &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &-time color: $theme-meta-color @@ -102,13 +102,7 @@ height: 80px img - width: 100% - height: 100% - transition: all .6s - object-fit: cover - - &:hover - transform: scale(1.1) + @extend .imgHover &-info flex: 1 diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index 38d92cfb0..ab1810896 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -59,4 +59,4 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl index 651d4b70a..d1cad61a0 100644 --- a/source/css/_page/flink.styl +++ b/source/css/_page/flink.styl @@ -58,7 +58,8 @@ img width: 100% height: 100% - transition: all .3s + object-fit: cover + transition: filter 375ms ease-in 0.2s, transform .3s .img-alt display: none diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 288e02bf7..80009163d 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -32,10 +32,7 @@ height: 230px img.post_bg - width: 100% - height: 100% - transition: all .6s - object-fit: cover + @extend .imgHover &.right order: 1 diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 702f8dce1..b96ae9242 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -19,7 +19,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .5em diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index aa0747723..455846ca6 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -22,7 +22,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .5em diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index b72606214..f09e32bbc 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -32,7 +32,7 @@ figure.gallery-group height: 250px backface-visibility: hidden opacity: .8 - transition: opacity .35s, transform .35s + transition: all .3s, filter 375ms ease-in 0.2s !important transform: translate3d(-10px, 0, 0) object-fit: cover diff --git a/source/css/_tags/timeline.styl b/source/css/_tags/timeline.styl new file mode 100644 index 000000000..056c3921a --- /dev/null +++ b/source/css/_tags/timeline.styl @@ -0,0 +1,58 @@ +#article-container + .timeline + margin: 0 0 20px + padding: 14px 20px 5px + border-left: 2px solid var(--timeline-border-color) + + .timeline-item + margin: 0 0 15px + + &:hover + .item-circle + &:before + border: 3px solid var(--pseudo-hover) + + &.headline + .timeline-item-title + .item-circle + > p + font-weight: 600 + font-size: 1.2em + + &:before + left: -28px + border: 4px solid var(--pseudo-hover) + + .timeline-item-title + position: relative + + .item-circle + &:before + position: absolute + top: 50% + left: -27px + width: 6px + height: 6px + border: 3px solid var(--timeline-border-color) + border-radius: 50% + background: var(--card-bg) + content: '' + transition: all .3s + transform: translate(0, -50%) + + > p + margin: 0 0 8px + font-weight: 500 + + .timeline-item-content + position: relative + padding: 12px 10px + border-radius: 8px + background: var(--timeline-bg) + font-size: .93em + + & > :last-child + margin-bottom: 0 + + & + .timeline + margin-top: -20px \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index d36ab41bf..fc2934d3e 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -174,4 +174,8 @@ $tab-botton-color = $font-color $tab-button-hover-bg = darken($tab-border-color, 8) $tab-active-border-color = $theme-color $tab-button-active-bg = $card-bg -$tab-to-top-color = #99a9bf \ No newline at end of file +$tab-to-top-color = #99a9bf + +// timeline +$timeline-content-bg = #f6f6f6 +$timeline-border-color = $theme-color From 312a76690189b762125a3a14f48db5ec9865cb9d Mon Sep 17 00:00:00 2001 From: Harry <66169324+Rr210@users.noreply.github.com> Date: Wed, 6 Oct 2021 14:52:52 +0800 Subject: [PATCH 09/16] =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E4=BD=BF=E7=94=A8json=E6=9B=BF=E6=8D=A2xml,=E9=80=9F=E5=BA=A6?= =?UTF-8?q?=E6=9B=B4=E5=BF=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## xml文件格式本地测试 ![](https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/api/20211006095512.png) ## json文件本地测试 ![](https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/api/20211006095847.png) ## json文件线上测试 ![](https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/api/20211006100635.png) ## 模式切换 两种模式 切换 只需要修改全局配置文件的搜索插件文件格式（json/xml） --- source/js/search/local-search.js | 183 ++++++++++++++++--------------- 1 file changed, 94 insertions(+), 89 deletions(-) diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 5b134457b..a28ca7921 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -10,7 +10,7 @@ window.addEventListener('load', () => { loadFlag = true } // shortcut: ESC - document.addEventListener('keydown', function f (event) { + document.addEventListener('keydown', function f(event) { if (event.code === 'Escape') { closeSearch() document.removeEventListener('keydown', f) @@ -41,107 +41,112 @@ window.addEventListener('load', () => { searchClickFn() }) - function search (path) { - 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) { - const content = item.querySelector('content') - return { - title: item.querySelector('title').textContent, - content: content ? content.textContent : '', - url: item.querySelector('url').textContent - } - }) - - 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) return - let count = 0 - // perform local searching - datas.forEach(function (data) { - let isMatch = true - if (!data.title || data.title.trim() === '') { - data.title = 'Untitled' - } - let dataTitle = data.title.trim().toLowerCase() - const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() - const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url - let indexTitle = -1 - let indexContent = -1 - let firstOccur = -1 - // only match artiles with not empty titles and contents - if (dataTitle !== '' || dataContent !== '') { - keywords.forEach(function (keyword, i) { - indexTitle = dataTitle.indexOf(keyword) - indexContent = dataContent.indexOf(keyword) - if (indexTitle < 0 && indexContent < 0) { - isMatch = false - } else { - if (indexContent < 0) { - indexContent = 0 - } - if (i === 0) { - firstOccur = indexContent - } - } - }) - } else { + async function search(path) { + let datas = [] + const typeF = path.split('.')[1] + const response = await fetch(GLOBAL_CONFIG.root + path) + if (typeF === 'json') { + datas = await response.json() + } else if (typeF === 'xml') { + let res = await response.text() + let t = await new window.DOMParser().parseFromString(res, 'text/xml') + let a = await t + datas = [...a.querySelectorAll('entry')].map(function (item) { + return { + title: item.querySelector('title').textContent, + content: item.querySelector('content').textContent, + url: item.querySelector('url').textContent + } + }) + } + 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) return + let count = 0 + // perform local searching + datas.forEach(function (data) { + let isMatch = true + if (!data.title || data.title.trim() === '') { + data.title = 'Untitled' + } + let dataTitle = data.title.trim().toLowerCase() + const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() + const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url + let indexTitle = -1 + let indexContent = -1 + let firstOccur = -1 + // only match artiles with not empty titles and contents + if (dataTitle !== '' || dataContent !== '') { + keywords.forEach(function (keyword, i) { + indexTitle = dataTitle.indexOf(keyword) + indexContent = dataContent.indexOf(keyword) + if (indexTitle < 0 && indexContent < 0) { isMatch = false + } else { + if (indexContent < 0) { + indexContent = 0 + } + if (i === 0) { + firstOccur = indexContent + } } + }) + } else { + isMatch = false + } - // show search results - if (isMatch) { - const content = data.content.trim().replace(/<[^>]+>/g, '') - if (firstOccur >= 0) { - // cut out 130 characters - let start = firstOccur - 30 - let end = firstOccur + 100 + // show search results + if (isMatch) { + const content = data.content.trim().replace(/<[^>]+>/g, '') + if (firstOccur >= 0) { + // cut out 130 characters + // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30 + // let end = firstOccur + 50 > content.length ? content.length : firstOccur + 50 + let start = firstOccur - 30 + let end = firstOccur + 100 - if (start < 0) { - start = 0 - } + if (start < 0) { + start = 0 + } - if (start === 0) { - end = 100 - } + if (start === 0) { + end = 100 + } - if (end > content.length) { - end = content.length - } + if (end > content.length) { + end = content.length + } - let matchContent = content.substring(start, end) + let matchContent = content.substring(start, end) - // highlight all keywords - keywords.forEach(function (keyword) { - const regS = new RegExp(keyword, 'gi') - matchContent = matchContent.replace(regS, '' + keyword + '') - dataTitle = dataTitle.replace(regS, '' + keyword + '') - }) + // highlight all keywords + keywords.forEach(function (keyword) { + const regS = new RegExp(keyword, 'gi') + matchContent = matchContent.replace(regS, '' + keyword + '') + dataTitle = dataTitle.replace(regS, '' + keyword + '') + }) - str += '
' + dataTitle + '' - count += 1 + str += '
' + dataTitle + '' + count += 1 - if (dataContent !== '') { - str += '

' + matchContent + '...

' - } - } - str += '
' + if (dataContent !== '') { + str += '

' + matchContent + '...

' } - }) - if (count === 0) { - str += '
' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) + - '
' } str += '
' - $resultContent.innerHTML = str - window.pjax && window.pjax.refresh($resultContent) - }) + } }) + if (count === 0) { + str += '
' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) + + '
' + } + str += '
' + $resultContent.innerHTML = str + window.pjax && window.pjax.refresh($resultContent) + }) } }) From cb82bfb7b68eb9ee8fb22776347b8c0de3eab371 Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 12 Oct 2021 23:27:56 +0800 Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=E6=9B=BF=E6=8F=9B=20Justified=20?= =?UTF-8?q?Gallery=20=E7=82=BA=20flickr-justified-gallery=20feat:=20?= =?UTF-8?q?=E5=AE=8C=E5=85=A8=E7=A7=BB=E9=99=A4=20jquery=20feat:=20?= =?UTF-8?q?=E6=B8=85=E9=99=A4=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E7=9A=84?= =?UTF-8?q?CDN,=20=E9=BB=98=E8=AA=8D=20CDN=20=E4=B8=8D=E5=86=8D=E9=A1=AF?= =?UTF-8?q?=E7=A4=BA=E5=9C=A8=20config=20feat:=20=E5=88=87=E6=8F=9B?= =?UTF-8?q?=E5=A4=9C=E9=96=93=E6=A8=A1=E5=BC=8F=E5=BE=8C,=20mermaid=20?= =?UTF-8?q?=E4=B9=9F=E6=9C=83=E5=88=87=E6=8F=9B=E5=A4=9C=E9=96=93=E4=B8=BB?= =?UTF-8?q?=E9=A1=8C=20feat:=20=E7=A7=BB=E9=99=A4=E9=A8=B0=E8=A8=8A?= =?UTF-8?q?=E5=88=86=E6=9E=90=20feat:=20=E7=A7=BB=E9=99=A4=E5=8F=B3?= =?UTF-8?q?=E4=B8=8B=E8=A7=92=E5=AD=97=E9=AB=94=E8=AA=BF=E6=95=B4=E6=8C=89?= =?UTF-8?q?=E9=88=95=20feat:=20=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E5=8F=AF=E8=99=95=E7=90=86=20json=20feat:=20=E5=8F=B3=E4=B8=8B?= =?UTF-8?q?=E8=A7=92=E6=8C=89=E9=88=95=E8=87=AA=E5=AE=9A=E7=BE=A9=E9=A0=86?= =?UTF-8?q?=E5=BA=8F=20feat:=20=E5=8F=B3=E5=B0=8F=E8=A7=92=E6=8C=89?= =?UTF-8?q?=E9=88=95=20UI=20=E5=BE=AE=E8=AA=BF=20improvement:=20=E6=89=8B?= =?UTF-8?q?=E6=A9=9F=E7=AB=AF=E6=9B=B4=E6=94=B9=E9=96=B2=E8=AE=80=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E9=80=80=E5=87=BA=E6=8C=89=E9=88=95=E5=88=B0=E5=8F=B3?= =?UTF-8?q?=E4=B8=8B=E8=A7=92=20improvement:=20photofigcaption=20=E5=92=8C?= =?UTF-8?q?=20fancybox=20=E7=9A=84=20figcaption=20=E5=84=AA=E5=85=88?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA=20=E5=9C=96=E7=89=87=E7=9A=84title=E5=B1=AC?= =?UTF-8?q?=E6=80=A7=EF=BC=8C=E7=84=B6=E5=BE=8C=E6=98=AF=20alt=20=E5=B1=AC?= =?UTF-8?q?=E6=80=A7=20improvement:=20=E9=A6=96=E9=A0=81ui=E5=BE=AE?= =?UTF-8?q?=E8=AA=BF=20improvement:=20=E7=A6=81=E6=AD=A2=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E7=80=8F=E8=A6=BD=E5=99=A8=E6=9C=83=E5=87=BA=E7=8F=BE=E9=BB=9E?= =?UTF-8?q?=E6=93=8A=E5=B7=A6=E4=B8=8B=E8=A7=92=E6=8C=89=E9=88=95=E5=87=BA?= =?UTF-8?q?=E7=8F=BE=E6=94=BE=E5=A4=A7=E7=B6=B2=E9=A0=81=E7=9A=84=E8=A1=8C?= =?UTF-8?q?=E7=82=BA=20improvement:=20js=20=E5=84=AA=E5=8C=96=20fix:=20?= =?UTF-8?q?=E4=BF=AE=E5=BE=A9=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F=E6=94=B9?= =?UTF-8?q?=E8=AE=8A=E6=99=82=EF=BC=8C=E5=B0=8E=E8=88=AA=E6=AC=84=E7=9A=84?= =?UTF-8?q?ui=20=E5=8F=AF=E8=83=BD=E6=9C=83=E9=8C=AF=E4=BA=82=E7=9A=84=20b?= =?UTF-8?q?ug=20fix:=20=E4=BF=AE=E5=BE=A9=20pjax=20=E4=B8=8B,=20twikoo=20?= =?UTF-8?q?=E8=A9=95=E8=AB=96=E7=8D=B2=E5=8F=96=E6=98=AF=E4=B8=8A=E4=B8=80?= =?UTF-8?q?=E7=AF=87=E8=A9=95=E8=AB=96=E7=9A=84=20bug=20fix:=20=E5=A3=93?= =?UTF-8?q?=E7=B8=AE=20html=20=E4=BB=A3=E7=A2=BC=E5=BE=8C,=20mermaid=20?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E6=AD=A3=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- README_CN.md | 2 +- _config.yml | 124 +++++------ languages/default.yml | 2 - languages/en.yml | 2 - languages/zh-CN.yml | 2 - languages/zh-TW.yml | 2 - layout/includes/head.pug | 2 +- layout/includes/head/analytics.pug | 12 -- layout/includes/head/config.pug | 5 +- layout/includes/head/preconnect.pug | 3 - layout/includes/mixins/post-ui.pug | 10 +- layout/includes/rightside.pug | 82 +++++--- .../includes/third-party/comments/twikoo.pug | 41 ++-- layout/includes/third-party/math/mermaid.pug | 32 ++- layout/includes/third-party/pjax.pug | 5 - package.json | 2 +- scripts/events/cdn.js | 104 ++++++++++ scripts/helpers/inject_head_js.js | 25 +-- scripts/tag/gallery.js | 2 +- scripts/tag/mermaid.js | 4 +- source/css/_global/function.styl | 2 +- source/css/_layout/aside.styl | 5 +- source/css/_layout/head.styl | 8 +- source/css/_layout/rightside.styl | 18 +- source/css/_layout/third-party.styl | 9 +- source/css/_mode/darkmode.styl | 1 - source/css/_mode/readmode.styl | 5 + source/css/_page/common.styl | 4 +- source/css/_page/homepage.styl | 15 +- source/css/_tags/gallery.styl | 175 ++++++++-------- source/js/main.js | 192 +++++++----------- source/js/search/local-search.js | 181 +++++++++-------- source/js/utils.js | 81 ++++---- 34 files changed, 601 insertions(+), 560 deletions(-) create mode 100644 scripts/events/cdn.js diff --git a/README.md b/README.md index 900186839..9179f3af3 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t ### GIT -> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly) +> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git) Stable branch [recommend]: diff --git a/README_CN.md b/README_CN.md index 8dc6794c3..e680844f6 100644 --- a/README_CN.md +++ b/README_CN.md @@ -24,7 +24,7 @@ ### Git 安裝 -> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。 +> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。 在博客根目錄裡安裝穩定版【推薦】 diff --git a/_config.yml b/_config.yml index 2e19882f2..256873238 100644 --- a/_config.yml +++ b/_config.yml @@ -401,10 +401,6 @@ baidu_analytics: # https://analytics.google.com/analytics/web/ google_analytics: -# Tencent Analytics ID -# https://mta.qq.com -tencent_analytics: - # CNZZ Analytics # https://www.umeng.com/ cnzz_analytics: @@ -673,9 +669,6 @@ newest_comments: # Bottom right button (右下角按鈕) # -------------------------------------- -# Change font size -change_font_size: false - # Conversion between Traditional and Simplified Chinese (簡繁轉換) translate: enable: false @@ -704,6 +697,14 @@ darkmode: # autoChangeMode: false autoChangeMode: false +# Don't modify the following settings unless you know how they work (非必要請不要修改 ) +# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment +# Don't repeat 不要重複 +rightside_item_order: + enable: false + hide: # readmode,translate,darkmode,hideAside + show: # toc,chat,comment + # Lightbox (圖片大圖查看模式) # -------------------------------------- # You can only choose one, or neither (只能選擇一個 或者 兩個都不選) @@ -724,7 +725,9 @@ fancybox: true mermaid: enable: false # built-in themes: default/forest/dark/neutral - theme: default + theme: + light: default + dark: dark # Note (Bootstrap Callout) note: @@ -817,86 +820,85 @@ inject: # 非必要請不要修改 CDN: # main - main_css: /css/index.css - jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js - main: /js/main.js - utils: /js/utils.js + main_css: + main: + utils: # pjax - pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js + pjax: # comments - gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js - gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css - valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js - disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js - disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css - utterances: https://utteranc.es/client.js - twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js - waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js + gitalk: + gitalk_css: + valine: + disqusjs: + disqusjs_css: + utterances: + twikoo: + waline: # share - addtoany: https://static.addtoany.com/menu/page.js - sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js - sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css + addtoany: + sharejs: + sharejs_css: # search - local_search: /js/search/local-search.js - algolia_js: /js/search/algolia.js - algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js - algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css + local_search: + algolia_js: + algolia_search: + algolia_search_css: # math - mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js - katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css - katex_copytex: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js - katex_copytex_css: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css - mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js + mathjax: + katex: + katex_copytex: + katex_copytex_css: + mermaid: # count - busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js + busuanzi: # background effect - canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js - canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js - canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js + canvas_ribbon: + canvas_fluttering_ribbon: + canvas_nest: - lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js - instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js - typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js - pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js + lazyload: + instantpage: + typed: + pangu: # photo - fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css - fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js - medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js + fancybox_css: + fancybox: + medium_zoom: # snackbar - snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css - snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js + snackbar_css: + snackbar: # effect - activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js - fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js - click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js - ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js + activate_power_mode: + fireworks: + click_heart: + ClickShowText: # fontawesome - fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css + fontawesome: # Conversion between Traditional and Simplified Chinese - translate: /js/tw_cn.js + translate: - # justifiedGallery - justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js - justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css + # flickr-justified-gallery + flickr_justified_gallery_js: + flickr_justified_gallery_css: # aplayer - aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css - aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js - meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js + aplayer_css: + aplayer_js: + meting_js: # Prism.js - prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js - prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js - prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js \ No newline at end of file + prismjs_js: + prismjs_lineNumber_js: + prismjs_autoloader: \ No newline at end of file diff --git a/languages/default.yml b/languages/default.yml index 09f14c17f..2241abcbb 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -94,8 +94,6 @@ share: Share rightside: readmode_title: Read 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 diff --git a/languages/en.yml b/languages/en.yml index 2465afa22..22a55dbf6 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -94,8 +94,6 @@ 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 diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 3270a21f7..a0539a8c4 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -95,8 +95,6 @@ share: 分享 rightside: readmode_title: 阅读模式 - font_plus_title: 放大字体 - font_minus_title: 缩小字体 translate_title: 简繁转换 night_mode_title: 浅色和深色模式转换 back_to_top: 回到顶部 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 4217284c1..cf259227b 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -95,8 +95,6 @@ share: 分享 rightside: readmode_title: 閱讀模式 - font_plus_title: 放大字型 - font_minus_title: 縮小字型 translate_title: 簡繁轉換 night_mode_title: 淺色和深色模式轉換 back_to_top: 回到頂部 diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 6af325a7a..37078d874 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -20,7 +20,7 @@ meta(charset='UTF-8') meta(http-equiv="X-UA-Compatible" content="IE=edge") -meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no") +meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no") title= tabTitle if pageKeywords meta(name="keywords" content=pageKeywords) diff --git a/layout/includes/head/analytics.pug b/layout/includes/head/analytics.pug index 4873ebf35..6452528c2 100644 --- a/layout/includes/head/analytics.pug +++ b/layout/includes/head/analytics.pug @@ -16,18 +16,6 @@ if theme.google_analytics gtag('js', new Date()); gtag('config', '!{theme.google_analytics}'); -if theme.tencent_analytics - script. - var _mtac = {}; - (function() { - var mta = document.createElement("script"); - mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4"; - mta.setAttribute("name", "MTAH5"); - mta.setAttribute("sid", "!{theme.tencent_analytics}"); - var s = document.getElementsByTagName("script")[0]; - s.parentNode.insertBefore(mta, s); - })(); - if theme.cnzz_analytics script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index f669dbea1..1f1974ceb 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -112,10 +112,9 @@ script. lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}', Snackbar: !{Snackbar}, source: { - jQuery: '!{url_for(theme.CDN.jquery)}', justifiedGallery: { - js: '!{url_for(theme.CDN.justifiedGallery_js)}', - css: '!{url_for(theme.CDN.justifiedGallery_css)}' + js: '!{url_for(theme.CDN.flickr_justified_gallery_js)}', + css: '!{url_for(theme.CDN.flickr_justified_gallery_css)}' } }, isPhotoFigcaption: !{theme.photofigcaption}, diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug index 73231c75e..d010b0533 100644 --- a/layout/includes/head/preconnect.pug +++ b/layout/includes/head/preconnect.pug @@ -6,9 +6,6 @@ if theme.google_analytics if theme.baidu_analytics link(rel="preconnect" href="//hm.baidu.com") -if theme.tencent_analytics - link(rel="preconnect" href="//pingjs.qq.com") - if theme.cnzz_analytics link(rel="preconnect" href="//s4.cnzz.com") diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index 4a4a12364..c28740d61 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -43,25 +43,25 @@ mixin postUI(posts) time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format) if (theme.post_meta.page.categories && article.categories.data.length > 0) span.article-meta - span.article-meta__separator | + span.article-meta-separator | i.fas.fa-inbox each item, index in article.categories.data a(href=url_for(item.path)).article-meta__categories #[=item.name] if (index < article.categories.data.length - 1) - i.fas.fa-angle-right + i.fas.fa-angle-right.article-meta-link if (theme.post_meta.page.tags && article.tags.data.length > 0) span.article-meta.tags - span.article-meta__separator | + span.article-meta-separator | i.fas.fa-tag each item, index in article.tags.data a(href=url_for(item.path)).article-meta__tags #[=item.name] if (index < article.tags.data.length - 1) - span.article-meta__link #[='•'] + span.article-meta-link #[='•'] mixin countBlockInIndex - needLoadCountJs = true span.article-meta - span.article-meta__separator | + span.article-meta-separator | i.fas.fa-comments if block block diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 0e0bdf558..39a742b8f 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -1,38 +1,60 @@ +- const { readmode, translate, darkmode, aside, chat_btn } = theme +mixin rightsideItem(array) + each item in array + case item + when 'readmode' + if is_post() && readmode + button#readmode(type="button" title=_p('rightside.readmode_title')) + i.fas.fa-book-open + when 'translate' + if translate.enable + button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default + when 'darkmode' + if darkmode.enable && darkmode.button + button#darkmode(type="button" title=_p('rightside.night_mode_title')) + i.fas.fa-adjust + when 'hideAside' + if aside.enable && aside.button && page.aside !== false + button#hide-aside-btn(type="button" title=_p('rightside.aside')) + i.fas.fa-arrows-alt-h + when 'toc' + if showToc + button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) + i.fas.fa-list-ul + when 'chat' + if chat_btn + button#chat_btn(type="button" title=_p("rightside.chat_btn")) + i.fas.fa-sms + when 'comment' + if commentsJsLoad + a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) + i.fas.fa-comments + #rightside + - const { enable, hide, show } = theme.rightside_item_order + - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside'] + - const showArray = enable ? show && show.split(',') : ['toc','chat','comment'] + + #rightside-config-hide - 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" title=_p('rightside.aside')) - i.fas.fa-arrows-alt-h + if hideArray + +rightsideItem(hideArray) #rightside-config-show - if is_post() - if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size) + if enable + if hide button#rightside_config(type="button" title=_p("rightside.setting")) i.fas.fa-cog.fa-spin - 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.fa-spin + else + if is_post() + if (readmode || translate.enable || (darkmode.enable && darkmode.button)) + button#rightside_config(type="button" title=_p("rightside.setting")) + i.fas.fa-cog.fa-spin + else if translate.enable || (darkmode.enable && darkmode.button) + button#rightside_config(type="button" title=_p("rightside.setting")) + i.fas.fa-cog.fa-spin + + if showArray + +rightsideItem(showArray) - if showToc - button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) - i.fas.fa-list-ul - if theme.chat_btn - button#chat_btn(type="button" title=_p("rightside.chat_btn")) - i.fas.fa-sms - if commentsJsLoad - a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) - i.fas.fa-comments button#go-up(type="button" title=_p("rightside.back_to_top")) i.fas.fa-arrow-up \ No newline at end of file diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index c191ceca9..d7a883150 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -1,45 +1,48 @@ +- const { envId, region, option } = theme.twikoo +- const { use, lazyload, count } = theme.comments + script. (()=>{ - const $countDom = document.getElementById('twikoo-count') const init = () => { twikoo.init(Object.assign({ el: '#twikoo-wrap', - envId: '!{theme.twikoo.envId}', - region: '!{theme.twikoo.region}', + envId: '!{envId}', + region: '!{region}', onCommentLoaded: function () { btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)')) } - }, !{JSON.stringify(theme.twikoo.option)})) + }, !{JSON.stringify(option)})) } const getCount = () => { twikoo.getCommentsCount({ - envId: '!{theme.twikoo.envId}', - region: '!{theme.twikoo.region}', + envId: '!{envId}', + region: '!{region}', urls: [window.location.pathname], includeReply: false }).then(function (res) { - $countDom.innerText = res[0].count + document.getElementById('twikoo-count').innerText = res[0].count }).catch(function (err) { console.error(err); }); } - const loadTwikoo = (bool = false) => { + const runFn = () => { + init() + !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''} + } + + const loadTwikoo = () => { if (typeof twikoo === 'object') { - init() - bool && $countDom && setTimeout(getCount,0) - } else { - getScript('!{theme.CDN.twikoo}').then(()=> { - init() - bool && $countDom && setTimeout(getCount,0) - }) - } + setTimeout(runFn,0) + return + } + getScript('!{theme.CDN.twikoo}').then(runFn) } - if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) { - if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) - else loadTwikoo(true) + if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) { + if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) + else loadTwikoo() } else { window.loadOtherComment = () => { loadTwikoo() diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index 801ce2167..5716b30a2 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/layout/includes/third-party/math/mermaid.pug @@ -1,15 +1,25 @@ script. - if (document.getElementsByClassName('mermaid').length) { - if (window.mermaidJsLoad) mermaid.init() - else { - getScript('!{theme.CDN.mermaid}').then(() => { - window.mermaidJsLoad = true - mermaid.initialize({ - theme: '!{theme.mermaid.theme}', + (() => { + const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap') + if ($mermaidWrap.length) { + window.runMermaid = () => { + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}' + + Array.from($mermaidWrap).forEach((item, index) => { + const mermaidSrc = item.firstElementChild + const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n' + const mermaidID = 'mermaid-' + index + const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent + mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => { + mermaidSrc.insertAdjacentHTML('afterend', svgCode) + }) }) - !{theme.pjax.enable} && mermaid.init() - }) - } - } + } + const loadMermaid = () => { + window.mermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid) + } + window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) + } + })() \ No newline at end of file diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index f3b581271..a1278b996 100644 --- a/layout/includes/third-party/pjax.pug +++ b/layout/includes/third-party/pjax.pug @@ -74,11 +74,6 @@ script. typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting() - // Analytics - if (!{theme.tencent_analytics ? true : false}) { - MtaH5.pgv() - } - // prismjs typeof Prism === 'object' && Prism.highlightAll() diff --git a/package.json b/package.json index 4fb23c4bb..ee1f52886 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b7", + "version": "4.0.0-b8", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js new file mode 100644 index 000000000..0f038c469 --- /dev/null +++ b/scripts/events/cdn.js @@ -0,0 +1,104 @@ +/** + * Butterfly + * CDN + */ + +'use strict' + +hexo.extend.filter.register('before_generate', () => { + const themeConfig = hexo.theme.config + const defaultCDN = { + main_css: '/css/index.css', + main: '/js/main.js', + utils: '/js/utils.js', + + // pjax + pjax: 'https://cdn.jsdelivr.net/npm/pjax/pjax.min.js', + + // comments + gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js', + gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css', + valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js', + disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js', + disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css', + utterances: 'https://utteranc.es/client.js', + twikoo: 'https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js', + waline: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js', + + // share + addtoany: 'https://static.addtoany.com/menu/page.js', + sharejs: 'https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js', + sharejs_css: 'https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css', + + // search + local_search: '/js/search/local-search.js', + algolia_js: '/js/search/algolia.js', + algolia_search: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js', + algolia_search_css: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css', + + // math + mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js', + katex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css', + katex_copytex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js', + katex_copytex_css: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css', + mermaid: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', + + // count + busuanzi: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js', + + // background effect + canvas_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js', + canvas_fluttering_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js', + canvas_nest: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js', + + lazyload: 'https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js', + instantpage: 'https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js', + typed: 'https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js', + pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js', + + // photo + fancybox_css: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css', + fancybox: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js', + medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js', + + // snackbar + snackbar_css: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css', + snackbar: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js', + + // effect + activate_power_mode: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js', + fireworks: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js', + click_heart: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js', + ClickShowText: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js', + + // fontawesome + fontawesome: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css', + + // Conversion between Traditional and Simplified Chinese + translate: '/js/tw_cn.js', + + // flickr-justified-gallery + flickr_justified_gallery_js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js', + flickr_justified_gallery_css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css', + + // aplayer + aplayer_css: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css', + aplayer_js: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js', + meting_js: 'https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js', + + // Prism.js + prismjs_js: 'https://cdn.jsdelivr.net/npm/prismjs/prism.min.js', + prismjs_lineNumber_js: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js', + prismjs_autoloader: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js' + } + + // delete null value + const deleteNullValue = obj => { + for (const i in obj) { + obj[i] === null && delete obj[i] + } + return obj + } + + themeConfig.CDN = Object.assign(defaultCDN, deleteNullValue(themeConfig.CDN)) +}) diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js index 78e47c0a9..8da117993 100644 --- a/scripts/helpers/inject_head_js.js +++ b/scripts/helpers/inject_head_js.js @@ -6,7 +6,7 @@ 'use strict' hexo.extend.helper.register('inject_head_js', function () { - const { darkmode, aside, change_font_size, index_img, disable_top_img, pjax} = this.theme + const { darkmode, aside } = this.theme const localStore = ` win.saveToLocal = { @@ -131,31 +131,14 @@ hexo.extend.helper.register('inject_head_js', function () { ` } - let changFontAside = '' - if (change_font_size) { - changFontAside = ` - const fontSizeVal = saveToLocal.get('global-font-size') - if (fontSizeVal !== undefined) { - document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px') - } - ` - } - - let detectApple = '' - if (!disable_top_img || index_img !== false) { - detectApple = ` + const detectApple = ` const detectApple = () => { - if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){ + if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){ document.documentElement.classList.add('apple') } } detectApple() ` - if (pjax.enable) { - detectApple += 'document.addEventListener(\'pjax:complete\', detectApple)' - } - } - - return `` + return `` }) diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js index 21ebb55a4..acccd0b3e 100644 --- a/scripts/tag/gallery.js +++ b/scripts/tag/gallery.js @@ -8,7 +8,7 @@ const urlFor = require('hexo-util').url_for.bind(hexo) function gallery (args, content) { - return `
${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')} + return `
${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
` } diff --git a/scripts/tag/mermaid.js b/scripts/tag/mermaid.js index d8f8b1583..237b7ee3a 100644 --- a/scripts/tag/mermaid.js +++ b/scripts/tag/mermaid.js @@ -9,7 +9,9 @@ const { escapeHTML } = require('hexo-util') function mermaid (args, content) { - return `
${escapeHTML(content)}
` + return `
` } hexo.extend.tag.register('mermaid', mermaid, { ends: true }) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 003d9a7bc..184b0e72d 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -240,4 +240,4 @@ if hexo-config('avatar.effect') == true transform: translateX(200px) 100% - transform: translateX(0) + transform: translateX(0) \ No newline at end of file diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index d59c24fda..76b6e2532 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -246,8 +246,8 @@ max-height: calc(100% - 60px) width: $toc-mobile-width opacity: 0 + transition: initial transform-origin: right bottom - transition: none .toc-percentage float: right @@ -317,8 +317,9 @@ border-radius: 70px img + width: 100% height: 100% - transition: filter 375ms ease-in 0.2s, transform .3s + transition: filter 375ms ease-in .2s, transform .3s object-fit: cover &:hover diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index e487fe6bb..0d49b7a33 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -239,7 +239,6 @@ top: 0 z-index: 90 display: flex - flex-wrap: wrap align-items: center padding: 0 36px width: 100% @@ -335,13 +334,10 @@ font-size: inherit .menus_items - position: absolute - left: 0 - visibility: hidden - opacity: 0 + display: none #search-button span - display: none !important + display: none #search-button display: inline diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 05678c2a5..c2f75c438 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -1,6 +1,6 @@ #rightside position: fixed - right: -38px + right: -48px bottom: $rightside-bottom z-index: 100 opacity: 0 @@ -8,7 +8,7 @@ #rightside-config-hide transition: transform .4s - transform: translate(35px, 0) + transform: translate(48px, 0) &.show transform: translate(0, 0) !important @@ -17,17 +17,25 @@ & > button, & > a display: block - margin-bottom: 2px - width: 30px - height: 30px + margin-bottom: 5px + width: w = 38px + height: w + border-radius: 5px background-color: var(--btn-bg) color: var(--btn-color) text-align: center font-size: 16px + line-height: w + touch-action: manipulation &:hover background-color: var(--btn-hover-color) + +maxWidth768() + width: w = 34px + height: w + line-height: w + #mobile-toc-button display: none diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index accc41020..5444fc4ff 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -61,16 +61,9 @@ if hexo-config('waline.bg') .medium-zoom-overlay z-index: 99999 !important -.mermaid - overflow: auto +.mermaid-wrap margin: 0 0 20px - background: $white text-align: center - opacity: 0 - transition: all .3s - - &[data-processed] - opacity: 1 .utterances, .fb-comments iframe diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 14e3b7805..64a638eba 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -91,7 +91,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' // hide-tags .hide-button, .btn-beautify, - .mermaid, .hl-label, .post-outdate-notice, .error-img, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 8d2b4f753..80dc762a9 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -36,6 +36,7 @@ if hexo-config('readmode') position: fixed top: 30px right: 30px + z-index: 100 width: 40px height: 40px border-radius: 8px @@ -44,6 +45,10 @@ if hexo-config('readmode') font-size: 16px transition: background .3s + +maxWidth768() + top: initial + bottom: 30px + &:hover background: var(--exit-btn-hover) diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index bf984822e..40bb8e9a9 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -54,5 +54,7 @@ #page-header.full_page background-attachment: scroll !important - .recent-post-item + .recent-post-item, + .avatar-img, + .flink-item-icon transform: translateZ(0) diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 80009163d..cf88f8873 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -8,7 +8,7 @@ flex-direction: row align-items: center overflow: hidden - height: 20em + height: 18em +maxWidth768() flex-direction: column @@ -24,7 +24,7 @@ .post_cover overflow: hidden - width: 45% + width: 44% height: 100% +maxWidth768() @@ -42,7 +42,7 @@ & >.recent-post-info padding: 0 40px - width: 55% + width: 57% +maxWidth768() padding: 20px 20px 30px @@ -88,13 +88,10 @@ else display: none - .article-meta__separator + .article-meta-separator margin: 0 6px - .article-meta__link - margin: 0 4px - - .fa-angle-right + .article-meta-link margin: 0 4px if hexo-config('post_meta.page.date_format') == 'relative' @@ -110,4 +107,4 @@ & > .content @extend .limit-more-line - -webkit-line-clamp: 3 \ No newline at end of file + -webkit-line-clamp: 2 \ No newline at end of file diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index f09e32bbc..2be3d5d6e 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -1,107 +1,102 @@ -figure.gallery-group - position: relative - float: left - overflow: hidden - margin: 6px 4px - width: calc(50% - 8px) - height: 250px - border-radius: 8px - background: $dark-black - -webkit-transform: translate3d(0, 0, 0) +#article-container + figure.gallery-group + position: relative + float: left + overflow: hidden + margin: 6px 4px + width: calc(50% - 8px) + height: 250px + border-radius: 8px + background: $dark-black + -webkit-transform: translate3d(0, 0, 0) - +maxWidth600() - width: calc(100% - 8px) + +maxWidth600() + width: calc(100% - 8px) - &:hover - img - opacity: .4 - transform: translate3d(0, 0, 0) + &:hover + img + opacity: .4 + transform: translate3d(0, 0, 0) - .gallery-group-name::after - transform: translate3d(0, 0, 0) + .gallery-group-name::after + transform: translate3d(0, 0, 0) - p - opacity: 1 - transform: translate3d(0, 0, 0) + p + opacity: 1 + transform: translate3d(0, 0, 0) - img - position: relative - margin: 0 !important - max-width: none !important - width: calc(100% + 20px) - height: 250px - backface-visibility: hidden - opacity: .8 - transition: all .3s, filter 375ms ease-in 0.2s !important - transform: translate3d(-10px, 0, 0) - object-fit: cover - - figcaption - position: absolute - top: 0 - left: 0 - padding: 30px - width: 100% - height: 100% - color: $gallery-color - text-transform: uppercase - backface-visibility: hidden + img + position: relative + margin: 0 + max-width: none + width: calc(100% + 20px) + height: 250px + backface-visibility: hidden + opacity: .8 + transition: all .3s, filter 375ms ease-in .2s + transform: translate3d(-10px, 0, 0) + object-fit: cover - & > a + figcaption position: absolute top: 0 - right: 0 - bottom: 0 left: 0 - z-index: 1000 - opacity: 0 + padding: 30px + width: 100% + height: 100% + color: $gallery-color + text-transform: uppercase + backface-visibility: hidden - p - @extend .limit-more-line - margin: 0 - padding: 8px 0 0 - letter-spacing: 1px - font-size: 1.1em - line-height: 1.5 - opacity: 0 - transition: opacity .35s, transform .35s - transform: translate3d(100%, 0, 0) - -webkit-line-clamp: 4 + & > a + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: 1000 + opacity: 0 - .gallery-group-name - @extend .limit-more-line - position: relative - margin: 0 - padding: 8px 0 - font-weight: bold - font-size: 1.65em - line-height: 1.5 - -webkit-line-clamp: 2 + p + @extend .limit-more-line + margin: 0 + padding: 8px 0 0 + letter-spacing: 1px + font-size: 1.1em + line-height: 1.5 + opacity: 0 + transition: opacity .35s, transform .35s + transform: translate3d(100%, 0, 0) + -webkit-line-clamp: 4 - &:after - position: absolute - bottom: 0 - left: 0 - width: 100% - height: 2px - background: $gallery-color - content: '' - transition: transform .35s - transform: translate3d(-100%, 0, 0) + .gallery-group-name + @extend .limit-more-line + position: relative + margin: 0 + padding: 8px 0 + font-weight: bold + font-size: 1.65em + line-height: 1.5 + -webkit-line-clamp: 2 -.gallery-group-main - overflow: auto - padding: 0 0 16px + &:after + position: absolute + bottom: 0 + left: 0 + width: 100% + height: 2px + background: $gallery-color + content: '' + transition: transform .35s + transform: translate3d(-100%, 0, 0) -.justified-gallery - margin: 0 0 16px + .gallery-group-main + overflow: auto + padding: 0 0 16px - img + .fj-gallery + margin: 0 0 16px opacity: 0 - .img-alt - display: none - - .fancybox - width: auto - text-align: inherit \ No newline at end of file + .img-alt + display: none \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index e6e83afcd..bd3f14f88 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,23 +1,21 @@ document.addEventListener('DOMContentLoaded', function () { - const $blogName = document.getElementById('site-name') - let blogNameWidth = $blogName && $blogName.offsetWidth - const $menusEle = document.querySelector('#menus .menus_items') - let menusWidth = $menusEle && $menusEle.offsetWidth - const $searchEle = document.querySelector('#search-button') - let searchWidth = $searchEle && $searchEle.offsetWidth - - const adjustMenu = (change = false) => { - if (change) { - blogNameWidth = $blogName && $blogName.offsetWidth - menusWidth = $menusEle && $menusEle.offsetWidth - searchWidth = $searchEle && $searchEle.offsetWidth - } - const $nav = document.getElementById('nav') - let t - if (window.innerWidth < 768) t = true - else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120 - - if (t) { + let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen + + const adjustMenu = (init) => { + if (init) { + blogNameWidth = document.getElementById('site-name').offsetWidth + const $menusEle = document.querySelectorAll('#menus .menus_item') + menusWidth = 0 + $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth }) + const $searchEle = document.querySelector('#search-button') + searchWidth = $searchEle ? $searchEle.offsetWidth : 0 + $nav = document.getElementById('nav') + } + + if (window.innerWidth < 768) hideMenuIndex = true + else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120 + + if (hideMenuIndex) { $nav.classList.add('hide-menu') } else { $nav.classList.remove('hide-menu') @@ -26,44 +24,26 @@ document.addEventListener('DOMContentLoaded', function () { // 初始化header const initAdjust = () => { - adjustMenu() - document.getElementById('nav').classList.add('show') + adjustMenu(true) + $nav.classList.add('show') } // sidebar menus - const sidebarFn = () => { - const $toggleMenu = document.getElementById('toggle-menu') - const $mobileSidebarMenus = document.getElementById('sidebar-menus') - const $menuMask = document.getElementById('menu-mask') - const $body = document.body - - function openMobileSidebar () { + const sidebarFn = { + open: () => { btf.sidebarPaddingR() - $body.style.overflow = 'hidden' - btf.fadeIn($menuMask, 0.5) - $mobileSidebarMenus.classList.add('open') - } - - function closeMobileSidebar () { + document.body.style.overflow = 'hidden' + btf.fadeIn(document.getElementById('menu-mask'), 0.5) + document.getElementById('sidebar-menus').classList.add('open') + mobileSidebarOpen = true + }, + close: () => { + const $body = document.body $body.style.overflow = '' $body.style.paddingRight = '' - btf.fadeOut($menuMask, 0.5) - $mobileSidebarMenus.classList.remove('open') + btf.fadeOut(document.getElementById('menu-mask'), 0.5) + document.getElementById('sidebar-menus').classList.remove('open') } - - $toggleMenu.addEventListener('click', openMobileSidebar) - - $menuMask.addEventListener('click', e => { - if ($mobileSidebarMenus.classList.contains('open')) { - closeMobileSidebar() - } - }) - - window.addEventListener('resize', e => { - if (btf.isHidden($toggleMenu)) { - if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar() - } - }) } /** @@ -225,7 +205,7 @@ document.addEventListener('DOMContentLoaded', function () { function addPhotoFigcaption () { document.querySelectorAll('#article-container img').forEach(function (item) { const parentEle = item.parentNode - const altValue = item.alt + const altValue = item.title || item.alt if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) { const ele = document.createElement('div') ele.className = 'img-alt is-center' @@ -237,7 +217,6 @@ document.addEventListener('DOMContentLoaded', function () { /** * Lightbox - * It needs to call it after the Justified Gallery done, or the fancybox maybe not work */ const runLightbox = () => { btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)')) @@ -245,41 +224,28 @@ document.addEventListener('DOMContentLoaded', function () { /** * justified-gallery 圖庫排版 - * 需要 jQuery */ - let detectJgJsLoad = false const runJustifiedGallery = function (ele) { - const $justifiedGallery = $(ele) - const $imgList = $justifiedGallery.find('img') - $imgList.unwrap() // remove

tag - if ($imgList.length) { - $imgList.each(function (i, o) { - if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) - $(o).wrap('

') - }) - } + ele.forEach(item => { + const $imgList = item.querySelectorAll('img') - runLightbox() + $imgList.forEach(i => { + const dataLazySrc = i.getAttribute('data-lazy-src') + if (dataLazySrc) i.src = dataLazySrc + btf.wrap(i, 'div', { class: 'fj-gallery-item' }) + }) + }) - if (detectJgJsLoad) { - btf.initJustifiedGallery($justifiedGallery) + if (window.fjGallery) { + btf.initJustifiedGallery(ele) return } - $('head').append(``) - $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) }) - detectJgJsLoad = true - } - - const jqLoadAndRun = () => { - const $jgEle = document.querySelectorAll('#article-container .justified-gallery') - if ($jgEle.length) { - btf.isJqueryLoad(() => { - runJustifiedGallery($jgEle) - }) - return - } - runLightbox() + const newEle = document.createElement('link') + newEle.rel = 'stylesheet' + newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css + document.body.appendChild(newEle) + getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) }) } /** @@ -328,7 +294,7 @@ document.addEventListener('DOMContentLoaded', function () { } $header.classList.add('nav-fixed') if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') { - $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)' } } else { if (currentTop === 0) { @@ -338,7 +304,7 @@ document.addEventListener('DOMContentLoaded', function () { } if (document.body.scrollHeight <= innerHeight) { - $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)' } }, 200)() } @@ -390,9 +356,9 @@ document.addEventListener('DOMContentLoaded', function () { } } - const mobileToc = { + window.mobileToc = { open: () => { - $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px' + $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px' }, close: () => { @@ -403,11 +369,6 @@ document.addEventListener('DOMContentLoaded', function () { } } - document.getElementById('mobile-toc-button').addEventListener('click', () => { - if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open() - else mobileToc.close() - }) - // toc元素點擊 $cardToc.addEventListener('click', (e) => { e.preventDefault() @@ -416,7 +377,7 @@ document.addEventListener('DOMContentLoaded', function () { : e.target.parentElement btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300) if (window.innerWidth < 900) { - mobileToc.close() + window.mobileToc.close() } }) @@ -512,6 +473,7 @@ document.addEventListener('DOMContentLoaded', function () { typeof utterancesTheme === 'function' && utterancesTheme() typeof FB === 'object' && window.loadFBComment() window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) + typeof runMermaid === 'function' && window.runMermaid() }, showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開 document.getElementById('rightside-config-hide').classList.toggle('show') @@ -527,22 +489,9 @@ document.addEventListener('DOMContentLoaded', function () { $htmlDom.toggle('hide-aside') }, - adjustFontSize: (plus) => { - const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size')) - let newValue = '' - 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(true) - } 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(true) - } - - saveToLocal.set('global-font-size', newValue, 2) + runMobileToc: () => { + if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open() + else window.mobileToc.close() } } @@ -555,6 +504,9 @@ document.addEventListener('DOMContentLoaded', function () { case 'rightside_config': rightSideFn.showOrHideBtn() break + case 'mobile-toc-button': + rightSideFn.runMobileToc() + break case 'readmode': rightSideFn.switchReadMode() break @@ -564,12 +516,6 @@ document.addEventListener('DOMContentLoaded', function () { case 'hide-aside-btn': rightSideFn.hideAsideBtn() break - case 'font-plus': - rightSideFn.adjustFontSize(true) - break - case 'font-minus': - rightSideFn.adjustFontSize() - break default: break } @@ -659,8 +605,8 @@ document.addEventListener('DOMContentLoaded', function () { 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')) + if ($hideContent.querySelectorAll('.fj-gallery').length > 0) { + btf.initJustifiedGallery($hideContent.querySelectorAll('.fj-gallery')) } } }) @@ -686,7 +632,7 @@ document.addEventListener('DOMContentLoaded', function () { if (item.id === tabId) item.classList.add('active') else item.classList.remove('active') }) - const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`) + const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`) if ($isTabJustifiedGallery.length > 0) { btf.initJustifiedGallery($isTabJustifiedGallery) } @@ -776,8 +722,12 @@ document.addEventListener('DOMContentLoaded', function () { } const unRefreshFn = function () { - window.addEventListener('resize', adjustMenu) - window.addEventListener('orientationchange', () => { setTimeout(adjustMenu(true), 100) }) + window.addEventListener('resize', () => { + adjustMenu(false) + hideMenuIndex && mobileSidebarOpen && sidebarFn.close() + }) + + document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() }) clickFnOfSubMenu() GLOBAL_CONFIG.islazyload && lazyloadImg() @@ -798,17 +748,21 @@ document.addEventListener('DOMContentLoaded', function () { } GLOBAL_CONFIG_SITE.isToc && tocFn() - sidebarFn() GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex() addHighlightTool() GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() - jqLoadAndRun() scrollFn() + + const $jgEle = document.querySelectorAll('#article-container .fj-gallery') + $jgEle.length && runJustifiedGallery($jgEle) + + runLightbox() addTableWrap() clickFnOfTagHide() tabsFn.clickFnOfTabs() tabsFn.backToTop() switchComments() + document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() }) } refreshFn() diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 5b134457b..8da8a7357 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -41,107 +41,112 @@ window.addEventListener('load', () => { searchClickFn() }) - function search (path) { - 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) { - const content = item.querySelector('content') - return { - title: item.querySelector('title').textContent, - content: content ? content.textContent : '', - url: item.querySelector('url').textContent - } - }) - - 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) return - let count = 0 - // perform local searching - datas.forEach(function (data) { - let isMatch = true - if (!data.title || data.title.trim() === '') { - data.title = 'Untitled' - } - let dataTitle = data.title.trim().toLowerCase() - const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() - const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url - let indexTitle = -1 - let indexContent = -1 - let firstOccur = -1 - // only match artiles with not empty titles and contents - if (dataTitle !== '' || dataContent !== '') { - keywords.forEach(function (keyword, i) { - indexTitle = dataTitle.indexOf(keyword) - indexContent = dataContent.indexOf(keyword) - if (indexTitle < 0 && indexContent < 0) { - isMatch = false - } else { - if (indexContent < 0) { - indexContent = 0 - } - if (i === 0) { - firstOccur = indexContent - } - } - }) - } else { + async function search (path) { + let datas = [] + const typeF = path.split('.')[1] + const response = await fetch(GLOBAL_CONFIG.root + path) + if (typeF === 'json') { + datas = await response.json() + } else if (typeF === 'xml') { + const res = await response.text() + const t = await new window.DOMParser().parseFromString(res, 'text/xml') + const a = await t + datas = [...a.querySelectorAll('entry')].map(function (item) { + return { + title: item.querySelector('title').textContent, + content: item.querySelector('content').textContent, + url: item.querySelector('url').textContent + } + }) + } + 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) return + let count = 0 + // perform local searching + datas.forEach(function (data) { + let isMatch = true + if (!data.title || data.title.trim() === '') { + data.title = 'Untitled' + } + let dataTitle = data.title.trim().toLowerCase() + const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() + const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url + let indexTitle = -1 + let indexContent = -1 + let firstOccur = -1 + // only match artiles with not empty titles and contents + if (dataTitle !== '' || dataContent !== '') { + keywords.forEach(function (keyword, i) { + indexTitle = dataTitle.indexOf(keyword) + indexContent = dataContent.indexOf(keyword) + if (indexTitle < 0 && indexContent < 0) { isMatch = false + } else { + if (indexContent < 0) { + indexContent = 0 + } + if (i === 0) { + firstOccur = indexContent + } } + }) + } else { + isMatch = false + } - // show search results - if (isMatch) { - const content = data.content.trim().replace(/<[^>]+>/g, '') - if (firstOccur >= 0) { - // cut out 130 characters - let start = firstOccur - 30 - let end = firstOccur + 100 + // show search results + if (isMatch) { + const content = data.content.trim().replace(/<[^>]+>/g, '') + if (firstOccur >= 0) { + // cut out 130 characters + // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30 + // let end = firstOccur + 50 > content.length ? content.length : firstOccur + 50 + let start = firstOccur - 30 + let end = firstOccur + 100 - if (start < 0) { - start = 0 - } + if (start < 0) { + start = 0 + } - if (start === 0) { - end = 100 - } + if (start === 0) { + end = 100 + } - if (end > content.length) { - end = content.length - } + if (end > content.length) { + end = content.length + } - let matchContent = content.substring(start, end) + let matchContent = content.substring(start, end) - // highlight all keywords - keywords.forEach(function (keyword) { - const regS = new RegExp(keyword, 'gi') - matchContent = matchContent.replace(regS, '' + keyword + '') - dataTitle = dataTitle.replace(regS, '' + keyword + '') - }) + // highlight all keywords + keywords.forEach(function (keyword) { + const regS = new RegExp(keyword, 'gi') + matchContent = matchContent.replace(regS, '' + keyword + '') + dataTitle = dataTitle.replace(regS, '' + keyword + '') + }) - str += '
' + dataTitle + '' - count += 1 + str += '
' + dataTitle + '' + count += 1 - if (dataContent !== '') { - str += '

' + matchContent + '...

' - } - } - str += '
' + if (dataContent !== '') { + str += '

' + matchContent + '...

' } - }) - if (count === 0) { - str += '
' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) + - '
' } str += '
' - $resultContent.innerHTML = str - window.pjax && window.pjax.refresh($resultContent) - }) + } }) + if (count === 0) { + str += '
' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) + + '
' + } + str += '
' + $resultContent.innerHTML = str + window.pjax && window.pjax.refresh($resultContent) + }) } }) diff --git a/source/js/utils.js b/source/js/utils.js index 3e52f1b1d..5b38b5ff3 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -72,20 +72,6 @@ const btf = { }) }, - initJustifiedGallery: function (selector) { - if (!(selector instanceof jQuery)) { - selector = $(selector) - } - selector.each(function (i, o) { - if ($(this).is(':visible')) { - $(this).justifiedGallery({ - rowHeight: 220, - margins: 4 - }) - } - }) - }, - diffDate: (d, more = false) => { const dateNow = new Date() const datePost = new Date(d) @@ -135,15 +121,11 @@ const btf = { } }, - scrollToDest: (pos, time) => { - if (pos < 0 || time < 0) { - return - } - - const currentPos = window.scrollY || window.screenTop + scrollToDest: (pos, time = 500) => { + const currentPos = window.pageYOffset if (currentPos > pos) pos = pos - 70 - if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) { + if ('scrollBehavior' in document.documentElement.style) { window.scrollTo({ top: pos, behavior: 'smooth' @@ -152,25 +134,19 @@ const btf = { } let start = null - time = time || 500 + pos = +pos window.requestAnimationFrame(function step (currentTime) { start = !start ? currentTime : start + const progress = 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) - } + } + if (progress < time) { + window.requestAnimationFrame(step) + } else { + window.scrollTo(0, pos) } }) }, @@ -226,14 +202,6 @@ const btf = { } }, - 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 => { @@ -265,14 +233,35 @@ const btf = { ele.forEach(i => { if (i.parentNode.tagName !== 'A') { const dataSrc = i.dataset.lazySrc || i.src - const dataCaption = i.alt || '' + const dataCaption = i.title || i.alt || '' btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc }) } }) - Fancybox.bind('[data-fancybox]', { - Hash: false - }) + if (!window.fancyboxRun) { + Fancybox.bind('[data-fancybox]', { + Hash: false, + Thumbs: { + autoStart: false + } + }) + window.fancyboxRun = true + } } + }, + + initJustifiedGallery: function (selector) { + selector.forEach(function (i) { + if (!btf.isHidden(i)) { + fjGallery(i, { + itemSelector: '.fj-gallery-item', + rowHeight: 220, + gutter: 4, + onJustify: function () { + this.$container.style.opacity = '1' + } + }) + } + }) } } From f7c50586ce28d7a132ff63fa8a70b3497aaefeee Mon Sep 17 00:00:00 2001 From: Jerry Date: Fri, 29 Oct 2021 14:40:10 +0800 Subject: [PATCH 11/16] =?UTF-8?q?breaking=20changes:=20algolia=20=E5=8D=87?= =?UTF-8?q?=E7=B4=9A=E8=87=B3=20v4=20feat:=20=20=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=8A=A0=E6=95=B8=E6=93=9A=E5=BA=AB?= =?UTF-8?q?=E5=8A=A0=E8=BC=89=E4=B8=AD=E5=92=8C=E6=90=9C=E7=B4=A2=E4=B8=AD?= =?UTF-8?q?=20loading=20=E9=A1=AF=E7=A4=BA=20feat:=20=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=BE=8E=E5=8C=96=E5=BE=8C,=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=9A=84=E9=A1=AF=E7=A4=BA=E6=95=88=E6=9E=9C=20closed?= =?UTF-8?q?=20#693=20closed=20#686=20improvement:=20UI=20=E5=BE=AE?= =?UTF-8?q?=E8=AA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 8 +- languages/default.yml | 22 ++-- languages/en.yml | 22 ++-- languages/zh-CN.yml | 22 ++-- languages/zh-TW.yml | 26 ++-- layout/includes/additional-js.pug | 5 +- layout/includes/head.pug | 5 +- layout/includes/head/config.pug | 8 +- layout/includes/header/nav.pug | 2 +- layout/includes/page/categories.pug | 6 +- layout/includes/page/default-page.pug | 2 - layout/includes/page/flink.pug | 3 - layout/includes/page/tags.pug | 3 - .../includes/third-party/search/algolia.pug | 21 +-- .../third-party/search/local-search.pug | 22 +++- layout/page.pug | 3 + package.json | 2 +- scripts/events/cdn.js | 8 +- scripts/events/init.js | 6 - scripts/events/stylus.js | 15 +++ source/css/_global/function.styl | 24 ++++ source/css/_highlight/highlight.styl | 8 +- source/css/_highlight/prismjs/index.styl | 2 +- source/css/_highlight/theme.styl | 8 +- source/css/_layout/aside.styl | 4 +- source/css/_layout/post.styl | 123 +++++------------- source/css/_layout/rightside.styl | 7 +- source/css/_page/categories.styl | 77 ++++------- source/css/_page/tags.styl | 4 + source/css/_search/algolia.styl | 47 +++---- source/css/_search/index.styl | 26 ++-- source/css/_search/local-search.styl | 3 + source/img/algolia.svg | 9 -- source/js/main.js | 6 +- source/js/search/algolia.js | 87 ++++++------- source/js/search/local-search.js | 16 ++- 36 files changed, 294 insertions(+), 368 deletions(-) create mode 100644 scripts/events/stylus.js delete mode 100644 source/img/algolia.svg diff --git a/_config.yml b/_config.yml index 256873238..cb4e7eaf2 100644 --- a/_config.yml +++ b/_config.yml @@ -845,8 +845,8 @@ CDN: # search local_search: algolia_js: - algolia_search: - algolia_search_css: + algolia_search_v4: + instantsearch_v4: # math mathjax: @@ -869,8 +869,8 @@ CDN: pangu: # photo - fancybox_css: - fancybox: + fancybox_css_v4: + fancybox_v4: medium_zoom: # snackbar diff --git a/languages/default.yml b/languages/default.yml index 2241abcbb..8cb00208e 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -34,16 +34,18 @@ post: recommend: Related Articles edit: Edited on -search: Search -algolia_search: - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: '${hits} results found in ${time} ms' - -local_search: - label: Local search - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}" +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' + + local_search: + label: Local search + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" pagination: prev: Previous Post diff --git a/languages/en.yml b/languages/en.yml index 22a55dbf6..dc31ed7f4 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -34,16 +34,18 @@ post: recommend: Related Articles edit: Edited on -search: Search -algolia_search: - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: '${hits} results found in ${time} ms' - -local_search: - label: Local search - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}" +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' + + local_search: + label: Local search + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" pagination: prev: Previous Post diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index a0539a8c4..f3460b197 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -35,16 +35,18 @@ post: recommend: 相关推荐 edit: 编辑 -search: 搜索 -algolia_search: - input_placeholder: 搜索文章 - hits_empty: '找不到您查询的内容：${query}' - hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' - -local_search: - label: 本地搜索 - input_placeholder: 搜索文章 - hits_empty: '找不到您查询的内容：${query}' +search: + title: 搜索 + load_data: 数据库加载中 + algolia_search: + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' + hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' + + local_search: + label: 本地搜索 + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' pagination: prev: 上一篇 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index cf259227b..1019eb7f2 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -35,16 +35,18 @@ post: recommend: 相關推薦 edit: 編輯 -search: 搜尋 -algolia_search: - input_placeholder: 搜尋文章 - hits_empty: '找不到您查詢的內容：${query}' - hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' - -local_search: - label: 本地搜尋 - input_placeholder: 搜尋文章 - hits_empty: '找不到您查詢的內容：${query}' +search: + title: 搜尋 + load_data: 資料庫載入中 + algolia_search: + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' + hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' + + local_search: + label: 本地搜尋 + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' pagination: prev: 上一篇 @@ -65,7 +67,7 @@ aside: headline: 網站資訊 article_name: 文章數目 runtime: - name: 已運行時間 + name: 已執行時間 unit: 天 last_push_date: name: 最後更新時間 @@ -80,7 +82,7 @@ aside: zero: 沒有評論 image: 圖片 link: 連結 - code: 代碼 + code: 程式碼 card_toc: 目錄 date_suffix: diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 56d0f2972..79fc8b46e 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -8,7 +8,7 @@ div if theme.medium_zoom script(src=url_for(theme.CDN.medium_zoom)) else if theme.fancybox - script(src=url_for(theme.CDN.fancybox)) + script(src=url_for(theme.CDN.fancybox_v4)) if theme.instantpage script(src=url_for(theme.CDN.instantpage), type='module') @@ -24,7 +24,8 @@ div //- search if theme.algolia_search.enable - script(src=url_for(theme.CDN.algolia_search)) + script(src=url_for(theme.CDN.algolia_search_v4)) + script(src=url_for(theme.CDN.instantsearch_v4)) script(src=url_for(theme.CDN.algolia_js)) else if theme.local_search.enable script(src=url_for(theme.CDN.local_search)) diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 37078d874..5263e3527 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -52,11 +52,8 @@ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload= if (theme.snackbar && theme.snackbar.enable) 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) media="print" onload="this.media='all'") - if theme.fancybox - link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'") + link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css_v4) media="print" onload="this.media='all'") //- google_adsense !=partial('includes/head/google_adsense', {}, {cache: true}) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 1f1974ceb..5e15f0e4a 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -9,9 +9,9 @@ hits: theme.algolia_search.hits, // search languages languages: { - input_placeholder: _p("algolia_search.input_placeholder"), - hits_empty: _p("algolia_search.hits_empty"), - hits_stats: _p("algolia_search.hits_stats") + input_placeholder: _p("search.algolia_search.input_placeholder"), + hits_empty: _p("search.algolia_search.hits_empty"), + hits_stats: _p("search.algolia_search.hits_stats"), } }) } @@ -22,7 +22,7 @@ path: config.search.path, languages: { // search languages - hits_empty: _p("local_search.hits_empty") + hits_empty: _p("search.local_search.hits_empty"), } }) } diff --git a/layout/includes/header/nav.pug b/layout/includes/header/nav.pug index 2b4d3dac8..7b516e990 100644 --- a/layout/includes/header/nav.pug +++ b/layout/includes/header/nav.pug @@ -7,7 +7,7 @@ nav#nav #search-button a.site-page.social-icon.search i.fas.fa-search.fa-fw - span=' '+_p('search') + span=' '+_p('search.title') !=partial('includes/header/menu_item', {}, {cache: true}) #toggle-menu diff --git a/layout/includes/page/categories.pug b/layout/includes/page/categories.pug index dbdc98063..79153c8d7 100644 --- a/layout/includes/page/categories.pug +++ b/layout/includes/page/categories.pug @@ -1,5 +1 @@ -.category-lists - .category-title.is-center= _p('page.category') - | - - span.category-amount= site.categories.length - div!= list_categories() \ No newline at end of file +.category-lists!= list_categories() \ No newline at end of file diff --git a/layout/includes/page/default-page.pug b/layout/includes/page/default-page.pug index 2d9cdda6e..e7057f73a 100644 --- a/layout/includes/page/default-page.pug +++ b/layout/includes/page/default-page.pug @@ -1,4 +1,2 @@ #article-container - if top_img === false - h1.page-title= page.title != page.content \ No newline at end of file diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index c986f592b..f6c106381 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -1,7 +1,4 @@ #article-container - if top_img === false - h1.page-title= page.title - .flink if site.data.link each i in site.data.link diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug index 4d57e4374..8caac11b4 100644 --- a/layout/includes/page/tags.pug +++ b/layout/includes/page/tags.pug @@ -1,5 +1,2 @@ -.tag-cloud-title.is-center= _p('page.tag') - | - - span.tag-cloud-amount= site.tags.length .tag-cloud-list.is-center !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'}) \ No newline at end of file diff --git a/layout/includes/third-party/search/algolia.pug b/layout/includes/third-party/search/algolia.pug index 6d22886b1..e2d427e65 100644 --- a/layout/includes/third-party/search/algolia.pug +++ b/layout/includes/third-party/search/algolia.pug @@ -1,13 +1,16 @@ #algolia-search .search-dialog - #algolia-search-title.search-dialog__title Algolia - #algolia-input-panel + nav.search-nav + span.search-dialog-title= 'Algolia' + button.search-close-button + i.fas.fa-times + + .search-wrap #algolia-search-input - hr - #algolia-search-results - #algolia-hits - #algolia-pagination - #algolia-stats - span.search-close-button - i.fas.fa-times + hr + #algolia-search-results + #algolia-hits + #algolia-pagination + #algolia-stats + #search-mask diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug index dec1569d6..4aa6ff398 100644 --- a/layout/includes/third-party/search/local-search.pug +++ b/layout/includes/third-party/search/local-search.pug @@ -1,12 +1,20 @@ #local-search .search-dialog - #local-search-title.search-dialog__title=_p("local_search.label") - #local-input-panel + nav.search-nav + span.search-dialog-title=_p("search.local_search.label") + span#loading-status + button.search-close-button + i.fas.fa-times + + #loading-database.is-center + i.fas.fa-spinner.fa-pulse + span= ' ' + _p("search.load_data") + + .search-wrap #local-search-input .local-search-box - input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input - hr - #local-search-results - span.search-close-button - i.fas.fa-times + input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input + hr + #local-search-results + #search-mask \ No newline at end of file diff --git a/layout/page.pug b/layout/page.pug index 2fb8b7ebb..6c810ef7e 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -2,6 +2,9 @@ extends includes/layout.pug block content #page + if top_img === false + h1.page-title= page.title + case page.type when 'tags' include includes/page/tags.pug diff --git a/package.json b/package.json index ee1f52886..1a32584db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b8", + "version": "4.0.0-b9", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js index 0f038c469..ea564b2d0 100644 --- a/scripts/events/cdn.js +++ b/scripts/events/cdn.js @@ -33,8 +33,8 @@ hexo.extend.filter.register('before_generate', () => { // search local_search: '/js/search/local-search.js', algolia_js: '/js/search/algolia.js', - algolia_search: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js', - algolia_search_css: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css', + algolia_search_v4: 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js', + instantsearch_v4: 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js', // math mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js', @@ -57,8 +57,8 @@ hexo.extend.filter.register('before_generate', () => { pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js', // photo - fancybox_css: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css', - fancybox: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js', + fancybox_css_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css', + fancybox_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js', medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js', // snackbar diff --git a/scripts/events/init.js b/scripts/events/init.js index 76f78ef5f..b2703197e 100644 --- a/scripts/events/init.js +++ b/scripts/events/init.js @@ -18,10 +18,4 @@ hexo.extend.filter.register('before_generate', () => { process.exit(-1) } } - - // let stylus to get the hexo highlight config - const themeConfig = hexo.theme.config - const hexoConfig = hexo.config - themeConfig.highlight_settings = hexoConfig.highlight - themeConfig.prismjs_settings = hexoConfig.prismjs }) diff --git a/scripts/events/stylus.js b/scripts/events/stylus.js new file mode 100644 index 000000000..4b95538dc --- /dev/null +++ b/scripts/events/stylus.js @@ -0,0 +1,15 @@ +/** + * stylus + */ + +'use strict' + +hexo.extend.filter.register('stylus:renderer', function (style) { + const { highlight, prismjs } = hexo.config + style + .define('$highlight_enable', highlight && highlight.enable) + .define('$highlight_line_number', highlight && highlight.line_number) + .define('$prismjs_enable', prismjs && prismjs.enable) + .define('$prismjs_line_number', prismjs && prismjs.line_number) + // .import(this.source_dir.replace(/\\/g, '/') + '_data/css/*') +}) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 184b0e72d..741b35f82 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -50,6 +50,30 @@ transition: all .6s, filter 375ms ease-in .2s object-fit: cover +.list-beauty + list-style: none + + li + position: relative + padding 0.12em 0.4em 0.12em 1.4em + + &:hover + &:before + border-color: var(--pseudo-hover) + + &:before + position: absolute + top: .67em + left: 0 + width: w = .43em + height: h = w + border: .5 * w solid $light-blue + border-radius: w + background: transparent + content: '' + cursor: pointer + transition: all .3s ease-out + maxWidth600() @media screen and (max-width: 600px) {block} diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 4be710315..427128884 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -1,7 +1,5 @@ $highlight_theme = hexo-config('highlight_theme') -$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable') -$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable') -wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap') +wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap') @require 'theme' @@ -15,10 +13,10 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w --hlscrollbar-bg: $highlight-scrollbar --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9)) -if $highlighEnable +if $highlight_enable @require 'highlight/index' -if $prismjsEnable +if $prismjs_enable @require 'prismjs/index' $code-block diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index f0be1d5dc..0593143a6 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -1,4 +1,4 @@ -if hexo-fonfig('prismjs_settings.line_number') +if $prismjs_line_number @require 'line-number' if $highlight_theme != false diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index 58fc330cf..63393dbea 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -13,7 +13,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac') } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = #969896 $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -39,7 +39,7 @@ if $highlight_theme == 'pale night' } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = #676E95 $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -65,7 +65,7 @@ if $highlight_theme == 'ocean' } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = rgba(101, 115, 126, .8) $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -92,7 +92,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light') } $highlight-scrollbar = darken($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = rgba(149, 165, 166, .8) $highlight-red = #E53935 $highlight-orange = #F76D47 diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 76b6e2532..ba6e0ff98 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -258,7 +258,8 @@ .toc-content clear: both - overflow-y: auto + overflow-y: scroll + overflow-y: overlay max-height: calc(100vh - 120px) +maxWidth900() @@ -288,6 +289,7 @@ .toc-link display: block + padding-right: 8px padding-left: 6px border-left: 3px solid transparent color: var(--toc-link-color) diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 482cbc2b2..a082f33de 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,9 +1,9 @@ beautify() headStyle(fontsize) - padding-left: unit(fontsize + .4, 'px') + padding-left: unit(fontsize + 12, 'px') &:before - margin-left: unit((-(fontsize + 4)), 'px') + margin-left: unit((-(fontsize + 6)), 'px') font-size: unit(fontsize, 'px') &:hover @@ -50,93 +50,21 @@ beautify() ol, ul - margin-top: 8px - padding: 0 0 0 16px - list-style: none - counter-reset: li - - +maxWidth768() - padding: 0 0 0 8px - p - margin: 0 0 10px - - ol, - ul - padding-left: 12px - - +maxWidth768() - padding-left: 4px - - li - &:not(.tab) - position: relative - margin: 4px 0 - - &:hover - &:before - transform: rotate(360deg) + margin: 0 0 8px - &:before - position: absolute - top: 0 - left: 0 - background: $light-blue - color: $white - cursor: pointer - transition: all .3s ease-out - - ol - > li - &:not(.tab) - padding: .2em .2em .2em 1.8em - - &:before - margin-top: .65em - width: w = 1.45em - height: h = w - border-radius: .5 * w - content: counter(li) - counter-increment: li - text-align: center - font-size: .85em - line-height: h + li + &::marker + color: $light-blue + font-weight: 600 + font-size: 1.05em - ul - > li:not(.tab) - padding: .2em .2em .2em 1.4em - - &:hover - &:before - border-color: var(--pseudo-hover) - - &:before - $w = .42em - top: .78em - width: w = $w - height: h = w - border: .5 * w solid $light-blue - border-radius: w - background: transparent - content: '' - line-height: h - -no-beautify() - ol, - ul - margin-top: 8px - - p - margin: 0 0 10px - - ol, - ul - padding-left: 10px + &:hover + &::marker + color: var(--pseudo-hover) - li - position: relative - margin: 6px 0 - padding-left: 6px + ul > li + list-style-type: circle #article-container word-wrap: break-word @@ -152,7 +80,7 @@ no-beautify() display: block margin: 0 auto 20px max-width: 100% - transition: filter 375ms ease-in 0.2s + transition: filter 375ms ease-in .2s p margin: 0 0 16px @@ -174,15 +102,24 @@ no-beautify() font-family: Monaco, 'Ubuntu Mono', monospace line-height: 1em - if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site' - beautify() - else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post' - no-beautify() + ol, + ul + ol, + ul + padding-left: 20px + + li + margin: 4px 0 + + p + margin: 0 0 8px - &.post-content + if hexo-config('beautify.enable') + if hexo-config('beautify.field') == 'site' beautify() - else - no-beautify() + else if hexo-config('beautify.field') == 'post' + &.post-content + beautify() > :last-child margin-bottom: 0 !important diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 517f1346e..d9e338c78 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -18,7 +18,7 @@ & > a display: block margin-bottom: 5px - width: w = 38px + width: w = 35px height: w border-radius: 5px background-color: var(--btn-bg) @@ -30,11 +30,6 @@ &:hover background-color: var(--btn-hover-color) - +maxWidth768() - width: w = 34px - height: w - line-height: w - #mobile-toc-button display: none diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index ab1810896..8b80107d5 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -1,62 +1,37 @@ -#page - .category-lists - padding: 20px 0 30px +.category-lists + .category-title + font-size: 2.57em +maxWidth768() - padding: 0 + font-size: 2em - .category-title - font-size: 2.57em + .category-list + margin-bottom: 0 - +maxWidth768() - font-size: 2em + a + color: var(--font-color) - .category-list - a - color: var(--font-color) + &:hover + color: $text-hover - &:hover - color: $text-hover + .category-list-count + margin-left: 8px + color: $theme-meta-color - .category-list-count - margin-left: 8px - color: $theme-meta-color + &:before + content: '(' - &:before - content: '(' + &:after + content: ')' - &:after - content: ')' + ul + padding: 0 0 0 20px + @extend .list-beauty ul - margin-top: 8px - padding: 0 0 0 20px - list-style: none - counter-reset: li - - ul - padding-left: 4px - - li - position: relative - margin: 6px 0 - padding: .12em .4em .12em 1.4em - - &:before - position: absolute - left: 0 - cursor: pointer - transition: all .3s ease-out - $w = .43em - top: .7em - width: w = $w - height: h = w - border: .5 * w solid $light-blue - border-radius: w - background: transparent - content: '' - // line-height: h - - &:hover - &:before - border-color: var(--pseudo-hover) + padding-left: 4px + + li + position: relative + margin: 6px 0 + padding: .12em .4em .12em 1.4em diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl index ee3e9320e..bce33ae7a 100644 --- a/source/css/_page/tags.styl +++ b/source/css/_page/tags.styl @@ -17,3 +17,7 @@ +maxWidth768() font-size: 2em + +h1.page-title + & + .tag-cloud-list + text-align: left diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index b96ae9242..c90c0a0e3 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -1,69 +1,52 @@ #algolia-search .search-dialog - .ais-search-box - margin: 0 auto - max-width: 100% - width: 100% - + .ais-SearchBox input padding: 5px 14px + width: 100% outline: none border: 2px solid $search-color border-radius: 40px background: var(--search-bg) color: var(--search-input-color) - .ais-hits--item.algolia-hit-item - position: relative + .ais-Hits-list padding-left: 24px - - &:hover - &:before - border-color: var(--pseudo-hover) - - &:before - $w = .5em - position: absolute - top: .53em - left: 0 - width: w = $w - height: h = w - border: 3px solid $search-color - border-radius: w - background: transparent - content: '' - line-height: h - transition: all .2s ease-in-out + @extend .list-beauty a - display: block color: var(--search-result-title) - cursor: pointer &:hover color: $search-color - em + mark + background: transparent color: $search-keyword-highlight font-weight: bold - .ais-pagination.pagination + .ais-Pagination margin: 16px 0 0 padding: 0 text-align: center - .ais-pagination--item + .ais-Pagination-list + padding: 0 + list-style: none + + .ais-Pagination-item + display: inline margin: 0 4px padding: 0 - a + .ais-Pagination-link display: inline-block min-width: 24px height: 24px text-align: center line-height: 24px - .ais-pagination--item.current + .ais-Pagination-item--selected a background: $theme-paginator-color color: #eee diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 9a5886284..cac6278ac 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -22,24 +22,22 @@ hr margin: 20px auto - span.search-close-button - position: absolute - top: 16px - right: 20px - color: $grey + .search-nav + margin: 0 0 14px + color: $search-color font-size: 1.4em line-height: 1 - cursor: pointer - transition: color .2s ease-in-out - &:hover - color: $search-color + .search-dialog-title + margin-right: 10px - &__title - padding: 0 0 14px - color: $search-color - font-size: 1.4em - line-height: 1 + .search-close-button + float: right + color: $grey + transition: color .2s ease-in-out + + &:hover + color: $search-color #search-mask position: fixed diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index 455846ca6..f67d87aa4 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -15,6 +15,9 @@ color: var(--search-input-color) -webkit-appearance: none + .search-wrap + display: none + .local-search__hit-item position: relative padding-left: 24px diff --git a/source/img/algolia.svg b/source/img/algolia.svg deleted file mode 100644 index 470242341..000000000 --- a/source/img/algolia.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/source/js/main.js b/source/js/main.js index bd3f14f88..e0625b4d4 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,5 +1,6 @@ document.addEventListener('DOMContentLoaded', function () { - let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen + let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex + let mobileSidebarOpen = false const adjustMenu = (init) => { if (init) { @@ -43,6 +44,7 @@ document.addEventListener('DOMContentLoaded', function () { $body.style.paddingRight = '' btf.fadeOut(document.getElementById('menu-mask'), 0.5) document.getElementById('sidebar-menus').classList.remove('open') + mobileSidebarOpen = false } } @@ -237,7 +239,7 @@ document.addEventListener('DOMContentLoaded', function () { }) if (window.fjGallery) { - btf.initJustifiedGallery(ele) + setTimeout(() => { btf.initJustifiedGallery(ele) }, 100) return } diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index d1de45fb7..83353a77a 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -1,8 +1,10 @@ window.addEventListener('load', () => { const openSearch = () => { - document.body.style.cssText = 'width: 100%;overflow: hidden' + const bodyStyle = document.body.style + bodyStyle.width = '100%' + bodyStyle.overflow = 'hidden' document.querySelector('#algolia-search .search-dialog').style.display = 'block' - document.querySelector('#algolia-search .ais-search-box--input').focus() + document.querySelector('#algolia-search .ais-SearchBox-input').focus() btf.fadeIn(document.getElementById('search-mask'), 0.5) // shortcut: ESC document.addEventListener('keydown', function f (event) { @@ -14,7 +16,9 @@ window.addEventListener('load', () => { } const closeSearch = () => { - document.body.style.cssText = "width: '';overflow: ''" + const bodyStyle = document.body.style + bodyStyle.width = '' + bodyStyle.overflow = '' const $searchDialog = document.querySelector('#algolia-search .search-dialog') $searchDialog.style.animation = 'search_close .5s' setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500) @@ -40,41 +44,38 @@ window.addEventListener('load', () => { return console.error('Algolia setting is invalid!') } + const searchClient = window.algoliasearch(algolia.appId, algolia.apiKey) const search = instantsearch({ - appId: algolia.appId, - apiKey: algolia.apiKey, indexName: algolia.indexName, - searchParameters: { - hitsPerPage: algolia.hits.per_page || 10 - }, - searchFunction: function (helper) { - const searchInput = document.querySelector('#algolia-search-input input') - - if (searchInput.value) { - helper.search() - } - } + searchClient }) - search.addWidget( + search.addWidgets([ + instantsearch.widgets.configure({ + hitsPerPage: 5 + }) + ]) + + search.addWidgets([ instantsearch.widgets.searchBox({ container: '#algolia-search-input', - reset: false, - magnifier: false, - placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder + showReset: false, + showSubmit: false, + placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder, + showLoadingIndicator: true }) - ) - search.addWidget( + ]) + + search.addWidgets([ instantsearch.widgets.hits({ container: '#algolia-hits', templates: { item: function (data) { const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path) - return ( - '' + - data._highlightResult.title.value + - '' - ) + return ` + + ${data._highlightResult.title.value || 'no-title'} + ` }, empty: function (data) { return ( @@ -83,53 +84,39 @@ window.addEventListener('load', () => { '
' ) } - }, - cssClasses: { - item: 'algolia-hit-item' } }) - ) + ]) - search.addWidget( + search.addWidgets([ instantsearch.widgets.stats({ container: '#algolia-stats', templates: { - body: function (data) { + text: function (data) { + const icon = '' const stats = GLOBAL_CONFIG.algolia.languages.hits_stats .replace(/\$\{hits}/, data.nbHits) .replace(/\$\{time}/, data.processingTimeMS) return ( - '
' + - stats + - '' + `
${stats}` ) } } }) - ) + ]) - search.addWidget( + search.addWidgets([ instantsearch.widgets.pagination({ container: '#algolia-pagination', - scrollTo: false, - showFirstLast: false, - labels: { + totalPages: 5, + templates: { first: '', last: '', previous: '', next: '' - }, - cssClasses: { - root: 'pagination', - item: 'pagination-item', - link: 'page-number', - active: 'current', - disabled: 'disabled-item' } }) - ) + ]) search.start() window.pjax && search.on('render', () => { diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 8da8a7357..d1df43db5 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -59,22 +59,31 @@ window.addEventListener('load', () => { } }) } + if (response.ok) { + const $loadDataItem = document.getElementById('loading-database') + $loadDataItem.nextElementSibling.style.display = 'block' + $loadDataItem.remove() + } + const $input = document.querySelector('#local-search-input input') const $resultContent = document.getElementById('local-search-results') + const $loadingStatus = document.getElementById('loading-status') $input.addEventListener('input', function () { - let str = '
' const keywords = this.value.trim().toLowerCase().split(/[\s]+/) + if (keywords[0] !== '') $loadingStatus.innerHTML = '' + $resultContent.innerHTML = '' + let str = '
' if (this.value.trim().length <= 0) return let count = 0 // perform local searching datas.forEach(function (data) { let isMatch = true if (!data.title || data.title.trim() === '') { - data.title = 'Untitled' + data.title = '' } let dataTitle = data.title.trim().toLowerCase() - const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() + const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : '' const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url let indexTitle = -1 let indexContent = -1 @@ -146,6 +155,7 @@ window.addEventListener('load', () => { } str += '
' $resultContent.innerHTML = str + if (keywords[0] !== '') $loadingStatus.innerHTML = '' window.pjax && window.pjax.refresh($resultContent) }) } From ffeab5e20cb76cde25b704df7f12ff0106a41bec Mon Sep 17 00:00:00 2001 From: Jerry Date: Sun, 14 Nov 2021 17:50:11 +0800 Subject: [PATCH 12/16] =?UTF-8?q?breaking=20changes:=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=8D=9A=E5=A4=A9api=20breaking=20changes:=20=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=20waline=20=E7=9A=84=20avatar=20=E5=92=8C=20avatar=20?= =?UTF-8?q?cdn=20=E9=85=8D=E7=BD=AE=20feat:=20anchor=20=E4=B8=8D=E5=86=8D?= =?UTF-8?q?=E9=99=90=E5=88=B6=20post=20=E9=A0=81=E9=96=8B=E5=95=9F?= =?UTF-8?q?=EF=BC=8C=E5=8F=AF=E4=BB=A5=E5=9C=A8=E4=BB=BB=E4=BD=95=E9=A0=81?= =?UTF-8?q?=E9=9D=A2=E9=96=8B=E5=95=9F=20feat:=20=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E6=A8=99=E9=A1=8C=E6=94=AF=E6=8C=81=E9=BB=9E=E6=93=8A=E8=B7=B3?= =?UTF-8?q?=E8=BD=89=E5=88=B0=E6=AD=A4=E6=A8=99=E9=A1=8C=E9=96=8B=E5=A7=8B?= =?UTF-8?q?=E9=96=B2=E8=AE=80=20closed=20#653=20feat:=20toc=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E8=A8=AD=E7=BD=AE=E5=85=A8=E9=83=A8=E5=B1=95=E9=96=8B?= =?UTF-8?q?=20closed=20#709=20feat:=20=E5=A2=9E=E5=8A=A0=20=E6=96=B0?= =?UTF-8?q?=E7=9A=84=E8=A9=95=E8=AB=96=E7=B3=BB=E7=B5=B1=20giscus=20feat:?= =?UTF-8?q?=20=E6=94=AF=E6=8C=81=E6=96=B0=E7=9A=84=E8=A9=95=E8=AB=96?= =?UTF-8?q?=E5=90=8D=E5=AF=AB=E6=B3=95=EF=BC=8C=E4=B8=BB=E9=A1=8C=E6=9C=83?= =?UTF-8?q?=E8=99=95=E7=90=86=E8=A9=95=E8=AB=96=E5=90=8D=E5=AD=97=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=E5=AF=AB=EF=BC=8C=E8=88=8A=E7=9A=84=E6=9C=83=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=20feat:=20=E5=8F=8B=E6=83=85=E9=8F=88=E6=8E=A5?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0=20fetch=20url=20=E7=8D=B2?= =?UTF-8?q?=E5=8F=96=20improvement:=20=E9=BC=A0=E6=A8=99=E7=A7=BB=E5=88=B0?= =?UTF-8?q?=E6=9C=80=E6=96=B0=E8=A9=95=E8=AB=96=E5=85=A7=E5=AE=B9=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20title=20=E9=A1=AF=E7=A4=BA=20fix:=20?= =?UTF-8?q?=E4=BF=AE=E5=BE=A9=20rightside=20=E9=81=AE=E6=93=8B=E5=85=A7?= =?UTF-8?q?=E5=AE=B9=EF=BC=8C=E5=B0=8E=E8=87=B4=E5=85=A7=E5=AE=B9=E7=84=A1?= =?UTF-8?q?=E6=B3=95=E9=BB=9E=E6=93=8A=E7=9A=84=20bug=20fix:=20=E4=BF=AE?= =?UTF-8?q?=E5=BE=A9=20mermaid=20=E5=9C=A8=E6=9F=90=E4=BA=9B=E9=A0=81?= =?UTF-8?q?=E9=9D=A2=EF=BC=88=E6=9C=89=E5=85=83=E7=B4=A0=20id=20=E7=82=BA?= =?UTF-8?q?=20mermaid=20=E6=99=82=EF=BC=89=20=E6=9C=83=E7=84=A1=E6=B3=95?= =?UTF-8?q?=E5=8A=A0=E8=BC=89=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=20=E6=90=9C=E7=B4=A2=E6=A1=86=E4=B8=8D=E6=9C=83=E8=87=AA?= =?UTF-8?q?=E5=8B=95=20focus=20=E7=9A=84=20bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- README_CN.md | 4 +- _config.yml | 29 +-- layout/includes/head/config.pug | 2 +- layout/includes/page/flink.pug | 67 +++++-- .../includes/third-party/comments/giscus.pug | 49 +++++ .../includes/third-party/comments/index.pug | 2 + layout/includes/third-party/comments/js.pug | 2 + .../includes/third-party/comments/waline.pug | 6 +- layout/includes/third-party/math/mermaid.pug | 3 +- .../newest-comments/disqus-comment.pug | 2 +- .../newest-comments/github-issues.pug | 2 +- .../newest-comments/twikoo-comment.pug | 2 +- .../third-party/newest-comments/valine.pug | 2 +- .../third-party/newest-comments/waline.pug | 11 +- layout/includes/third-party/subtitle.pug | 36 +--- layout/includes/widget/card_post_toc.pug | 6 +- package.json | 6 +- scripts/events/{cdn.js => config.js} | 23 ++- scripts/tag/timeline.js | 2 - source/css/_global/function.styl | 4 +- source/css/_global/index.styl | 1 + source/css/_layout/aside.styl | 17 +- source/css/_layout/post.styl | 28 ++- source/css/_layout/rightside.styl | 22 ++- source/css/_search/index.styl | 1 - source/js/main.js | 184 +++++++++--------- source/js/search/algolia.js | 13 +- source/js/search/local-search.js | 24 +-- source/js/utils.js | 36 ++-- 30 files changed, 364 insertions(+), 226 deletions(-) create mode 100644 layout/includes/third-party/comments/giscus.pug rename scripts/events/{cdn.js => config.js} (91%) diff --git a/README.md b/README.md index 9179f3af3..ef8372c10 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) -Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [MYW](https://immyw.com/) +Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) @@ -79,7 +79,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/Waline/Utterances/Facebook Comments/Twikoo) +- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus) - [x] Multiple Comment System Support - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp) - [x] Web analytics diff --git a/README_CN.md b/README_CN.md index e680844f6..5d7e0bb4a 100644 --- a/README_CN.md +++ b/README_CN.md @@ -14,7 +14,7 @@ ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) -預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [MYW](https://immyw.com/) +預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) @@ -79,7 +79,7 @@ theme: butterfly - [x] 顯示相關文章 - [x] 過期文章提醒 - [x] 多種分享系統（AddThis/Sharejs/Addtoany） -- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo） +- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus） - [x] 支持雙評論部署 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp） - [x] 多種分析系統 diff --git a/_config.yml b/_config.yml index cb4e7eaf2..33580e081 100644 --- a/_config.yml +++ b/_config.yml @@ -171,6 +171,7 @@ toc: post: true page: false number: true + expand: false style_simple: false # for post post_copyright: @@ -253,10 +254,7 @@ addtoany: comments: # Up to two comments system, the first will be shown as default - # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo - use: - # - Valine - # - Disqus + use: # Valine,Disqus text: true # Display the comment name next to the button # lazyload: The comment system will be load when comment element enters the browser's viewport. # If you set it to true, the comment count will be invalid @@ -308,8 +306,6 @@ valine: # https://waline.js.org/ waline: serverURL: # Waline server address url - avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image - avatarCDN: # Gravatar CDN baseURL bg: # waline background visitor: false option: @@ -341,6 +337,17 @@ twikoo: visitor: false option: +# Giscus +# https://giscus.app/ +giscus: + repo: + repo_id: + category_id: + theme: + light: light + dark: dark + option: + # Chat Services # -------------------------------------- @@ -583,12 +590,11 @@ subtitle: effect: true # loop (循環打字) loop: true - # source調用第三方服務 + # source 調用第三方服務 # source: false 關閉調用 - # source: 1 調用搏天 api 的隨機語錄（簡體） - # source: 2 調用一言網的一句話（簡體） - # source: 3 調用一句網（簡體） - # source: 4 調用今日詩詞（簡體） + # source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/ + # source: 2 調用一句網（簡體） http://yijuzhan.com/ + # source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/ # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 @@ -836,6 +842,7 @@ CDN: utterances: twikoo: waline: + giscus: # share addtoany: diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 5e15f0e4a..49fe4fe47 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -119,5 +119,5 @@ script. }, isPhotoFigcaption: !{theme.photofigcaption}, islazyload: !{theme.lazyload.enable}, - isanchor: !{theme.anchor} + isAnchor: !{theme.anchor} } diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index f6c106381..e82186d8d 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -1,18 +1,57 @@ #article-container .flink - if site.data.link - each i in site.data.link - if i.class_name - h2!= i.class_name - if i.class_desc - .flink-desc!=i.class_desc - .flink-list - each item in i.link_list - .flink-list-item - a(href=url_for(item.link) title=item.name target="_blank") - .flink-item-icon - img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) - .flink-item-name= item.name - .flink-item-desc(title=item.descr)= item.descr + if page.flink_url + script. + (()=>{ + const replaceSymbol = (str) => { + return str.replace(/[\p{P}\p{S}]/gu, '-') + } + + let result = '' + fetch('!{url_for(page.flink_url)}') + .then(response => response.json()) + .then(str => { + for(let i = 0; i < str.length; i++){ + const replaceClassName = replaceSymbol(str[i].class_name) + const className = str[i].class_name ? `

${str[i].class_name}

` : '' + const classDesc = str[i].class_desc ? `
${str[i].class_desc}
` : '' + + let listResult = '' + const lists = str[i].link_list + for(let j = 0; j < lists.length; j++){ + listResult += ` +
+ +
+ ${lists[j].name} +
+
${lists[j].name}
+
${lists[j].descr}
+ +
` + } + + result += `${className}${classDesc}
${listResult}
` + } + + document.querySelector('.flink').insertAdjacentHTML('afterbegin', result) + }) + })() + + else + if site.data.link + each i in site.data.link + if i.class_name + !=markdown(`## ${i.class_name}`) + if i.class_desc + .flink-desc!=i.class_desc + .flink-list + each item in i.link_list + .flink-list-item + a(href=url_for(item.link) title=item.name target="_blank") + .flink-item-icon + img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) + .flink-item-name= item.name + .flink-item-desc(title=item.descr)= item.descr != page.content diff --git a/layout/includes/third-party/comments/giscus.pug b/layout/includes/third-party/comments/giscus.pug new file mode 100644 index 000000000..b09bf5a75 --- /dev/null +++ b/layout/includes/third-party/comments/giscus.pug @@ -0,0 +1,49 @@ +- const { repo, repo_id, category_id, option } = theme.giscus +- const themes = theme.giscus.theme +script. + function loadGiscus () { + let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}' + + const config = Object.assign({ + src: '!{theme.CDN.giscus}', + 'data-repo': '!{repo}', + 'data-repo-id': '!{repo_id}', + 'data-category-id': '!{category_id}', + 'data-mapping': 'pathname', + 'data-theme': nowTheme, + 'data-reactions-enabled': '1', + crossorigin: 'anonymous', + async: true + },!{JSON.stringify(option)}) + + let ele = document.createElement('script') + for (let key in config) { + ele.setAttribute(key, config[key]) + } + document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele) + } + + function changeGiscusTheme () { + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}' + + function sendMessage(message) { + const iframe = document.querySelector('iframe.giscus-frame'); + if (!iframe) return; + iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app'); + } + + sendMessage({ + setConfig: { + theme: theme + } + }); + } + + if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus) + else loadGiscus() + } else { + function loadOtherComment () { + loadGiscus() + } + } diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug index 3bab3bb21..6c725d651 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/layout/includes/third-party/comments/index.pug @@ -33,6 +33,8 @@ hr #twikoo-wrap when 'Waline' #waline-wrap + when 'Giscus' + #giscus-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/js.pug b/layout/includes/third-party/comments/js.pug index 0b0445121..1acd8d329 100644 --- a/layout/includes/third-party/comments/js.pug +++ b/layout/includes/third-party/comments/js.pug @@ -16,5 +16,7 @@ each name in theme.comments.use !=partial('includes/third-party/comments/twikoo', {}, {cache: true}) when 'Waline' !=partial('includes/third-party/comments/waline', {}, {cache: true}) + when 'Giscus' + !=partial('includes/third-party/comments/giscus', {}, {cache: true}) when 'Facebook Comments' !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true}) diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug index 2407e4a7c..cfd05c258 100644 --- a/layout/includes/third-party/comments/waline.pug +++ b/layout/includes/third-party/comments/waline.pug @@ -1,4 +1,4 @@ -- const { serverURL, avatar, avatarCDN, visitor, option } = theme.waline +- const { serverURL, visitor, option } = theme.waline script. function loadWaline () { @@ -6,15 +6,13 @@ script. const waline = new Waline(Object.assign({ el: '#waline-wrap', serverURL: '!{serverURL}', - avatar: '#{avatar}', - avatarCDN: '!{avatarCDN || "https://sdn.geekzu.org/avatar/"}', path: location.pathname, visitor: !{visitor}, dark: 'html[data-theme="dark"]' }, !{JSON.stringify(option)})) } - if (typeof Waline === 'function') initWaline() + if (typeof Waline === 'function') initWaline() else getScript('!{url_for(theme.CDN.waline)}').then(initWaline) } diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index 5716b30a2..31dda5e37 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/layout/includes/third-party/math/mermaid.pug @@ -3,6 +3,7 @@ script. const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap') if ($mermaidWrap.length) { window.runMermaid = () => { + window.loadMermaid = true const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}' Array.from($mermaidWrap).forEach((item, index) => { @@ -17,7 +18,7 @@ script. } const loadMermaid = () => { - window.mermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid) + window.loadMermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid) } window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug index 896faab29..5b95e74c7 100644 --- a/layout/includes/third-party/newest-comments/disqus-comment.pug +++ b/layout/includes/third-party/newest-comments/disqus-comment.pug @@ -49,7 +49,7 @@ script. } result += `
- ${array[i].content} + ${array[i].content}
${array[i].nick}
` } diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug index 04fa27c33..2153b1159 100644 --- a/layout/includes/third-party/newest-comments/github-issues.pug +++ b/layout/includes/third-party/newest-comments/github-issues.pug @@ -75,7 +75,7 @@ script. } result += `
- ${array[i].content} + ${array[i].content}
${array[i].nick} /
` } diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug index d8cea8c00..71b28038c 100644 --- a/layout/includes/third-party/newest-comments/twikoo-comment.pug +++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug @@ -60,7 +60,7 @@ script. } result += `
- ${array[i].content} + ${array[i].content}
${array[i].nick} /
` } diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug index 809da74fd..2aa758d3c 100644 --- a/layout/includes/third-party/newest-comments/valine.pug +++ b/layout/includes/third-party/newest-comments/valine.pug @@ -37,7 +37,7 @@ script. } result += `
- ${array[i].content} + ${array[i].content}
${array[i].nick} /
` } diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug index 2b9b63014..e412c379c 100644 --- a/layout/includes/third-party/newest-comments/waline.pug +++ b/layout/includes/third-party/newest-comments/waline.pug @@ -16,13 +16,6 @@ script. return content } - const getIcon = (ava,mail) => { - if (ava) return ava - let defaultIcon = '!{ avatar ? `?d=${avatar}` : ''}' - let iconUrl = "!{avatarCDN ? avatarCDN : 'https://gravatar.loli.net/avatar/'}" + mail + defaultIcon - return iconUrl - } - const generateHtml = array => { let result = '' @@ -36,7 +29,7 @@ script. } result += `
- ${array[i].content} + ${array[i].content}
${array[i].nick} /
` } @@ -59,7 +52,7 @@ script. const walineArray = res.comments.map(e => { return { 'content': changeContent(e.comment), - 'avatar': getIcon(e.QQAvatar,e.mail), + 'avatar': e.avatar, 'nick': e.nick, 'url': e.url + '#' + e.objectId, 'date': e.updatedAt, diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index 1b2720c74..21d705a2a 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -3,38 +3,6 @@ case source when 1 - script. - function subtitleType () { - fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json') - .then(response => response.json()) - .then(data => { - if (!{effect}) { - const sub = !{JSON.stringify(subContent)} - sub.unshift(data.text) - window.typed = new Typed('#subtitle', { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{loop}, - backSpeed: 50, - }) - } else { - document.getElementById('subtitle').innerHTML = data.text - } - }) - } - - if (!{effect}) { - if (typeof Typed === 'function') { - subtitleType() - } else { - getScript('!{url_for(theme.CDN.typed)}').then(subtitleType) - } - } else { - subtitleType() - } - - when 2 script. function subtitleType () { fetch('https://v1.hitokoto.cn') @@ -67,7 +35,7 @@ case source subtitleType() } - when 3 + when 2 script. function subtitleType () { getScript('https://yijuzhan.com/api/word.php?m=js').then(() => { @@ -99,7 +67,7 @@ case source subtitleType() } - when 4 + when 3 script. function subtitleType () { getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => { diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug index ec803353a..415422192 100644 --- a/layout/includes/widget/card_post_toc.pug +++ b/layout/includes/widget/card_post_toc.pug @@ -1,4 +1,6 @@ - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number +- let tocExpand = page.toc_expand !== undefined ? page.toc_expand : theme.toc.expand +- let tocExpandClass = tocExpand ? 'is-expand' : '' #card-toc.card-widget .item-headline @@ -7,7 +9,7 @@ span.toc-percentage if (page.encrypt == true) - .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) + .toc-content.toc-div-class(class=tocExpandClass style="display:none")!=toc(page.origin, {list_number: tocNumber}) else - .toc-content!=toc(page.content, {list_number: tocNumber}) + .toc-content(class=tocExpandClass)!=toc(page.content, {list_number: tocNumber}) \ No newline at end of file diff --git a/package.json b/package.json index 1a32584db..7e5536e65 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b9", + "version": "4.0.0-b10", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { @@ -20,13 +20,13 @@ }, "bugs": { "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues", - "email": "i@immyw.com" + "email": "my@crazywong.com" }, "dependencies": { "hexo-renderer-stylus": "^2.0.1", "hexo-renderer-pug": "^2.0.0" }, "homepage": "https://butterfly.js.org/", - "author": "Jerry ", + "author": "Jerry ", "license": "Apache-2.0" } diff --git a/scripts/events/cdn.js b/scripts/events/config.js similarity index 91% rename from scripts/events/cdn.js rename to scripts/events/config.js index ea564b2d0..8d4d074f6 100644 --- a/scripts/events/cdn.js +++ b/scripts/events/config.js @@ -1,12 +1,18 @@ /** * Butterfly - * CDN + * 1. Merge CDN + * 2. Capitalize the first letter of comment name */ 'use strict' hexo.extend.filter.register('before_generate', () => { const themeConfig = hexo.theme.config + + /** + * Merge CDN + */ + const defaultCDN = { main_css: '/css/index.css', main: '/js/main.js', @@ -24,6 +30,7 @@ hexo.extend.filter.register('before_generate', () => { utterances: 'https://utteranc.es/client.js', twikoo: 'https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js', waline: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js', + giscus: 'https://giscus.app/client.js', // share addtoany: 'https://static.addtoany.com/menu/page.js', @@ -101,4 +108,18 @@ hexo.extend.filter.register('before_generate', () => { } themeConfig.CDN = Object.assign(defaultCDN, deleteNullValue(themeConfig.CDN)) + + /** + * Capitalize the first letter of comment name + */ + + let { use } = themeConfig.comments + + if (typeof use === 'string') { + use = use.split(',') + } + + const newArray = use.map(item => item.toLowerCase().replace(/^\S/, s => s.toUpperCase())) + + themeConfig.comments.use = newArray }) diff --git a/scripts/tag/timeline.js b/scripts/tag/timeline.js index 1653e6f05..43c1333ce 100644 --- a/scripts/tag/timeline.js +++ b/scripts/tag/timeline.js @@ -22,8 +22,6 @@ function timeLineFn (args, content) { matches.push(match[2]) } - console.log(matches) - for (let i = 0; i < matches.length; i += 2) { const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' }) const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' }) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 741b35f82..771196da5 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -117,7 +117,7 @@ if hexo-config('enter_transitions') #site-title, #site-subtitle - animation: titlescale 1s + animation: titleScale 1s #nav.show animation: headerNoOpacity 1s @@ -187,7 +187,7 @@ if hexo-config('avatar.effect') == true margin-top: 0 opacity: 1 -@keyframes titlescale +@keyframes titleScale 0% opacity: 0 transform: scale(.7) diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 141ee9cb2..0d3c415bb 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -32,6 +32,7 @@ --timeline-bg: $timeline-content-bg --timeline-border-color: $timeline-border-color --pseudo-hover: $pseudo-hover + --headline-presudo: #a0a0a0 body position: relative diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index ba6e0ff98..06962740f 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -265,16 +265,17 @@ +maxWidth900() max-height: calc(100vh - 140px) - .toc-child - display: none + &:not(.is-expand) + .toc-child + display: none - +maxWidth900() - display: block !important + +maxWidth900() + display: block !important - .toc-item - &.active - .toc-child - display: block + .toc-item + &.active + .toc-child + display: block ol, li diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index a082f33de..83c6cec96 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -7,7 +7,7 @@ beautify() font-size: unit(fontsize, 'px') &:hover - padding-left: unit(fontsize + 12, 'px') + padding-left: unit(fontsize + 18, 'px') h1, h2, @@ -102,6 +102,32 @@ beautify() font-family: Monaco, 'Ubuntu Mono', monospace line-height: 1em + if hexo-config('anchor') + a.headerlink + &:after + @extend .fontawesomeIcon + float: right + color: var(--headline-presudo) + content: '\f0c1' + font-size: .95em + opacity: 0 + transition: all .3s + + &:hover + &:after + color: var(--pseudo-hover) + + h1, + h2, + h3, + h4, + h5, + h6 + &:hover + a.headerlink + &:after + opacity: 1 + ol, ul ol, diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index d9e338c78..bb3406b20 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -7,11 +7,7 @@ transition: all .5s #rightside-config-hide - transition: transform .4s - transform: translate(48px, 0) - - &.show - transform: translate(0, 0) !important + display: none & > div & > button, @@ -39,3 +35,19 @@ +maxWidth900() #hide-aside-btn display: none + +@keyframes rightside-item-in + 0% + transform: translate(48px, 0) + + 100% + transform: translate(0, 0) + +@keyframes rightside-item-out + 0% + display: block + transform: translate(0, 0) + + 100% + display: none + transform: translate(48px, 0) diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index cac6278ac..2e4e87472 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -9,7 +9,6 @@ width: 600px border-radius: 8px background: var(--search-bg) - animation: titlescale .5s +maxWidth768() top: 0 diff --git a/source/js/main.js b/source/js/main.js index e0625b4d4..e292a12bc 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function () { open: () => { btf.sidebarPaddingR() document.body.style.overflow = 'hidden' - btf.fadeIn(document.getElementById('menu-mask'), 0.5) + btf.animateIn(document.getElementById('menu-mask'), 'to_show 0.5s') document.getElementById('sidebar-menus').classList.add('open') mobileSidebarOpen = true }, @@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', function () { const $body = document.body $body.style.overflow = '' $body.style.paddingRight = '' - btf.fadeOut(document.getElementById('menu-mask'), 0.5) + btf.animateOut(document.getElementById('menu-mask'), 'to_hide 0.5s') document.getElementById('sidebar-menus').classList.remove('open') mobileSidebarOpen = false } @@ -315,82 +315,69 @@ document.addEventListener('DOMContentLoaded', function () { } /** - * toc + * toc,anchor */ - const tocFn = function () { - const $cardTocLayout = document.getElementById('card-toc') - const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] - const $tocLink = $cardToc.querySelectorAll('.toc-link') + const scrollFnToDo = function () { + const isToc = GLOBAL_CONFIG_SITE.isToc + const isAnchor = GLOBAL_CONFIG.isAnchor const $article = document.getElementById('article-container') - const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage') - // main of scroll - window.tocScrollFn = function () { - return btf.throttle(function () { - const currentTop = window.scrollY || document.documentElement.scrollTop - scrollPercent(currentTop) - findHeadPosition(currentTop) - }, 100)() - } - window.addEventListener('scroll', tocScrollFn) - - const scrollPercent = function (currentTop) { - 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 - $tocPercentage.textContent = percentage - } - - // anchor - const isAnchor = GLOBAL_CONFIG.isanchor - const updateAnchor = function (anchor) { - if (window.history.replaceState && anchor !== window.location.hash) { - if (!anchor) anchor = location.pathname - const title = GLOBAL_CONFIG_SITE.title - window.history.replaceState({ - url: location.href, - title: title - }, title, anchor) + if (!($article && (isToc || isAnchor))) return + + let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand + + if (isToc) { + const $cardTocLayout = document.getElementById('card-toc') + $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] + $tocLink = $cardToc.querySelectorAll('.toc-link') + const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage') + isExpand = $cardToc.classList.contains('is-expand') + + scrollPercent = currentTop => { + 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 + $tocPercentage.textContent = percentage } - } - window.mobileToc = { - open: () => { - $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px' - }, + window.mobileToc = { + open: () => { + $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px' + }, - close: () => { - $cardTocLayout.style.animation = 'toc-close .2s' - setTimeout(() => { - $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''" - }, 100) + close: () => { + $cardTocLayout.style.animation = 'toc-close .2s' + setTimeout(() => { + $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''" + }, 100) + } } - } - // toc元素點擊 - $cardToc.addEventListener('click', (e) => { - e.preventDefault() - 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) { - window.mobileToc.close() - } - }) + // toc元素點擊 + $cardToc.addEventListener('click', e => { + e.preventDefault() + 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) { + window.mobileToc.close() + } + }) - 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 < 100) { - $cardToc.scrollTop = sidebarScrollTop - 150 + autoScrollToc = item => { + const activePosition = item.getBoundingClientRect().top + const sidebarScrollTop = $cardToc.scrollTop + if (activePosition > (document.documentElement.clientHeight - 100)) { + $cardToc.scrollTop = sidebarScrollTop + 150 + } + if (activePosition < 100) { + $cardToc.scrollTop = sidebarScrollTop - 150 + } } } @@ -398,7 +385,7 @@ document.addEventListener('DOMContentLoaded', function () { const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6') let detectItem = '' const findHeadPosition = function (top) { - if ($tocLink.length === 0 || top === 0) { + if (top === 0) { return false } @@ -407,37 +394,50 @@ document.addEventListener('DOMContentLoaded', function () { list.forEach(function (ele, index) { if (top > btf.getEleTop(ele) - 80) { - currentId = '#' + encodeURI(ele.getAttribute('id')) + const id = ele.id + currentId = id ? '#' + encodeURI(id) : '' currentIndex = index } }) if (detectItem === currentIndex) return - if (isAnchor) updateAnchor(currentId) + if (isAnchor) btf.updateAnchor(currentId) - if (currentId === '') { + detectItem = currentIndex + + if (isToc) { $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') }) - detectItem = currentIndex - return - } - detectItem = currentIndex + if (currentId === '') { + return + } - $cardToc.querySelectorAll('.active').forEach(item => { item.classList.remove('active') }) - const currentActive = $tocLink[currentIndex] - currentActive.classList.add('active') + const currentActive = $tocLink[currentIndex] + currentActive.classList.add('active') - setTimeout(() => { - autoScrollToc(currentActive) - }, 0) + setTimeout(() => { + autoScrollToc(currentActive) + }, 0) - let parent = currentActive.parentNode + if (isExpand) return + let parent = currentActive.parentNode - for (; !parent.matches('.toc'); parent = parent.parentNode) { - if (parent.matches('li')) parent.classList.add('active') + for (; !parent.matches('.toc'); parent = parent.parentNode) { + if (parent.matches('li')) parent.classList.add('active') + } } } + + // main of scroll + window.tocScrollFn = function () { + return btf.throttle(function () { + const currentTop = window.scrollY || document.documentElement.scrollTop + isToc && scrollPercent(currentTop) + findHeadPosition(currentTop) + }, 100)() + } + window.addEventListener('scroll', tocScrollFn) } /** @@ -473,12 +473,20 @@ document.addEventListener('DOMContentLoaded', function () { } // handle some cases typeof utterancesTheme === 'function' && utterancesTheme() + typeof changeGiscusTheme === 'function' && changeGiscusTheme() typeof FB === 'object' && window.loadFBComment() window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) typeof runMermaid === 'function' && window.runMermaid() }, showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開 - document.getElementById('rightside-config-hide').classList.toggle('show') + const target = document.getElementById('rightside-config-hide') + if (window.rightSideIn) { + window.rightSideIn = false + btf.animateOut(target, 'rightside-item-out 0.5s') + } else { + window.rightSideIn = true + btf.animateIn(target, 'rightside-item-in 0.5s') + } }, scrollToTop: () => { // Back to top btf.scrollToDest(0, 500) @@ -749,7 +757,7 @@ document.addEventListener('DOMContentLoaded', function () { toggleCardCategory() } - GLOBAL_CONFIG_SITE.isToc && tocFn() + scrollFnToDo() GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex() addHighlightTool() GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 83353a77a..13373e9a6 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -3,9 +3,10 @@ window.addEventListener('load', () => { const bodyStyle = document.body.style bodyStyle.width = '100%' bodyStyle.overflow = 'hidden' - document.querySelector('#algolia-search .search-dialog').style.display = 'block' - document.querySelector('#algolia-search .ais-SearchBox-input').focus() - btf.fadeIn(document.getElementById('search-mask'), 0.5) + btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s') + btf.animateIn(document.querySelector('#algolia-search .search-dialog'), 'titleScale 0.5s') + setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100) + // shortcut: ESC document.addEventListener('keydown', function f (event) { if (event.code === 'Escape') { @@ -19,10 +20,8 @@ window.addEventListener('load', () => { const bodyStyle = document.body.style bodyStyle.width = '' bodyStyle.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) + btf.animateOut(document.querySelector('#algolia-search .search-dialog'), 'search_close .5s') + btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s') } const searchClickFn = () => { diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index d1df43db5..de2db620d 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -1,10 +1,12 @@ window.addEventListener('load', () => { let loadFlag = false - const openSearch = function () { - 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) + const openSearch = () => { + const bodyStyle = document.body.style + bodyStyle.width = '100%' + bodyStyle.overflow = 'hidden' + btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s') + btf.animateIn(document.querySelector('#local-search .search-dialog'), 'titleScale 0.5s') + setTimeout(() => { document.querySelector('#local-search-input input').focus() }, 100) if (!loadFlag) { search(GLOBAL_CONFIG.localSearch.path) loadFlag = true @@ -18,12 +20,12 @@ window.addEventListener('load', () => { }) } - const closeSearch = function () { - 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) + const closeSearch = () => { + const bodyStyle = document.body.style + bodyStyle.width = '' + bodyStyle.overflow = '' + btf.animateOut(document.querySelector('#local-search .search-dialog'), 'search_close .5s') + btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s') } // click function diff --git a/source/js/utils.js b/source/js/utils.js index 5b38b5ff3..b3e5df095 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -58,16 +58,14 @@ const btf = { } }, - snackbarShow: (text, showAction, duration) => { - const sa = (typeof showAction !== 'undefined') ? showAction : false - const dur = (typeof duration !== 'undefined') ? duration : 2000 - const position = GLOBAL_CONFIG.Snackbar.position - const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark + snackbarShow: (text, showAction = false, duration = 2000) => { + const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar + const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark Snackbar.show({ text: text, backgroundColor: bg, - showAction: sa, - duration: dur, + showAction: showAction, + duration: duration, pos: position }) }, @@ -151,16 +149,18 @@ const btf = { }) }, - fadeIn: (ele, time) => { - ele.style.cssText = `display:block;animation: to_show ${time}s` + animateIn: (ele, text) => { + ele.style.display = 'block' + ele.style.animation = text }, - fadeOut: (ele, time) => { + animateOut: (ele, text) => { ele.addEventListener('animationend', function f () { - ele.style.cssText = "display: none; animation: '' " + ele.style.display = '' + ele.style.animation = '' ele.removeEventListener('animationend', f) }) - ele.style.animation = `to_hide ${time}s` + ele.style.animation = text }, getParents: (elem, selector) => { @@ -180,7 +180,6 @@ const btf = { }, /** - * * @param {*} selector * @param {*} eleType the type of create element * @param {*} options object key: value @@ -263,5 +262,16 @@ const btf = { }) } }) + }, + + updateAnchor: (anchor) => { + if (anchor !== window.location.hash) { + if (!anchor) anchor = location.pathname + const title = GLOBAL_CONFIG_SITE.title + window.history.replaceState({ + url: location.href, + title: title + }, title, anchor) + } } } From 444081846cf64b4d12f83faa4fae1240a0061342 Mon Sep 17 00:00:00 2001 From: Jerry Date: Thu, 25 Nov 2021 00:03:31 +0800 Subject: [PATCH 13/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=E6=B2=92?= =?UTF-8?q?=E6=9C=89=E9=85=8D=E7=BD=AE=20comments=20=E7=9A=84=20use=20?= =?UTF-8?q?=E6=99=82=EF=BC=8C=E6=9C=83=E5=A0=B1=E9=8C=AF=E7=9A=84=20bug=20?= =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=E9=A6=96=E9=A0=81=E7=BD=AE=E9=A0=82?= =?UTF-8?q?=E5=92=8C=E6=9B=B4=E6=96=B0=E6=99=82=E9=96=93=E7=9A=84=E5=88=86?= =?UTF-8?q?=E5=89=B2=E7=B7=9A=E9=96=93=E9=9A=94=E9=A1=AF=E7=A4=BA=E5=95=8F?= =?UTF-8?q?=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/includes/mixins/post-ui.pug | 4 ++-- package.json | 2 +- scripts/events/config.js | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index c28740d61..d2cb0147e 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -22,14 +22,14 @@ mixin postUI(posts) span.article-meta i.fas.fa-thumbtack.sticky span.sticky= _p('sticky') - span.article-meta__separator | + span.article-meta-separator | if (theme.post_meta.page.date_type) span.post-meta-date if (theme.post_meta.page.date_type === 'both') i.far.fa-calendar-alt span.article-meta-label=_p('post.created') time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) - span.article-meta__separator | + span.article-meta-separator | i.fas.fa-history span.article-meta-label=_p('post.updated') time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format) diff --git a/package.json b/package.json index 7e5536e65..e37181af1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b10", + "version": "4.0.0-b11", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/config.js b/scripts/events/config.js index 8d4d074f6..bd6e05a5e 100644 --- a/scripts/events/config.js +++ b/scripts/events/config.js @@ -115,6 +115,8 @@ hexo.extend.filter.register('before_generate', () => { let { use } = themeConfig.comments + if (!use) return + if (typeof use === 'string') { use = use.split(',') } From 002692886c293e6ddd50a3754daf809eba0f6adf Mon Sep 17 00:00:00 2001 From: nitezs Date: Thu, 16 Dec 2021 17:19:18 +0800 Subject: [PATCH 14/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=20Waline=20?= =?UTF-8?q?=E6=9C=80=E8=BF=91=E8=A9=95=E8=AB=96=E7=9A=84=E6=99=82=E9=96=93?= =?UTF-8?q?=E5=8F=AA=E9=A1=AF=E7=A4=BA=20"=E5=89=9B=E5=89=9B"=20=E7=9A=84?= =?UTF-8?q?=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/includes/third-party/newest-comments/waline.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug index e412c379c..ce0039ec2 100644 --- a/layout/includes/third-party/newest-comments/waline.pug +++ b/layout/includes/third-party/newest-comments/waline.pug @@ -55,7 +55,7 @@ script. 'avatar': e.avatar, 'nick': e.nick, 'url': e.url + '#' + e.objectId, - 'date': e.updatedAt, + 'date': e.insertedAt, } }) saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24)) From 850c825fcfcee5cbb35f0fa79203784ba198a522 Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 22 Dec 2021 22:39:27 +0800 Subject: [PATCH 15/16] =?UTF-8?q?feat:=20toc=20=E9=96=93=E9=9A=94=E8=AA=BF?= =?UTF-8?q?=E6=95=B4,=20=E7=9B=B4=E6=8E=A5=E5=AD=90=E5=85=83=E7=B4=A0?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B1=8E=E7=B7=9A=E8=BE=A8=E8=AD=98=20closed?= =?UTF-8?q?=20#723=20fix:=20=E4=BF=AE=E5=BE=A9=20toc=20=E5=9C=A8=E5=B0=8F?= =?UTF-8?q?=E8=A8=AD=E5=82=99=E4=B8=8A=E9=A1=AF=E7=A4=BA=E5=87=BA=E5=B1=8F?= =?UTF-8?q?=E5=B9=95=E5=A4=96=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E5=9C=A8=E6=89=93=E8=B3=9E=E6=8C=89=E9=88=95=E5=91=A8=E5=9C=8D?= =?UTF-8?q?=E4=B9=9F=E6=9C=83=E8=A7=B8=E7=99=BC=E6=89=93=E8=B3=9E=E5=BD=88?= =?UTF-8?q?=E7=AA=97=E7=9A=84=20bug=20fix:=20Waline=20=E6=9C=80=E8=BF=91?= =?UTF-8?q?=E8=A9=95=E8=AB=96=E7=9A=84=E6=99=82=E9=96=93=E5=8F=AA=E9=A1=AF?= =?UTF-8?q?=E7=A4=BA=20"=E5=89=9B=E5=89=9B"=20=E7=9A=84=E5=95=8F=E9=A1=8C?= =?UTF-8?q?=20(=E4=BB=A5docker=E7=9A=84=E6=96=B9=E5=BC=8F=E5=9F=B7?= =?UTF-8?q?=E8=A1=8C)=20#730=20fix:=20=E4=BF=AE=E5=BE=A9=E9=BB=9E=E6=93=8A?= =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E9=A1=AF=E7=A4=BA=E6=8C=89=E9=88=95?= =?UTF-8?q?=E6=99=82,=E6=8C=89=E9=88=95=E6=B2=92=E6=9C=89=E5=87=BA?= =?UTF-8?q?=E7=8F=BE=E7=9A=84=20bug=20remove:=20=E7=A7=BB=E9=99=A4=20butto?= =?UTF-8?q?n=20=E7=9A=84=20hover=20=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 12 +++++------ layout/includes/post/reward.pug | 2 +- layout/includes/widget/card_author.pug | 2 +- scripts/tag/button.js | 2 +- scripts/tag/hide.js | 4 ++-- source/css/_global/index.styl | 27 +++-------------------- source/css/_layout/aside.styl | 27 +++++++++++++++++------ source/css/_layout/head.styl | 7 +++++- source/css/_layout/reward.styl | 8 ++++++- source/css/_layout/rightside.styl | 30 +++++++++++--------------- source/css/_mode/darkmode.styl | 2 ++ source/css/_mode/readmode.styl | 3 --- source/css/_page/common.styl | 2 +- source/css/_tags/button.styl | 15 ++++++++----- source/css/_tags/hide.styl | 3 +++ source/css/var.styl | 10 ++++++--- source/js/main.js | 30 +++++++++++++------------- 17 files changed, 98 insertions(+), 88 deletions(-) diff --git a/_config.yml b/_config.yml index 33580e081..59550c7d8 100644 --- a/_config.yml +++ b/_config.yml @@ -163,6 +163,10 @@ index_post_content: method: 3 length: 500 # if you set method to 2 or 3, the length need to config +# anchor +# when you scroll in post, the URL will update according to header id. +anchor: false + # Post # -------------------------------------- @@ -215,10 +219,6 @@ photofigcaption: false # false: disable pagination post_pagination: 1 -# anchor -# when you scroll in post, the URL will update according to header id. -anchor: false - # Displays outdated notice for a post (文章過期提醒) noticeOutdate: enable: false @@ -560,8 +560,8 @@ display_mode: light beautify: enable: false field: post # site/post - title-prefix-icon: '\f0c1' - title-prefix-icon-color: '#F47466' + title-prefix-icon: # '\f0c1' + title-prefix-icon-color: # '#F47466' # Global font settings # Don't modify the following settings unless you know how they work (非必要不要修改) diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug index 41bb3c999..71daa9857 100644 --- a/layout/includes/post/reward.pug +++ b/layout/includes/post/reward.pug @@ -1,5 +1,5 @@ .post-reward - .reward-button.button--animated + .reward-button i.fas.fa-qrcode = ' ' + _p('donate') .reward-main diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index dd8cc7b1c..0fa860af0 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -23,7 +23,7 @@ if theme.aside.card_author.enable .length-num= site.categories.length if theme.aside.card_author.button.enable - a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) + a#card-info-btn(href=theme.aside.card_author.button.link) i(class=theme.aside.card_author.button.icon) span=theme.aside.card_author.button.text diff --git a/scripts/tag/button.js b/scripts/tag/button.js index 791a8e335..33a0e53b4 100644 --- a/scripts/tag/button.js +++ b/scripts/tag/button.js @@ -21,7 +21,7 @@ function btn (args) { icon = icon.trim() option = option.trim() - return `${icon.length ? `` : ''}${text.length ? `${text}` : ''}` } diff --git a/scripts/tag/hide.js b/scripts/tag/hide.js index ae463c7c0..996ad2b0a 100644 --- a/scripts/tag/hide.js +++ b/scripts/tag/hide.js @@ -28,7 +28,7 @@ function hideInline (args) { if (color) group += `color: ${color}` group += '"' - return `${content}` } @@ -43,7 +43,7 @@ function hideBlock (args, content) { if (color) group += `color: ${color}` group += '"' - return `
${hexo.render.renderSync({ text: content, engine: 'markdown' })}
` } diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 0d3c415bb..bb41b90d6 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -21,6 +21,7 @@ --btn-bg: $button-bg --text-bg-hover: rgba($text-bg-hover, .7) --light-grey: $light-grey + --dark-grey: $dark-grey --white: $white --text-highlight-color: $text-highlight-color --blockquote-color: $blockquote-color @@ -33,6 +34,7 @@ --timeline-border-color: $timeline-border-color --pseudo-hover: $pseudo-hover --headline-presudo: #a0a0a0 + --scrollbar-color: $scrollbar-color body position: relative @@ -52,7 +54,7 @@ body height: 8px *::-webkit-scrollbar-thumb - background: var(--btn-bg) + background: var(--scrollbar-color) *::-webkit-scrollbar-track background-color: transparent @@ -176,29 +178,6 @@ if $site-name-font .pull-right float: right -.button--animated - position: relative - z-index: 1 - transition: color 1s - - &:before - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - z-index: -1 - background: var(--btn-hover-color) - content: '' - transition: transform .5s ease-out - transform: scaleX(0) - transform-origin: 0 50% - - &:hover - &:before - transition-timing-function: cubic-bezier(.45, 1.64, .47, .66) - transform: scaleX(1) - img &[src=''], &:not([src]) diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 06962740f..65c142124 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -1,5 +1,5 @@ #aside-content - width: 25% + width: 26% +minWidth900() if hexo-config('aside.position') == 'right' @@ -79,6 +79,9 @@ text-align: center line-height: 2.4 + &:hover + background-color: var(--btn-hover-color) + span padding-left: 10px @@ -243,6 +246,7 @@ right: -100% bottom: 30px z-index: 100 + max-width: $toc-mobile-maxWidth max-height: calc(100% - 60px) width: $toc-mobile-width opacity: 0 @@ -257,14 +261,22 @@ font-size: 140% .toc-content - clear: both overflow-y: scroll overflow-y: overlay + margin: 0 -24px max-height: calc(100vh - 120px) +maxWidth900() max-height: calc(100vh - 140px) + & > .toc + margin: 0 20px + + & > .toc-item > .toc-child + margin-left: 10px + padding-left: 10px + border-left: 1px solid var(--dark-grey) + &:not(.is-expand) .toc-child display: none @@ -286,18 +298,19 @@ ol margin: 0 - padding-left: 15px + padding-left: 18px .toc-link display: block - padding-right: 8px - padding-left: 6px - border-left: 3px solid transparent + margin: 4px 0 + padding: 1px 6px color: var(--toc-link-color) transition: all .2s ease-in-out + &:hover + color: $theme-color + &.active - border-left-color: darken($theme-toc-color, 20%) background: $theme-toc-color color: $toc-active-color diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 0d49b7a33..87aa2119a 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -304,6 +304,7 @@ background-color: var(--sidebar-bg) box-shadow: 0 5px 20px -4px rgba($dark-black, .5) animation: sub_menus .3s .1s ease both + border-radius: 5px &:before position: absolute @@ -319,9 +320,13 @@ &:hover background: var(--text-bg-hover) + &:first-child + border-radius: 5px 5px 0 0 + &:last-child + border-radius: 0 0 5px 5px a display: inline-block - padding: 6px 14px + padding: 8px 16px width: 100% color: var(--font-color) !important text-shadow: none !important diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index b69f71f31..e57096767 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -3,6 +3,10 @@ margin-top: 80px width: 100% text-align: center + pointer-events: none + + & > * + pointer-events: auto .reward-button display: inline-block @@ -10,9 +14,11 @@ background: var(--btn-bg) color: var(--btn-color) cursor: pointer - transition: all .4s &:hover + .reward-button + background: var(--btn-hover-color) + & > .reward-main display: block diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index bb3406b20..6daea5666 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -7,7 +7,19 @@ transition: all .5s #rightside-config-hide - display: none + height: 0 + opacity: 0 + transition: transform .4s + transform: translate(45px, 0) + + &.show + height: auto + opacity: 1 + transform: translate(0, 0) + + &.status + height: auto + opacity: 1 & > div & > button, @@ -35,19 +47,3 @@ +maxWidth900() #hide-aside-btn display: none - -@keyframes rightside-item-in - 0% - transform: translate(48px, 0) - - 100% - transform: translate(0, 0) - -@keyframes rightside-item-out - 0% - display: block - transform: translate(0, 0) - - 100% - display: none - transform: translate(48px, 0) diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 64a638eba..c462fa28c 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -21,6 +21,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --btn-bg: lighten(#121212, 5) --text-bg-hover: lighten(#121212, 15) --light-grey: alpha(#FFFFFF, .7) + --dark-grey: alpha(#FFFFFF, .2) --white: alpha(#FFFFFF, .9) --text-highlight-color: alpha(#FFFFFF, .9) --blockquote-color: alpha(#FFFFFF, .7) @@ -36,6 +37,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --hlscrollbar-bg: lighten(#121212, 5) --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) --timeline-bg: lighten(#121212, 5) + --scrollbar-color: lighten(#121212, 5) #web_bg:before, #footer:before, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 80dc762a9..00d055eed 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -187,9 +187,6 @@ if hexo-config('readmode') background: var(--readmode-light-color) !important color: var(--font-color) !important - .button--animated:before - background: var(--readmode-light-color) !important - .note border: 2px solid var(--gray) border-left-color: var(--gray) !important diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index 40bb8e9a9..3356d1731 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -29,7 +29,7 @@ padding: 36px 14px & > div:first-child - width: 75% + width: 74% transition: all .3s +maxWidth900() diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index 2547ccf72..dc365f61e 100644 --- a/source/css/_tags/button.styl +++ b/source/css/_tags/button.styl @@ -11,6 +11,9 @@ color: $btn-color line-height: 2 + &:hover + background-color: var(--btn-hover-color) + i + span margin-left: 6px @@ -39,15 +42,17 @@ &.{$type} background-color: lookup('$tagsP-' + $type + '-color') + &:hover + background-color: var(--btn-hover-color) + &.outline border: 1px solid transparent border-color: $btn-default-color background-color: transparent color: $btn-default-color - transition: all .3s - &.button--animated:before - background: $btn-default-color + &:hover + background-color: $btn-default-color &:hover color: white !important @@ -57,5 +62,5 @@ border-color: lookup('$tagsP-' + $type + '-color') color: lookup('$tagsP-' + $type + '-color') - &.button--animated:before - background: lookup('$tagsP-' + $type + '-color') + &:hover + background-color: lookup('$tagsP-' + $type + '-color') diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index d9785b408..e59670027 100644 --- a/source/css/_tags/hide.styl +++ b/source/css/_tags/hide.styl @@ -7,6 +7,9 @@ background: $tag-hide-bg color: var(--white) + &:hover + background-color: var(--btn-hover-color) + &.open display: none diff --git a/source/css/var.styl b/source/css/var.styl index fc2934d3e..bc1655dc7 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -24,8 +24,8 @@ $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon' $hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px // page beatutify $beautifyEnable = hexo-config('beautify.enable') -$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1' -$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red +$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1' +$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red // Global Variables $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size) @@ -39,6 +39,7 @@ $light-blue = $theme-color $dark-black = #000000 $light-grey = #EEEEEE $grey = #858585 +$dark-grey = #cacaca $white = #FFFFFF $whitesmoke = #f5f5f5 $font-black = #4C4948 @@ -61,13 +62,16 @@ $sidebar-background = #f6f8fa $sidebar-width = 300px // aside $toc-link-color = #666261 -$toc-mobile-width = 300px +$toc-mobile-width = calc(100% - 80px) +$toc-mobile-maxWidth = 380px $toc-active-color = #fff // Button $button-color = #fff $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange $button-bg = $theme-color $pseudo-hover = $button-hover-color +// scrollbar +$scrollbar-color= $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color // table $table-thead-bg = #99a9bf // reward diff --git a/source/js/main.js b/source/js/main.js index e292a12bc..116c20154 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -296,7 +296,7 @@ document.addEventListener('DOMContentLoaded', function () { } $header.classList.add('nav-fixed') if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') { - $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)' + $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)' } } else { if (currentTop === 0) { @@ -306,7 +306,7 @@ document.addEventListener('DOMContentLoaded', function () { } if (document.body.scrollHeight <= innerHeight) { - $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)' + $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)' } }, 200)() } @@ -478,15 +478,16 @@ document.addEventListener('DOMContentLoaded', function () { window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) typeof runMermaid === 'function' && window.runMermaid() }, - showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開 - const target = document.getElementById('rightside-config-hide') - if (window.rightSideIn) { - window.rightSideIn = false - btf.animateOut(target, 'rightside-item-out 0.5s') - } else { - window.rightSideIn = true - btf.animateIn(target, 'rightside-item-in 0.5s') + showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開 + const rightsideHideClassList = document.getElementById('rightside-config-hide').classList + rightsideHideClassList.toggle('show') + if (e.classList.contains('show')) { + rightsideHideClassList.add('status') + setTimeout(() => { + rightsideHideClassList.remove('status') + }, 300) } + e.classList.toggle('show') }, scrollToTop: () => { // Back to top btf.scrollToDest(0, 500) @@ -506,13 +507,13 @@ document.addEventListener('DOMContentLoaded', function () { } document.getElementById('rightside').addEventListener('click', function (e) { - const $target = e.target.id || e.target.parentNode.id - switch ($target) { + const $target = e.target.id ? e.target : e.target.parentNode + switch ($target.id) { case 'go-up': rightSideFn.scrollToTop() break case 'rightside_config': - rightSideFn.showOrHideBtn() + rightSideFn.showOrHideBtn($target) break case 'mobile-toc-button': rightSideFn.runMobileToc() @@ -534,7 +535,6 @@ document.addEventListener('DOMContentLoaded', function () { /** * menu * 側邊欄sub-menu 展開/收縮 - * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) */ const clickFnOfSubMenu = () => { document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) { @@ -594,7 +594,7 @@ document.addEventListener('DOMContentLoaded', function () { /** * table overflow */ - const addTableWrap = function () { + const addTableWrap = () => { const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table') if ($table.length) { $table.forEach(item => { From 18d9d652a017a19f38ce49dcc710d7720e2d18c4 Mon Sep 17 00:00:00 2001 From: Jerry Date: Sat, 15 Jan 2022 00:30:01 +0800 Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96=20firefox=20?= =?UTF-8?q?=E7=80=8F=E8=A6=BD=E5=99=A8=E6=BB=BE=E5=8B=95=E6=A2=9D=20fix:?= =?UTF-8?q?=20Utterances=20=E8=A9=95=E8=AB=96=E5=8D=80=E5=9C=A8=E5=A4=9A?= =?UTF-8?q?=E5=80=8B=E9=A0=81=E9=9D=A2=E9=A1=AF=E7=A4=BA=E7=9A=84=E6=98=AF?= =?UTF-8?q?=E5=90=8C=E4=B8=80=E5=80=8B=E8=A9=95=E8=AB=96=E5=8D=80=20fix:?= =?UTF-8?q?=20=E4=BF=AE=E5=BE=A9=E8=A9=95=E8=AB=96=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E7=88=B2=20Livere=20=E5=92=8C=20Facebook=20Comments=20?= =?UTF-8?q?=E6=99=82=EF=BC=8C=E6=9C=80=E6=96=B0=E8=A9=95=E8=AB=96=E6=A8=A1?= =?UTF-8?q?=E5=A1=8A=E4=BB=8D=E7=84=B6=E9=A1=AF=E7=A4=BA=E7=9A=84=20bug=20?= =?UTF-8?q?improvement:=20blueimp=5Fmd5=20CDN=20=E5=8F=AF=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20improvement:=20timeline=20=E5=84=AA=E5=8C=96=20impr?= =?UTF-8?q?ovement:=20css=E5=84=AA=E5=8C=96=20improvement:=20=E5=8F=8B?= =?UTF-8?q?=E6=83=85=E9=8F=88=E6=8E=A5=E5=84=AA=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 3 ++ layout/includes/page/flink.pug | 35 ++++++++++++------- .../third-party/newest-comments/valine.pug | 2 +- layout/includes/third-party/pjax.pug | 22 ++++++------ .../includes/widget/card_newest_comment.pug | 2 +- layout/includes/widget/index.pug | 2 +- package.json | 2 +- scripts/events/config.js | 1 + scripts/filters/random_cover.js | 2 +- scripts/tag/timeline.js | 9 +++-- source/css/_global/index.styl | 8 +++-- source/css/_highlight/highlight/diff.styl | 2 ++ source/css/_highlight/prismjs/index.styl | 2 ++ source/css/_layout/aside.styl | 16 +++------ source/css/_layout/pagination.styl | 4 ++- source/css/_mode/darkmode.styl | 2 +- source/css/_mode/readmode.styl | 2 -- source/css/_tags/button.styl | 27 +++++--------- source/css/_tags/label.styl | 2 +- source/css/_tags/note.styl | 2 +- source/css/_tags/timeline.styl | 24 +++++++++---- source/css/var.styl | 8 ++--- 22 files changed, 97 insertions(+), 82 deletions(-) diff --git a/_config.yml b/_config.yml index 59550c7d8..deb3c755e 100644 --- a/_config.yml +++ b/_config.yml @@ -254,6 +254,7 @@ addtoany: comments: # Up to two comments system, the first will be shown as default + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus use: # Valine,Disqus text: true # Display the comment name next to the button # lazyload: The comment system will be load when comment element enters the browser's viewport. @@ -466,6 +467,7 @@ site_verification: # toc_color: "#00c4b6" # blockquote_padding_color: "#49b1f5" # blockquote_background_color: "#49b1f5" +# scrollbar_color: "#49b1f5" # The top_img settings of home page # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間) @@ -836,6 +838,7 @@ CDN: # comments gitalk: gitalk_css: + blueimp_md5: valine: disqusjs: disqusjs_css: diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index e82186d8d..59032c99c 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -40,18 +40,29 @@ else if site.data.link + - let result = '' each i in site.data.link - if i.class_name - !=markdown(`## ${i.class_name}`) - if i.class_desc - .flink-desc!=i.class_desc - .flink-list - each item in i.link_list - .flink-list-item - a(href=url_for(item.link) title=item.name target="_blank") - .flink-item-icon - img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) - .flink-item-name= item.name - .flink-item-desc(title=item.descr)= item.descr + - let className = i.class_name ? markdown(`## ${i.class_name}`) : '' + - let classDesc = i.class_desc ? `
${i.class_desc}
` : '' + + - let listResult = '' + + each j in i.link_list + - + listResult += ` +
+ +
+ ${j.name} +
+
${j.name}
+
${j.descr}
+ +
` + - + + - result += `${className}${classDesc}
${listResult}
` + + - page.content = result + page.content != page.content diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug index 2aa758d3c..dd39b138d 100644 --- a/layout/includes/third-party/newest-comments/valine.pug +++ b/layout/includes/third-party/newest-comments/valine.pug @@ -1,6 +1,6 @@ - let default_avatar = theme.valine.avatar -script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js") +script(src=url_for(theme.CDN.blueimp_md5)) script. window.addEventListener('load', () => { const changeContent = (content) => { diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index a1278b996..87266633b 100644 --- a/layout/includes/third-party/pjax.pug +++ b/layout/includes/third-party/pjax.pug @@ -3,20 +3,18 @@ if theme.pjax.exclude each val in theme.pjax.exclude - pjaxExclude = pjaxExclude + `:not([href="${val}"])` +- let pjaxSelectors = ['title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax'] + +- let choose = theme.comments.use +if choose + if theme.Open_Graph_meta && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus')) + - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]') + if choose.includes('Utterances') || choose.includes('Giscus') + - pjaxSelectors.unshift('link[rel="canonical"]') + script(src=url_for(theme.CDN.pjax)) script. - let pjaxSelectors = [ - 'title', - '#config-diff', - '#body-wrap', - '#rightside-config-hide', - '#rightside-config-show', - '.js-pjax' - ] - - if (!{Boolean(theme.Open_Graph_meta && theme.comments.use && theme.comments.use.includes('Livere'))}) { - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]') - } + let pjaxSelectors = !{JSON.stringify(pjaxSelectors)} var pjax = new Pjax({ elements: '!{pjaxExclude}', diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug index 4c3d4beaa..7350ee7ac 100644 --- a/layout/includes/widget/card_newest_comment.pug +++ b/layout/includes/widget/card_newest_comment.pug @@ -1,4 +1,4 @@ -if theme.newest_comments.enable +if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0]) .card-widget#card-newest-comments .item-headline i.fas.fa-comment-dots diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index 72f27849d..5f44ae963 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,7 +1,7 @@ #aside-content.aside-content //- post if is_post() - - const tocStyle = page.style_simple + - const tocStyle = page.toc_style_simple - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple if showToc && tocStyleVal .sticky_layout diff --git a/package.json b/package.json index e37181af1..e2a30fed9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b11", + "version": "4.0.0", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/config.js b/scripts/events/config.js index bd6e05a5e..8c680cfb7 100644 --- a/scripts/events/config.js +++ b/scripts/events/config.js @@ -24,6 +24,7 @@ hexo.extend.filter.register('before_generate', () => { // comments gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js', gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css', + blueimp_md5: 'https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js', valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js', disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js', disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css', diff --git a/scripts/filters/random_cover.js b/scripts/filters/random_cover.js index 827059fda..47ed4fec5 100644 --- a/scripts/filters/random_cover.js +++ b/scripts/filters/random_cover.js @@ -39,7 +39,7 @@ function randomCover () { return cover } } else { - cover = theme.default_top_img || 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg' + cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' return cover } } diff --git a/scripts/tag/timeline.js b/scripts/tag/timeline.js index 43c1333ce..6c87a6b5a 100644 --- a/scripts/tag/timeline.js +++ b/scripts/tag/timeline.js @@ -9,9 +9,12 @@ function timeLineFn (args, content) { const tlBlock = /\n([\w\W\s\S]*?)/g let result = '' + let color = '' if (args.length) { - args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' }) - result += `
${args}
` + args = args.join(' ').split(',') + color = args[1] + const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' }) + result += `
${mdContent}
` } const matches = [] @@ -32,7 +35,7 @@ function timeLineFn (args, content) { result += `
${tlTitleHtml + tlContentHtml}
` } - return `
${result}
` + return `
${result}
` } hexo.extend.tag.register('timeline', timeLineFn, { ends: true }) diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index bb41b90d6..8296759ff 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -30,8 +30,6 @@ --toc-link-color: $toc-link-color --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) - --timeline-bg: $timeline-content-bg - --timeline-border-color: $timeline-border-color --pseudo-hover: $pseudo-hover --headline-presudo: #a0a0a0 --scrollbar-color: $scrollbar-color @@ -49,6 +47,7 @@ body if !hexo-config('copy.enable') user-select: none +// scrollbar - chrome/safari *::-webkit-scrollbar width: 8px height: 8px @@ -59,6 +58,11 @@ body *::-webkit-scrollbar-track background-color: transparent +// scrollbar - firefox +* + scrollbar-width: thin + scrollbar-color: var(--scrollbar-color) transparent + input::placeholder color: var(--font-color) diff --git a/source/css/_highlight/highlight/diff.styl b/source/css/_highlight/highlight/diff.styl index 6a6eefef8..83f3e179d 100644 --- a/source/css/_highlight/highlight/diff.styl +++ b/source/css/_highlight/highlight/diff.styl @@ -1,5 +1,7 @@ figure.highlight table + scrollbar-color: var(--hlscrollbar-bg) transparent + &::-webkit-scrollbar-thumb background: var(--hlscrollbar-bg) diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index 0593143a6..1b7383733 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -6,6 +6,8 @@ if $highlight_theme != false #article-container pre[class*='language-'] + scrollbar-color: var(--hlscrollbar-bg) transparent + &::-webkit-scrollbar-thumb background: var(--hlscrollbar-bg) diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 65c142124..659ac5f8e 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -173,9 +173,9 @@ .card-archives ul.card-archive-list > .card-archive-list-item, .card-categories ul.card-category-list > .card-category-list-item a - display: inline-block + display: flex + flex-direction: row padding: 3px 10px - width: 100% color: var(--font-color) transition: all .4s @@ -185,15 +185,9 @@ span @extend .limit-one-line - display: inline-block - vertical-align: bottom &:first-child - width: 80% - - &:last-child - width: 20% - text-align: right + flex: 1 .card-categories .card-category-list @@ -269,8 +263,8 @@ +maxWidth900() max-height: calc(100vh - 140px) - & > .toc - margin: 0 20px + & > * + margin: 0 20px !important & > .toc-item > .toc-child margin-left: 10px diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 601e7bcbd..a9a4a24cb 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -57,13 +57,15 @@ & > .recent-posts .pagination & > * - @extend .cardHover display: inline-block margin: 0 6px width: w = 2.5em height: w line-height: w + & > *:not(.space) + @extend .cardHover + &:hover background: var(--btn-hover-color) color: var(--btn-color) diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index c462fa28c..3f9ec5ac3 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -36,8 +36,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --hlnumber-color: alpha(#FFFFFF, .4) --hlscrollbar-bg: lighten(#121212, 5) --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) - --timeline-bg: lighten(#121212, 5) --scrollbar-color: lighten(#121212, 5) + --timeline-bg: lighten(#121212, 5) #web_bg:before, #footer:before, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 00d055eed..88da5d373 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -11,8 +11,6 @@ if hexo-config('readmode') --exit-btn-bg: #C0C0C0 --exit-btn-color: #fff --exit-btn-hover: darken(#C0C0C0, 20) - --timeline-bg: none - --timeline-border-color: none --pseudo-hover: none [data-theme='dark'] diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index dc365f61e..c4b2c3ac9 100644 --- a/source/css/_tags/button.styl +++ b/source/css/_tags/button.styl @@ -7,10 +7,14 @@ display: inline-block margin: 0 4px 6px padding: 0 15px - background-color: $btn-default-color + background-color: var(--btn-beautify-color, $btn-default-color) color: $btn-color line-height: 2 + for $type in $color-types + &.{$type} + --btn-beautify-color: lookup('$tagsP-' + $type + '-color') + &:hover background-color: var(--btn-hover-color) @@ -38,29 +42,14 @@ &:hover text-decoration: none - for $type in $tagsP-types - &.{$type} - background-color: lookup('$tagsP-' + $type + '-color') - - &:hover - background-color: var(--btn-hover-color) - &.outline border: 1px solid transparent - border-color: $btn-default-color + border-color: var(--btn-beautify-color, $btn-default-color) background-color: transparent - color: $btn-default-color + color: var(--btn-beautify-color, $btn-default-color) &:hover - background-color: $btn-default-color + background-color: var(--btn-beautify-color, $btn-default-color) &:hover color: white !important - - for $type in $tagsP-types - &.{$type} - border-color: lookup('$tagsP-' + $type + '-color') - color: lookup('$tagsP-' + $type + '-color') - - &:hover - background-color: lookup('$tagsP-' + $type + '-color') diff --git a/source/css/_tags/label.styl b/source/css/_tags/label.styl index 56261f146..d7b814edd 100644 --- a/source/css/_tags/label.styl +++ b/source/css/_tags/label.styl @@ -6,6 +6,6 @@ &.default background-color: $btn-default-color - for $type in $tagsP-types + for $type in $color-types &.{$type} background-color: lookup('$tagsP-' + $type + '-color') diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl index e128e6510..eaba7af6c 100644 --- a/source/css/_tags/note.styl +++ b/source/css/_tags/note.styl @@ -16,7 +16,7 @@ left: .8em font-size: larger - for $type in $tagsP-types + for $type in $color-types &.{$type} &:not(.disabled) border-left-color: lookup('$tagsP-' + $type + '-color') !important diff --git a/source/css/_tags/timeline.styl b/source/css/_tags/timeline.styl index 056c3921a..aba927bab 100644 --- a/source/css/_tags/timeline.styl +++ b/source/css/_tags/timeline.styl @@ -1,8 +1,13 @@ #article-container .timeline - margin: 0 0 20px + margin: 0 0 20px 10px padding: 14px 20px 5px - border-left: 2px solid var(--timeline-border-color) + border-left: 2px solid var(--timeline-color, $theme-color) + + for $type in $color-types + &.{$type} + --timeline-color: lookup('$tagsP-' + $type + '-color') + --timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color'))) .timeline-item margin: 0 0 15px @@ -10,7 +15,7 @@ &:hover .item-circle &:before - border: 3px solid var(--pseudo-hover) + border-color: var(--timeline-color, $theme-color) &.headline .timeline-item-title @@ -21,7 +26,12 @@ &:before left: -28px - border: 4px solid var(--pseudo-hover) + border: 4px solid var(--timeline-color, $theme-color) + + &:hover + .item-circle + &:before + border-color: var(--pseudo-hover) .timeline-item-title position: relative @@ -33,7 +43,7 @@ left: -27px width: 6px height: 6px - border: 3px solid var(--timeline-border-color) + border: 3px solid var(--pseudo-hover) border-radius: 50% background: var(--card-bg) content: '' @@ -46,9 +56,9 @@ .timeline-item-content position: relative - padding: 12px 10px + padding: 12px 15px border-radius: 8px - background: var(--timeline-bg) + background: var(--timeline-bg, lighten($theme-color, 85%)) font-size: .93em & > :last-child diff --git a/source/css/var.styl b/source/css/var.styl index bc1655dc7..545b0a7bc 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -162,7 +162,7 @@ $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($l $note-modern-danger-text = #a94442 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%) // Tag Plugins - Button/note -$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green' +$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green' $btn-color = #fff $btn-default-color = #777 $tagsP-blue-color = #428bca @@ -179,7 +179,5 @@ $tab-button-hover-bg = darken($tab-border-color, 8) $tab-active-border-color = $theme-color $tab-button-active-bg = $card-bg $tab-to-top-color = #99a9bf - -// timeline -$timeline-content-bg = #f6f6f6 -$timeline-border-color = $theme-color +// Tag Plugins - timeline +$timeline-default-color = $theme-color \ No newline at end of file