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 }