d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-01 23:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

hexo 微调，添加随机跳转按钮

Browse Source
This commit is contained in:
tangly1024.com
2024-06-05 15:46:47 +08:00
parent eead53dbe0
commit 73a4e26daf
9 changed files with 133 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
themes/hexo/components/FloatDarkModeButton.js → themes/hexo/components/ButtonFloatDarkMode.js
View File

@@ -1,9 +1,12 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { saveDarkModeToLocalStorage } from '@/themes/theme'
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
export default function FloatDarkModeButton () {
/**
* 深色模式按钮
*/
export default function ButtonDarkModeFloat() {
const { isDarkMode, updateDarkMode } = useGlobal()
if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
@@ -23,10 +26,13 @@ export default function FloatDarkModeButton () {
return (
<div
onClick={handleChangeDarkMode}
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`}/>
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`}
/>
</div>
)
}

21
themes/hexo/components/JumpToCommentButton.js → themes/hexo/components/ButtonJumpToComment.js
View File

@@ -1,19 +1,22 @@
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
import CONFIG from '../config'
/**
* 跳转到评论区
* @returns {JSX.Element}
* @constructor
*/
const JumpToCommentButton = () => {
const ButtonJumpToComment = () => {
if (!siteConfig('HEXO_WIDGET_TO_COMMENT', null, CONFIG)) {
return <></>
}
function navToComment() {
if (document.getElementById('comment')) {
window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
window.scrollTo({
top: document.getElementById('comment').offsetTop,
behavior: 'smooth'
})
}
// 兼容性不好
// const commentElement = document.getElementById('comment')
@@ -21,9 +24,13 @@ const JumpToCommentButton = () => {
// commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
}
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>)
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>
)
}
export default JumpToCommentButton
export default ButtonJumpToComment

6
themes/hexo/components/JumpToTopButton.js → themes/hexo/components/ButtonJumpToTop.js
View File

@@ -1,6 +1,6 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
/**
* 跳转到网页顶部
@@ -10,7 +10,7 @@ import { siteConfig } from '@/lib/config'
* @returns {JSX.Element}
* @constructor
*/
const JumpToTopButton = ({ showPercent = true, percent }) => {
const ButtonJumpToTop = ({ showPercent = true, percent }) => {
const { locale } = useGlobal()
if (!siteConfig('HEXO_WIDGET_TO_TOP', null, CONFIG)) {
@@ -22,4 +22,4 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
</div>)
}
export default JumpToTopButton
export default ButtonJumpToTop

29
themes/hexo/components/ButtonRandomPost.js Normal file
View File

@@ -0,0 +1,29 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
/**
* 随机跳转到一个文章
*/
export default function ButtonRandomPost(props) {
const { latestPosts } = props
const router = useRouter()
const { locale } = useGlobal()
/**
* 随机跳转文章
*/
function handleClick() {
const randomIndex = Math.floor(Math.random() * latestPosts.length)
const randomPost = latestPosts[randomIndex]
router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
}
return (
<div
title={locale.MENU.WALK_AROUND}
className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'
onClick={handleClick}>
<i className='fa-solid fa-podcast'></i>
</div>
)
}

29
themes/hexo/components/ButtonRandomPostMini.js Normal file
View File

@@ -0,0 +1,29 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
/**
* 随机跳转到一个文章
*/
export default function ButtonRandomPostMini(props) {
const { latestPosts } = props
const router = useRouter()
const { locale } = useGlobal()
/**
* 随机跳转文章
*/
function handleClick() {
const randomIndex = Math.floor(Math.random() * latestPosts.length)
const randomPost = latestPosts[randomIndex]
router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
}
return (
<div
title={locale.MENU.WALK_AROUND}
className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
onClick={handleClick}>
<i className='fa-solid fa-podcast'></i>
</div>
)
}

3
themes/hexo/components/Header.js
View File

@@ -5,6 +5,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useRef, useState } from 'react'
import CONFIG from '../config'
import ButtonRandomPost from './ButtonRandomPost'
import CategoryGroup from './CategoryGroup'
import Logo from './Logo'
import { MenuListTop } from './MenuListTop'
@@ -28,6 +29,7 @@ const Header = props => {
const router = useRouter()
const [isOpen, changeShow] = useState(false)
const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
const toggleMenuOpen = () => {
changeShow(!isOpen)
@@ -172,6 +174,7 @@ const Header = props => {
)}
</div>
{showSearchButton && <SearchButton />}
{showRandomButton && <ButtonRandomPost {...props} />}
</div>
</div>
</div>

51
themes/hexo/components/RightFloatArea.js
View File

@@ -1,7 +1,7 @@
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useState } from 'react'
import FloatDarkModeButton from './FloatDarkModeButton'
import JumpToTopButton from './JumpToTopButton'
import ButtonDarkModeFloat from './ButtonFloatDarkMode'
import ButtonJumpToTop from './ButtonJumpToTop'
/**
* 悬浮在右下角的按钮，当页面向下滚动100px时会出现
@@ -10,20 +10,22 @@ import JumpToTopButton from './JumpToTopButton'
*/
export default function RightFloatArea({ floatSlot }) {
const [showFloatButton, switchShow] = useState(false)
const scrollListener = useCallback(throttle(() => {
const targetRef = document.getElementById('wrapper')
const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
const scrollListener = useCallback(
throttle(() => {
const targetRef = document.getElementById('wrapper')
const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
// 右下角显示悬浮按钮
if (shouldShow !== showFloatButton) {
switchShow(shouldShow)
}
}, 200))
// 右下角显示悬浮按钮
if (shouldShow !== showFloatButton) {
switchShow(shouldShow)
}
}, 200)
)
useEffect(() => {
document.addEventListener('scroll', scrollListener)
@@ -31,12 +33,17 @@ export default function RightFloatArea({ floatSlot }) {
}, [])
return (
<div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + ' duration-300 transition-all bottom-12 right-1 fixed justify-end z-20 text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
<div className={'justify-center flex flex-col items-center cursor-pointer'}>
<FloatDarkModeButton />
{floatSlot}
<JumpToTopButton />
</div>
</div>
<div
className={
(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') +
' duration-300 transition-all bottom-12 right-1 fixed justify-end z-20 text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'
}>
<div
className={'justify-center flex flex-col items-center cursor-pointer'}>
<ButtonDarkModeFloat />
{floatSlot}
<ButtonJumpToTop />
</div>
</div>
)
}