From f218a0a14aaa4d02affe05ddd009506e9edc3025 Mon Sep 17 00:00:00 2001 From: Jerry Date: Fri, 18 Nov 2022 18:30:25 +0800 Subject: [PATCH] =?UTF-8?q?breaking=20changes:=20=E7=A7=BB=E9=99=A4=20subt?= =?UTF-8?q?itle=20=E4=B8=80=E5=8F=A5=E7=B6=B2=E8=AA=BF=E7=94=A8=EF=BC=88ap?= =?UTF-8?q?i=20=E5=B7=B2=E5=A4=B1=E6=95=88)=20feat:=20=E5=8F=B3=E4=B8=8B?= =?UTF-8?q?=E8=A7=92=E6=8C=89=E9=88=95=E5=A2=9E=E5=8A=A0=E9=A0=90=E8=A6=BD?= =?UTF-8?q?=E9=80=B2=E5=BA=A6=E9=A1=AF=E7=A4=BA=20feat:=20toc=E5=8F=AF?= =?UTF-8?q?=E8=A8=AD=E7=BD=AE=E6=98=AF=E5=90=A6=E9=A1=AF=E7=A4=BA=E9=A0=90?= =?UTF-8?q?=E8=A6=BD=E9=80=B2=E5=BA=A6=20fix:=20=E4=BF=AE=E5=BE=A9=20TypeE?= =?UTF-8?q?rror:=20require(...)=20is=20not=20a=20function=20=E7=9A=84?= =?UTF-8?q?=E5=A0=B1=E9=8C=AF=20#1102=20improvement:=20=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E8=A8=AD=E7=BD=AE=E7=9B=B8=E5=B0=8D=E6=97=A5=E6=9C=9F=E6=99=82?= =?UTF-8?q?=EF=BC=8C=E6=96=87=E7=AB=A0=E7=9A=84=E6=97=A5=E6=9C=9F=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E6=9C=80=E6=96=B0=E8=A9=95=E8=AB=96=E7=9A=84?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=E6=A0=BC=E5=BC=8F=E7=B5=B1=E4=B8=80=E7=82=BA?= =?UTF-8?q?=20=E5=B9=B4=E6=9C=88=E6=97=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 11 +++--- layout/includes/head/config.pug | 6 +++- layout/includes/rightside.pug | 1 + layout/includes/third-party/subtitle.pug | 32 ----------------- package.json | 2 +- scripts/events/init.js | 7 ++-- scripts/events/welcome.js | 18 ++++------ source/css/_layout/rightside.styl | 19 ++++++++++ source/js/main.js | 45 ++++++++++++++---------- source/js/utils.js | 13 ++++++- 10 files changed, 83 insertions(+), 71 deletions(-) diff --git a/_config.yml b/_config.yml index d0ba6de..bf08b04 100644 --- a/_config.yml +++ b/_config.yml @@ -185,6 +185,7 @@ toc: number: true expand: false style_simple: false # for post + scroll_percent: true post_copyright: enable: true @@ -632,8 +633,7 @@ subtitle: # source 調用第三方服務 # source: false 關閉調用 # source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/ - # source: 2 調用一句網（簡體） http://yijuzhan.com/ - # source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/ + # source: 2 調用今日詩詞（簡體） https://www.jinrishici.com/ # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 @@ -753,6 +753,9 @@ darkmode: # autoChangeMode: false autoChangeMode: false +# show scroll percent in scroll-to-top button +rightside_scroll_percent: false + # Don't modify the following settings unless you know how they work (非必要請不要修改 ) # Choose: readmode,translate,darkmode,hideAside,toc,chat,comment # Don't repeat 不要重複 @@ -894,7 +897,7 @@ CDN: # when set it to local, you need to install hexo-butterfly-extjs third_party_provider: jsdelivr - # Add version number to CDN, true or false + # Add version number to CDN, true or false version: false # Custom format @@ -952,4 +955,4 @@ CDN: # prismjs_lineNumber_js: # prismjs_autoloader: # artalk_js: - # artalk_css: \ No newline at end of file + # artalk_css: diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 5a8b8f5..ed81219 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -120,5 +120,9 @@ script. }, isPhotoFigcaption: !{theme.photofigcaption}, islazyload: !{theme.lazyload.enable}, - isAnchor: !{theme.anchor.auto_update || false} + isAnchor: !{theme.anchor.auto_update || false}, + percent: { + toc: !{theme.toc.scroll_percent}, + rightside: !{theme.rightside_scroll_percent}, + } } diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 9696d0b..03c6aaa 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -57,4 +57,5 @@ mixin rightsideItem(array) +rightsideItem(showArray) button#go-up(type="button" title=_p("rightside.back_to_top")) + span.scroll-percent i.fas.fa-arrow-up \ No newline at end of file diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug index 9236757..a565a66 100644 --- a/layout/includes/third-party/subtitle.pug +++ b/layout/includes/third-party/subtitle.pug @@ -36,38 +36,6 @@ case source } when 2 - script. - function subtitleType () { - getScript('https://yijuzhan.com/api/word.php?m=js').then(() => { - 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: !{startDelay}, - typeSpeed: !{typeSpeed}, - loop: !{loop}, - backSpeed: !{backSpeed}, - }) - } else { - document.getElementById('subtitle').innerHTML = con - } - }) - } - - if (!{effect}) { - if (typeof Typed === 'function') { - subtitleType() - } else { - getScript('!{url_for(theme.asset.typed)}').then(subtitleType) - } - } else { - subtitleType() - } - - when 3 script. function subtitleType () { getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => { diff --git a/package.json b/package.json index 38882af..3dd25be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.5.1", + "version": "4.6.0-b1", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/init.js b/scripts/events/init.js index 69c2807..1bd0570 100644 --- a/scripts/events/init.js +++ b/scripts/events/init.js @@ -1,8 +1,7 @@ -const logger = require('hexo-log')() - hexo.extend.filter.register('before_generate', () => { // Get first two digits of the Hexo version number const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1') + const logger = hexo.log if (hexoVer < 5.3) { logger.error('Please update Hexo to V5.3.0 or higher!') @@ -13,7 +12,9 @@ hexo.extend.filter.register('before_generate', () => { if (hexo.locals.get) { const data = hexo.locals.get('data') if (data && data.butterfly) { - logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ") + logger.error( + " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' " + ) logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ") process.exit(-1) } diff --git a/scripts/events/welcome.js b/scripts/events/welcome.js index 77eb662..f4c018a 100644 --- a/scripts/events/welcome.js +++ b/scripts/events/welcome.js @@ -1,17 +1,13 @@ -const logger = require('hexo-log')() - hexo.on('ready', () => { const { version } = require('../../package.json') - logger.info(` + hexo.log.info(` =================================================================== - - ##### # # ##### ##### ###### ##### ###### # # # - # # # # # # # # # # # # # - ##### # # # # ##### # # ##### # # - # # # # # # # ##### # # # - # # # # # # # # # # # # - ##### #### # # ###### # # # ###### # - + ##### # # ##### ##### ###### ##### ###### # # # + # # # # # # # # # # # # # + ##### # # # # ##### # # ##### # # + # # # # # # # ##### # # # + # # # # # # # # # # # # + ##### #### # # ###### # # # ###### # ${version} ===================================================================`) }) diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 6daea56..0c25205 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -47,3 +47,22 @@ +maxWidth900() #hide-aside-btn display: none + + if hexo-config('rightside_scroll_percent') + #go-up + .scroll-percent + display: none + + &.show-percent + .scroll-percent + display: block + + & + i + display: none + + &:hover + .scroll-percent + display: none + + & + i + display: block diff --git a/source/js/main.js b/source/js/main.js index 2e29ac8..4c62fca 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -251,6 +251,21 @@ document.addEventListener('DOMContentLoaded', function () { getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) }) } + /** + * rightside scroll percent + */ + const rightsideScrollPercent = currentTop => { + const perNum = btf.getScrollPercent(currentTop,document.body) + const $goUp = document.getElementById('go-up') + if ( perNum < 95 ) { + $goUp.classList.add('show-percent') + $goUp.querySelector('.scroll-percent').textContent = perNum + } + else { + $goUp.classList.remove('show-percent') + } + } + /** * 滾動處理 */ @@ -276,6 +291,7 @@ document.addEventListener('DOMContentLoaded', function () { const $header = document.getElementById('page-header') const isChatBtnHide = typeof chatBtnHide === 'function' const isChatBtnShow = typeof chatBtnShow === 'function' + const isShowPercent = GLOBAL_CONFIG.percent.rightside const scrollTask = btf.throttle(() => { const currentTop = window.scrollY || document.documentElement.scrollTop @@ -305,9 +321,12 @@ document.addEventListener('DOMContentLoaded', function () { $rightside.style.cssText = "opacity: ''; transform: ''" } + isShowPercent && rightsideScrollPercent(currentTop) + if (document.body.scrollHeight <= innerHeight) { $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)' } + }, 200) window.scrollCollect = scrollTask @@ -325,26 +344,15 @@ document.addEventListener('DOMContentLoaded', function () { if (!($article && (isToc || isAnchor))) return - let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand + let $tocLink, $cardToc, autoScrollToc, $tocPercentage, 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') + $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' @@ -433,13 +441,14 @@ document.addEventListener('DOMContentLoaded', function () { } // main of scroll - window.tocScrollFn = function () { - return btf.throttle(function () { + window.tocScrollFn = btf.throttle(()=>{ const currentTop = window.scrollY || document.documentElement.scrollTop - isToc && scrollPercent(currentTop) + if (isToc && GLOBAL_CONFIG.percent.toc) { + $tocPercentage.textContent = btf.getScrollPercent(currentTop,$article) + } findHeadPosition(currentTop) - }, 100)() - } + }, 100) + window.addEventListener('scroll', tocScrollFn) } diff --git a/source/js/utils.js b/source/js/utils.js index a1be368..3460b6a 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -88,7 +88,7 @@ const btf = { const minuteCount = dateDiff / minute if (monthCount > 12) { - result = datePost.toLocaleDateString().replace(/\//g, '-') + result = datePost.toISOString().slice(0,10) } else if (monthCount >= 1) { result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month } else if (dayCount >= 1) { @@ -274,5 +274,16 @@ const btf = { title: title }, title, anchor) } + }, + + getScrollPercent: (currentTop,ele) => { + const docHeight = ele.clientHeight + const winHeight = document.documentElement.clientHeight + const headerHeight = ele.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 + return percentage } }