From 3a1ed95c32c59291f4192706dea6b52aa1b5a6f6 Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 9 Dec 2020 15:58:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=B3=E4=B8=8B=E8=A7=92=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=AD=97=E9=AB=94=E8=AA=BF=E6=95=B4=E6=8C=89=E9=88=95?= =?UTF-8?q?=20fix:=20=E4=BF=AE=E5=BE=A9=E6=B2=92=E6=9C=89=E6=BB=BE?= =?UTF-8?q?=E5=8B=95=E6=A2=9D=E6=99=82=EF=BC=8C=E5=8F=B3=E4=B8=8B=E8=A7=92?= =?UTF-8?q?=E6=8C=89=E9=88=95=E9=A1=AF=E7=A4=BA=E5=95=8F=E9=A1=8C=20=20clo?= =?UTF-8?q?se=20#439=20remove:=20=E5=88=AA=E9=99=A4ICP=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=EF=BC=8C=20=E5=A6=82=E9=9C=80=E8=A6=81=EF=BC=8C=E8=AB=8B?= =?UTF-8?q?=E4=BD=BF=E7=94=A8custom=5Ftext=E9=85=8D=E7=BD=AE=20close=20#43?= =?UTF-8?q?5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 8 +-- languages/default.yml | 2 + languages/en.yml | 2 + languages/zh-CN.yml | 2 + languages/zh-TW.yml | 2 + layout/includes/footer.pug | 6 -- layout/includes/head/js.pug | 6 ++ layout/includes/rightside.pug | 9 ++- .../includes/third-party/comments/twikoo.pug | 2 +- package.json | 2 +- source/js/main.js | 62 ++++++++++--------- 11 files changed, 60 insertions(+), 43 deletions(-) diff --git a/_config.yml b/_config.yml index 6022561..275b3f9 100644 --- a/_config.yml +++ b/_config.yml @@ -375,11 +375,6 @@ footer: since: 2020 custom_text: copyright: true # Copyright of theme and framework - ICP: # Chinese ICP License - enable: false - url: - text: - icon: /img/icp.png # Analysis # -------------------------------------- @@ -681,6 +676,9 @@ newest_comments: # Bottom right button (右下角按鈕) # -------------------------------------- +# Change font size +change_font_size: false + # Conversion between Traditional and Simplified Chinese (簡繁轉換) translate: enable: false diff --git a/languages/default.yml b/languages/default.yml index 37c9fd5..0983604 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -88,6 +88,8 @@ 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 6e1e939..ae08d27 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -88,6 +88,8 @@ 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 614b4ee..753fc14 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -89,6 +89,8 @@ 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 3a3ccaa..21c4cda 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -89,6 +89,8 @@ share: 分享 rightside: readmode_title: 閱讀模式 + font_plus_title: 放大字型 + font_minus_title: 縮小字型 translate_title: 簡繁轉換 night_mode_title: 淺色和深色模式轉換 back_to_top: 回到頂部 diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug index fc612f9..4d2ae79 100644 --- a/layout/includes/footer.pug +++ b/layout/includes/footer.pug @@ -15,9 +15,3 @@ a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly' if theme.footer.custom_text .footer_custom_text!=`${theme.footer.custom_text}` - if theme.footer.ICP.enable - .icp - a(href=theme.footer.ICP.url) - if theme.footer.ICP.icon - img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP') - span=theme.footer.ICP.text diff --git a/layout/includes/head/js.pug b/layout/includes/head/js.pug index 058b80a..09044df 100644 --- a/layout/includes/head/js.pug +++ b/layout/includes/head/js.pug @@ -60,6 +60,12 @@ script | document.documentElement.classList.remove('hide-aside') | } | } + + if theme.change_font_size + | const fontSizeVal = saveToLocal.get('global-font-size') + | if (fontSizeVal !== undefined) { + | document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px') + | } | })() diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 8da2411..2b5658f 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -3,6 +3,11 @@ 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 @@ -13,13 +18,13 @@ i.fas.fa-arrows-alt-h #rightside-config-show if is_post() - if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)) + if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size) button#rightside_config(type="button" title=_p("rightside.setting")) i.fas.fa-cog.fa-spin if showToc && theme.aside.mobile button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) i.fas.fa-list-ul - else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) + else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size button#rightside_config(type="button" title=_p("rightside.setting")) i.fas.fa-cog.fa-spin diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 7422c1b..5a18d17 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -33,7 +33,7 @@ script. } if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) { - if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo) + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) else loadTwikoo(true) } else { window.loadOtherComment = () => { diff --git a/package.json b/package.json index 7b0f84f..4f6dbbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.4.0-b2", + "version": "3.4.0-b3", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/js/main.js b/source/js/main.js index fdbbac6..8886e87 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -299,10 +299,11 @@ document.addEventListener('DOMContentLoaded', function () { */ const scrollFn = function () { const $rightside = document.getElementById('rightside') + const innerHeight = window.innerHeight + 56 - // 當沒有滾動條的時候 - if (document.body.scrollHeight <= window.innerHeight) { - $rightside.style.display = 'block' + // 當滾動條小于 56 的時候 + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' return } @@ -338,6 +339,10 @@ document.addEventListener('DOMContentLoaded', function () { } $rightside.style.cssText = "opacity: ''; transform: ''" } + + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + } }, 200)) // find the scroll direction @@ -506,28 +511,29 @@ document.addEventListener('DOMContentLoaded', function () { ? saveToLocal.set('aside-status', 'show', 2) : saveToLocal.set('aside-status', 'hide', 2) $htmlDom.toggle('hide-aside') + }, + + adjustFontSize: (plus) => { + const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size')) + let newValue = '' + detectFontSizeChange = true + if (plus) { + if (fontSizeVal >= 20) return + newValue = fontSizeVal + 1 + document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() + } else { + if (fontSizeVal <= 10) return + newValue = fontSizeVal - 1 + document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() + } + + saveToLocal.set('global-font-size', newValue, 2) + // document.getElementById('font-text').innerText = newValue } } - // function aa (num,target) { - // const a = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size')) - // let newValue = '' - // detectFontSizeChange = true - // if (num) { - // if (a >= 20) return - // newValue = a + 1 - // document.documentElement.style.setProperty('--global-font-size', newValue + 'px') - // !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() - // } else { - // if (a <= 10) return - // newValue = a - 1 - // document.documentElement.style.setProperty('--global-font-size', newValue + 'px') - // document.getElementById('nav').classList.contains('hide-menu') && adjustMenu() - // } - - // document.getElementById('font-text').innerText = newValue - // } - document.getElementById('rightside').addEventListener('click', function (e) { const $target = e.target.id || e.target.parentNode.id switch ($target) { @@ -546,12 +552,12 @@ document.addEventListener('DOMContentLoaded', function () { case 'hide-aside-btn': rightSideFn.hideAsideBtn() break - // case 'font-plus': - // aa(true) - // break - // case 'font-minus': - // aa() - // break + case 'font-plus': + rightSideFn.adjustFontSize(true) + break + case 'font-minus': + rightSideFn.adjustFontSize() + break default: break }