Hexo 样式调整

2026-05-14 07:26:52 +00:00 · 2022-03-08 14:32:09 +08:00
parent f81affc23a
commit 3025bd8253
11 changed files with 126 additions and 30 deletions
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -23,7 +23,7 @@ const Comment = ({ frontMatter }) => {
  const router = useRouter()
  const { locale } = useGlobal()
  return (
-    <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
+    <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
      <Tabs>
        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
--- 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) => {

     {/* 右下角悬浮 */}
     <div className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
-        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
-          <JumpToTopButton percent={percent}/>
+        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex flex-col items-center cursor-pointer '}>
+          <FloatDarkModeButton/>
          {floatSlot}
+          <JumpToTopButton percent={percent}/>
        </div>
      </div>

--- 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
-      ? (
-      <div className="block lg:hidden">
+  const floatSlot = <>
+  {post?.toc?.length > 1 && <div className="block lg:hidden">
        <TocDrawerButton
          onClick={() => {
            drawerRight?.current?.handleSwitchVisible()
          }}
        />
-      </div>
-        )
-      : null
+      </div>}
+        <JumpToCommentButton/>
+      </>

  return (
    <LayoutBase
--- a/themes/Hexo/components/BlogPostCard.js
+++ b/themes/Hexo/components/BlogPostCard.js
@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {

      <div className='lg:p-8 p-4 flex flex-col w-full'>
        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer hover:underline text-3xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
            {post.title}
          </a>
        </Link>
@@ -22,7 +22,7 @@ const BlogPostCard = ({ post, showSummary }) => {
        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}>
          <div>
          <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'>{post.date.start_date}</a>
+            <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'><i className="far fa-calendar-alt mr-1"/>{post.date.start_date}</a>
          </Link>
          </div>
        </div>
@@ -49,7 +49,7 @@ const BlogPostCard = ({ post, showSummary }) => {

          <Link href={`/category/${post.category}`} passHref>
              <a className='cursor-pointer font-light text-sm hover:underline transform'>
-                <i className='mr-1 fas fa-folder' />{post.category}
+                <i className='mr-1 far fa-folder' />{post.category}
              </a>
            </Link>
            <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
--- a/themes/Hexo/components/FloatDarkModeButton.js
+++ 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 (
+    <div
+      onClick={handleChangeDarkMode}
+      className={'justify-center items-center text-white bg-blue-400 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>
+  )
+}
--- a/themes/Hexo/components/HeaderArticle.js
+++ b/themes/Hexo/components/HeaderArticle.js
@@ -65,7 +65,7 @@ export default function HeaderArticle ({ post }) {
                      passHref
                    >
                      <a className="pl-1 mr-2 cursor-pointer hover:underline border-b dark:border-gray-500 border-dashed">
-                        {date}
+                      <i className="far fa-calendar-alt mr-1"/> {date}
                      </a>
                    </Link>
                  </>
--- a/themes/Hexo/components/JumpToCommentButton.js
+++ 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 (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-blue-400 w-7 h-7 text-center' onClick={navToComment} >
+          <i className='fas fa-comment text-xs' />
+    </div>)
+}
+
+export default JumpToCommentButton
--- 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 (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div className='dark:text-gray-200' title={locale.POST.TOP} >
-          <i className='fas fa-arrow-up' />
+  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-blue-400 w-7 h-7 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 dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+        {showPercent && (<div className='text-xs block lg:hidden'>{percent}%</div>)}
    </div>)
 }

--- a/themes/Hexo/components/MenuButtonGroupTop.js
+++ 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 <nav id='nav' className='leading-8 flex justify-center font-sans w-full'>
+      {links.map(link => {
+        if (link.show) {
+          return <Link key={`${link.to}`} title={link.to} href={link.to} >
+          <a className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'} >
+              <div className='w-full flex dark:text-white text-sm items-center justify-center hover:scale-105 duration-200 transform'>
+                <i className={`${link.icon} mr-1`}/>
+                <div className='text-center'>{link.name}</div>
+              </div>
+            </a>
+          </Link>
+        } else {
+          return null
+        }
+      })}
+    </nav>
+}
+export default MenuButtonGroupTop
--- 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 }) =>
    <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>

    {/* 导航栏 */}
-    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} dark:bg-black dark:bg-opacity-50 dark:text-gray-200 bg-opacity-70 text-black w-full top-0 z-20 transform duration-500 font-sans`}>
-      <div className='w-full flex justify-between items-center px-4 py-2 shad'>
+    <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} dark:bg-black dark:bg-opacity-50 dark:text-gray-200 bg-opacity-80 text-black w-full top-0 z-20 transform duration-500 font-sans`}>
+      <div className='w-full flex justify-between items-center px-4 py-4 shadow'>
        <div className='flex'>
         <Logo/>
        </div>

        {/* 右侧功能 */}
-        <div className='mr-1 flex lg:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
+        <div className='mr-1 justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+          <div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div>
+          <div onClick={toggleMenuOpen} className='w-8 cursor-pointer flex lg:hidden'>
          { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
          </div>
        </div>
      </div>

-      <Collapse isOpen={isOpen} className='shadow-xl rounded-b-xl'>
+      <Collapse isOpen={isOpen} className='shadow-xl'>
        <div className='bg-white pt-1 py-2 px-5'>
-          <MenuButtonGroup postCount={postCount}/>
-          <SearchInput/>
+          <MenuButtonGroup {...props}/>
        </div>
      </Collapse>
    </div>
--- a/themes/Hexo/config_hexo.js
+++ b/themes/Hexo/config_hexo.js
@@ -15,6 +15,8 @@ const CONFIG_HEXO = {
  NAV_TYPE: 'autoCollapse', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部、屏幕顶部自动折叠，不固定

  WIDGET_TO_TOP: true,
+  WIDGET_TO_COMMENT: true, // 跳到评论区
+  WIDGET_DARK_MODE: true, // 夜间模式
  WIDGET_TOC: true // 移动端悬浮目录
 }
 export default CONFIG_HEXO