From a4d8374e2411623b4c53c355b2ef9af589dd03cf Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 8 Mar 2022 14:32:09 +0800 Subject: [PATCH] =?UTF-8?q?Hexo=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Comment.js | 2 +- themes/Hexo/LayoutBase.js | 6 ++- themes/Hexo/LayoutSlug.js | 13 +++---- themes/Hexo/components/BlogPostCard.js | 6 +-- themes/Hexo/components/FloatDarkModeButton.js | 30 +++++++++++++++ themes/Hexo/components/HeaderArticle.js | 2 +- themes/Hexo/components/JumpToCommentButton.js | 25 +++++++++++++ themes/Hexo/components/JumpToTopButton.js | 8 ++-- themes/Hexo/components/MenuButtonGroupTop.js | 37 +++++++++++++++++++ themes/Hexo/components/TopNav.js | 25 +++++++------ themes/Hexo/config_hexo.js | 2 + 11 files changed, 126 insertions(+), 30 deletions(-) create mode 100644 themes/Hexo/components/FloatDarkModeButton.js create mode 100644 themes/Hexo/components/JumpToCommentButton.js create mode 100644 themes/Hexo/components/MenuButtonGroupTop.js diff --git a/components/Comment.js b/components/Comment.js index 075b6ba6..82be7170 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -23,7 +23,7 @@ const Comment = ({ frontMatter }) => { const router = useRouter() const { locale } = useGlobal() return ( -
+
{BLOG.COMMENT_UTTERRANCES_REPO && (
diff --git a/themes/Hexo/LayoutBase.js b/themes/Hexo/LayoutBase.js index 96779c6f..76322696 100644 --- a/themes/Hexo/LayoutBase.js +++ b/themes/Hexo/LayoutBase.js @@ -6,6 +6,7 @@ import JumpToTopButton from './components/JumpToTopButton' import SideRight from './components/SideRight' import TopNav from './components/TopNav' import smoothscroll from 'smoothscroll-polyfill' +import FloatDarkModeButton from './components/FloatDarkModeButton' /** * 基础布局 采用左右两侧布局，移动端使用顶部导航栏 @@ -55,9 +56,10 @@ const LayoutBase = (props) => { {/* 右下角悬浮 */}
-
- +
+ {floatSlot} +
diff --git a/themes/Hexo/LayoutSlug.js b/themes/Hexo/LayoutSlug.js index 901dc676..02642635 100644 --- a/themes/Hexo/LayoutSlug.js +++ b/themes/Hexo/LayoutSlug.js @@ -10,6 +10,7 @@ import 'prismjs/components/prism-typescript' import { useRef } from 'react' import ArticleDetail from './components/ArticleDetail' import HeaderArticle from './components/HeaderArticle' +import JumpToCommentButton from './components/JumpToCommentButton' import TocDrawer from './components/TocDrawer' import TocDrawerButton from './components/TocDrawerButton' import LayoutBase from './LayoutBase' @@ -31,18 +32,16 @@ export const LayoutSlug = props => { const drawerRight = useRef(null) const targetRef = typeof window !== 'undefined' ? document.getElementById('container') : null - const floatSlot = - post?.toc?.length > 1 - ? ( -
+ const floatSlot = <> + {post?.toc?.length > 1 &&
{ drawerRight?.current?.handleSwitchVisible() }} /> -
- ) - : null +
} + + return ( {
- + {post.title} @@ -22,7 +22,7 @@ const BlogPostCard = ({ post, showSummary }) => { @@ -49,7 +49,7 @@ const BlogPostCard = ({ post, showSummary }) => { - {post.category} + {post.category}
diff --git a/themes/Hexo/components/FloatDarkModeButton.js b/themes/Hexo/components/FloatDarkModeButton.js new file mode 100644 index 00000000..f69d58f6 --- /dev/null +++ b/themes/Hexo/components/FloatDarkModeButton.js @@ -0,0 +1,30 @@ +import { useGlobal } from '@/lib/global' +import { saveDarkModeToCookies } from '@/lib/theme' +import CONFIG_HEXO from '../config_hexo' + +export default function FloatDarkModeButton () { + if (!CONFIG_HEXO.WIDGET_DARK_MODE) { + return <> + } + + const { isDarkMode, updateDarkMode } = useGlobal() + // 用户手动设置主题 + const handleChangeDarkMode = () => { + const newStatus = !isDarkMode + saveDarkModeToCookies(newStatus) + updateDarkMode(newStatus) + const htmlElement = document.getElementsByTagName('html')[0] + htmlElement.classList?.remove(newStatus ? 'light' : 'dark') + htmlElement.classList?.add(newStatus ? 'dark' : 'light') + } + + return ( +
+ +
+ ) +} diff --git a/themes/Hexo/components/HeaderArticle.js b/themes/Hexo/components/HeaderArticle.js index 0e5c11ab..5476b686 100644 --- a/themes/Hexo/components/HeaderArticle.js +++ b/themes/Hexo/components/HeaderArticle.js @@ -65,7 +65,7 @@ export default function HeaderArticle ({ post }) { passHref > - {date} + {date} diff --git a/themes/Hexo/components/JumpToCommentButton.js b/themes/Hexo/components/JumpToCommentButton.js new file mode 100644 index 00000000..a793c3c7 --- /dev/null +++ b/themes/Hexo/components/JumpToCommentButton.js @@ -0,0 +1,25 @@ +import React from 'react' +import CONFIG_HEXO from '../config_hexo' + +/** + * 跳转到评论区 + * @returns {JSX.Element} + * @constructor + */ +const JumpToCommentButton = () => { + if (!CONFIG_HEXO.WIDGET_TO_COMMENT) { + return <> + } + function navToComment () { + const commentElement = document.getElementById('comment') + if (commentElement) { + commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }) + } + } + + return (
+ +
) +} + +export default JumpToCommentButton diff --git a/themes/Hexo/components/JumpToTopButton.js b/themes/Hexo/components/JumpToTopButton.js index 2453a88d..fc1eee83 100644 --- a/themes/Hexo/components/JumpToTopButton.js +++ b/themes/Hexo/components/JumpToTopButton.js @@ -15,11 +15,11 @@ const JumpToTopButton = ({ showPercent = true, percent }) => { return <> } const { locale } = useGlobal() - return (
window.scrollTo({ top: 0, behavior: 'smooth' })} > -
- + return (
window.scrollTo({ top: 0, behavior: 'smooth' })} > +
+
- {showPercent && (
{percent}%
)} + {showPercent && (
{percent}%
)}
) } diff --git a/themes/Hexo/components/MenuButtonGroupTop.js b/themes/Hexo/components/MenuButtonGroupTop.js new file mode 100644 index 00000000..2f1c466f --- /dev/null +++ b/themes/Hexo/components/MenuButtonGroupTop.js @@ -0,0 +1,37 @@ +import React from 'react' +import Link from 'next/link' +import { useGlobal } from '@/lib/global' +import CONFIG_HEXO from '../config_hexo' + +const MenuButtonGroupTop = (props) => { + const { customNav } = props + const { locale } = useGlobal() + + let links = [ + { icon: 'fas fa-archive', name: locale.COMMON.ARTICLE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }, + { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY }, + { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG } + ] + + if (customNav) { + links = links.concat(customNav) + } + + return +} +export default MenuButtonGroupTop diff --git a/themes/Hexo/components/TopNav.js b/themes/Hexo/components/TopNav.js index c021183f..4dd4d929 100644 --- a/themes/Hexo/components/TopNav.js +++ b/themes/Hexo/components/TopNav.js @@ -9,7 +9,7 @@ import MenuButtonGroup from './MenuButtonGroup' import SearchDrawer from './SearchDrawer' import TagGroups from './TagGroups' import CONFIG_HEXO from '../config_hexo' -import SearchInput from './SearchInput' +import MenuButtonGroupTop from './MenuButtonGroupTop' let windowTop = 0 @@ -18,7 +18,8 @@ let windowTop = 0 * @param {*} param0 * @returns */ -const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) => { +const TopNav = (props) => { + const { tags, currentTag, categories, currentCategory } = props const { locale } = useGlobal() const searchDrawer = useRef() @@ -26,13 +27,13 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) => const scrollS = window.scrollY const nav = document.querySelector('#sticky-nav') const header = document.querySelector('#header') - const showNav = (scrollS > 10 && scrollS >= windowTop) || (header && scrollS < 5) // 非首页无大图时影藏顶部 滚动条置顶时隐藏 + const showNav = (scrollS > 10 && scrollS < windowTop) || (header && scrollS < 5) // 非首页无大图时影藏顶部 滚动条置顶时隐藏 if (!showNav) { - nav && nav.classList.replace('top-0', '-top-16') + nav && nav.classList.replace('top-0', '-top-20') windowTop = scrollS } else { - nav && nav.classList.replace('-top-16', 'top-0') + nav && nav.classList.replace('-top-20', 'top-0') windowTop = scrollS } }, 200) @@ -90,24 +91,24 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) => {/* 导航栏 */} -