d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

hexo 回顶 按钮 样式

Browse Source
This commit is contained in:
tangly1024
2022-03-16 13:12:05 +08:00
parent c2075dde1c
commit c8c1e71480
6 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
themes/hexo/LayoutBase.js
View File

@@ -17,7 +17,7 @@ import FloatDarkModeButton from './components/FloatDarkModeButton'
const LayoutBase = (props) => {
const { children, headerSlot, floatSlot, meta } = props
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0) // 页面阅读百分比
// const [percent, changePercent] = useState(0) // 页面阅读百分比
const scrollListener = () => {
const targetRef = document.getElementById('wrapper')
@@ -31,7 +31,7 @@ const LayoutBase = (props) => {
if (shouldShow !== show) {
switchShow(shouldShow)
}
changePercent(per)
// changePercent(per)
}
useEffect(() => {
smoothscroll.polyfill()
@@ -55,11 +55,11 @@ const LayoutBase = (props) => {
</main>
{/* 右下角悬浮 */}
<div className='bottom-12 right-0 fixed justify-end z-20 font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-500 animate__faster flex flex-col items-center cursor-pointer '}>
<div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-blue-400 rounded'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-500 animate__faster flex flex-col items-center cursor-pointer '}>
<FloatDarkModeButton/>
{floatSlot}
<JumpToTopButton percent={percent}/>
<JumpToTopButton/>
</div>
</div>

2
themes/hexo/components/FloatDarkModeButton.js
View File

@@ -21,7 +21,7 @@ export default function FloatDarkModeButton () {
return (
<div
onClick={handleChangeDarkMode}
className={'justify-center items-center text-white bg-gray-400 w-7 h-7 text-center transform hover:scale-105 duration-200'
className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
}
>
<i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>

2
themes/hexo/components/JumpToCommentButton.js
View File

@@ -17,7 +17,7 @@ const JumpToCommentButton = () => {
}
}
return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-7 text-center' onClick={navToComment} >
return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
<i className='fas fa-comment text-xs' />
</div>)
}

2
themes/hexo/components/JumpToTopButton.js
View File

@@ -15,7 +15,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
return <></>
}
const { locale } = useGlobal()
return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
<div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
{showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
</div>)

4
themes/hexo/components/PaginationNumber.js
View File

@@ -37,7 +37,7 @@ const PaginationNumber = ({ page, totalPage }) => {
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<div
rel='next'
className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-t-2 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-blue-300 dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
>
<i className='fas fa-angle-right'/>
</div>
@@ -48,7 +48,7 @@ const PaginationNumber = ({ page, totalPage }) => {
function getPageElement (page, currentPage) {
return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-t-2 duration-500 border-white hover:border-blue-400 ') +
<a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-b duration-500 border-blue-300 hover:border-blue-400 ') +
' border-white dark:border-blue-700 dark:hover:border-blue-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
{page}
</a>

2
themes/hexo/components/TocDrawerButton.js
View File

@@ -14,7 +14,7 @@ const TocDrawerButton = (props) => {
return <></>
}
const { locale } = useGlobal()
return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer text-white transform duration-200 flex justify-center items-center bg-gray-400 w-7 h-7 text-center' title={locale.POST.TOP} >
return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
<i className='fas fa-list-ol text-xs'/>
</div>)
}