From 73a4e26dafd89d9f8e6327c9759940fa1a324a5e Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 5 Jun 2024 15:46:47 +0800 Subject: [PATCH] =?UTF-8?q?hexo=20=E5=BE=AE=E8=B0=83=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E9=9A=8F=E6=9C=BA=E8=B7=B3=E8=BD=AC=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...rkModeButton.js => ButtonFloatDarkMode.js} | 18 ++++--- ...ommentButton.js => ButtonJumpToComment.js} | 21 +++++--- ...{JumpToTopButton.js => ButtonJumpToTop.js} | 6 +-- themes/hexo/components/ButtonRandomPost.js | 29 +++++++++++ .../hexo/components/ButtonRandomPostMini.js | 29 +++++++++++ themes/hexo/components/Header.js | 3 ++ themes/hexo/components/RightFloatArea.js | 51 +++++++++++-------- themes/hexo/config.js | 8 ++- themes/hexo/index.js | 10 ++-- 9 files changed, 133 insertions(+), 42 deletions(-) rename themes/hexo/components/{FloatDarkModeButton.js => ButtonFloatDarkMode.js} (70%) rename themes/hexo/components/{JumpToCommentButton.js => ButtonJumpToComment.js} (55%) rename themes/hexo/components/{JumpToTopButton.js => ButtonJumpToTop.js} (89%) create mode 100644 themes/hexo/components/ButtonRandomPost.js create mode 100644 themes/hexo/components/ButtonRandomPostMini.js diff --git a/themes/hexo/components/FloatDarkModeButton.js b/themes/hexo/components/ButtonFloatDarkMode.js similarity index 70% rename from themes/hexo/components/FloatDarkModeButton.js rename to themes/hexo/components/ButtonFloatDarkMode.js index 6a7fb97e..6737020b 100644 --- a/themes/hexo/components/FloatDarkModeButton.js +++ b/themes/hexo/components/ButtonFloatDarkMode.js @@ -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 (
- + className={ + 'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200' + }> +
) } diff --git a/themes/hexo/components/JumpToCommentButton.js b/themes/hexo/components/ButtonJumpToComment.js similarity index 55% rename from themes/hexo/components/JumpToCommentButton.js rename to themes/hexo/components/ButtonJumpToComment.js index 60f1d1e9..6a5b55a6 100644 --- a/themes/hexo/components/JumpToCommentButton.js +++ b/themes/hexo/components/ButtonJumpToComment.js @@ -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 (
- -
) + return ( +
+ +
+ ) } -export default JumpToCommentButton +export default ButtonJumpToComment diff --git a/themes/hexo/components/JumpToTopButton.js b/themes/hexo/components/ButtonJumpToTop.js similarity index 89% rename from themes/hexo/components/JumpToTopButton.js rename to themes/hexo/components/ButtonJumpToTop.js index 9a2b9712..23ee05d8 100644 --- a/themes/hexo/components/JumpToTopButton.js +++ b/themes/hexo/components/ButtonJumpToTop.js @@ -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 }) => { ) } -export default JumpToTopButton +export default ButtonJumpToTop diff --git a/themes/hexo/components/ButtonRandomPost.js b/themes/hexo/components/ButtonRandomPost.js new file mode 100644 index 00000000..a43f8509 --- /dev/null +++ b/themes/hexo/components/ButtonRandomPost.js @@ -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 ( +
+ +
+ ) +} diff --git a/themes/hexo/components/ButtonRandomPostMini.js b/themes/hexo/components/ButtonRandomPostMini.js new file mode 100644 index 00000000..98eadeb1 --- /dev/null +++ b/themes/hexo/components/ButtonRandomPostMini.js @@ -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 ( +
+ +
+ ) +} diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js index 9c3da194..29a83d71 100644 --- a/themes/hexo/components/Header.js +++ b/themes/hexo/components/Header.js @@ -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 => { )} {showSearchButton && } + {showRandomButton && } diff --git a/themes/hexo/components/RightFloatArea.js b/themes/hexo/components/RightFloatArea.js index d7fadce5..162081b2 100644 --- a/themes/hexo/components/RightFloatArea.js +++ b/themes/hexo/components/RightFloatArea.js @@ -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 ( -
-
- - {floatSlot} - -
-
+
+
+ + {floatSlot} + +
+
) } diff --git a/themes/hexo/config.js b/themes/hexo/config.js index dddfbe83..024c12e0 100644 --- a/themes/hexo/config.js +++ b/themes/hexo/config.js @@ -1,7 +1,12 @@ const CONFIG = { HEXO_HOME_BANNER_ENABLE: true, // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。 - HEXO_HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字 + HEXO_HOME_BANNER_GREETINGS: [ + 'Hi，我是一个程序员', + 'Hi，我是一个打工人', + 'Hi，我是一个干饭人', + '欢迎来到我的博客🎉' + ], // 首页大图标语文字 HEXO_HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮 // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。 @@ -15,6 +20,7 @@ const CONFIG = { HEXO_MENU_TAG: true, // 显示标签 HEXO_MENU_ARCHIVE: true, // 显示归档 HEXO_MENU_SEARCH: true, // 显示搜索 + HEXO_MENU_RANDOM: true, // 显示随机跳转按钮 HEXO_POST_LIST_COVER: true, // 列表显示文章封面 HEXO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大 diff --git a/themes/hexo/index.js b/themes/hexo/index.js index 8dd08ec9..4988dad9 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -17,11 +17,12 @@ import ArticleRecommend from './components/ArticleRecommend' import BlogPostArchive from './components/BlogPostArchive' import BlogPostListPage from './components/BlogPostListPage' import BlogPostListScroll from './components/BlogPostListScroll' +import ButtonJumpToComment from './components/ButtonJumpToComment' +import ButtonRandomPostMini from './components/ButtonRandomPostMini' import Card from './components/Card' import Footer from './components/Footer' import Header from './components/Header' import Hero from './components/Hero' -import JumpToCommentButton from './components/JumpToCommentButton' import PostHero from './components/PostHero' import RightFloatArea from './components/RightFloatArea' import SearchNav from './components/SearchNav' @@ -51,8 +52,9 @@ export const useHexoGlobal = () => useContext(ThemeGlobalHexo) const LayoutBase = props => { const { post, children, slotTop, className } = props const { onLoading, fullWidth } = useGlobal() - const router = useRouter() + const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG) + const headerSlot = post ? ( ) : router.route === '/' && @@ -63,6 +65,7 @@ const LayoutBase = props => { const drawerRight = useRef(null) const tocRef = isBrowser ? document.getElementById('article-wrapper') : null + // 悬浮按钮内容 const floatSlot = ( <> {post?.toc?.length > 1 && ( @@ -74,7 +77,8 @@ const LayoutBase = props => { /> )} - {post && } + {post && } + {showRandomButton && } )