feat: 右下角增加字體調整按鈕

fix: 修復沒有滾動條時,右下角按鈕顯示問題  close #439
remove: 刪除ICP配置, 如需要,請使用custom_text配置 close #435
pull/465/head
Jerry 4 years ago
parent 02af3077e7
commit 3a1ed95c32

@ -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

@ -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

@ -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

@ -89,6 +89,8 @@ share: 分享
rightside:
readmode_title: 阅读模式
font_plus_title: 放大字体
font_minus_title: 缩小字体
translate_title: 简繁转换
night_mode_title: 浅色和深色模式转换
back_to_top: 回到顶部

@ -89,6 +89,8 @@ share: 分享
rightside:
readmode_title: 閱讀模式
font_plus_title: 放大字型
font_minus_title: 縮小字型
translate_title: 簡繁轉換
night_mode_title: 淺色和深色模式轉換
back_to_top: 回到頂部

@ -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

@ -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')
| }
| })()

@ -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

@ -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 = () => {

@ -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": {

@ -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
}

Loading…
Cancel
Save