heo 主题一点点细节

avalon-plan · May 29, 2024 · f7258fd · f7258fd
1 parent 2372dde
commit f7258fd
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 136 deletions.
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
@@ -33,6 +33,9 @@ export default {
     COPYRIGHT: 'Copyright',
     AUTHOR: 'Author',
     URL: 'URL',
+    NOW: 'NOW',
+    RECOMMEND_BADGES: 'Recommend',
+    BLOG: 'Blog',
     POSTS: 'Posts',
     ARTICLE: 'Article',
     VISITORS: 'Visitors',

diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
@@ -35,6 +35,9 @@ export default {
     AUTHOR: '作者',
     URL: '链接',
     ANALYTICS: '统计',
+    RECOMMEND_BADGES: '荐',
+    BLOG: '博客',
+    NOW: '此刻',
     POSTS: '篇文章',
     ARTICLE: '文章',
     VISITORS: '位访客',

diff --git a/styles/notion.css b/styles/notion.css
@@ -1451,6 +1451,7 @@ code[class*='language-'] {
 
 .notion-collection-card-property .notion-page-title-text {
   border-bottom: 0 none;
+  @apply dark:text-gray-200;
 }
 
 .notion-collection-card-property

diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
@@ -50,11 +50,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
             {/* 分类 */}
             {post?.category && (
               <div
-                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
+                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-300 text-gray-600 hover:text-indigo-700 dark:hover:text-yellow-500`}>
                 <Link
                   passHref
                   href={`/category/${post.category}`}
-                  className='cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-yellow-700  dark:text-gray-600 transform'>
+                  className='cursor-pointer text-xs font-normal menu-link '>
                   {post.category}
                 </Link>
               </div>

diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
@@ -29,23 +29,40 @@ export default function CategoryBar(props) {
     }
   }
 
-  return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
+  return (
+    <div
+      id='category-bar'
+      className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
   ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''}  py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
+      <div
+        id='category-bar-items'
+        ref={categoryBarItemsRef}
+        className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
+        <MenuItem href='/' name={locale.NAV.INDEX} />
+        {categoryOptions?.map((c, index) => (
+          <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />
+        ))}
+      </div>
 
-        <div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
-            <MenuItem href='/' name={locale.NAV.INDEX} />
-            {categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
-        </div>
-
-        <div id='category-bar-next' className='flex items-center justify-center'>
-            <div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
-            {scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
-            </div>
-            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
-                {locale.MENU.CATEGORY}
-            </Link>
+      <div id='category-bar-next' className='flex items-center justify-center'>
+        <div
+          id='right'
+          className='cursor-pointer mx-2 dark:text-gray-300 dark:hover:text-yellow-600 hover:text-indigo-600'
+          onClick={handleToggleScroll}>
+          {scrollRight ? (
+            <ChevronDoubleLeft className={'w-5 h-5'} />
+          ) : (
+            <ChevronDoubleRight className={'w-5 h-5'} />
+          )}
         </div>
+        <Link
+          href='/category'
+          className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600 dark:hover:text-yellow-600'>
+          {locale.MENU.CATEGORY}
+        </Link>
+      </div>
     </div>
+  )
 }
 
 /**
@@ -57,7 +74,10 @@ const MenuItem = ({ href, name }) => {
   const router = useRouter()
   const { category } = router.query
   const selected = category === name
-  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
-        <Link href={href}>{name}</Link>
+  return (
+    <div
+      className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
+      <Link href={href}>{name}</Link>
     </div>
+  )
 }
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
@@ -2,6 +2,7 @@
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
@@ -206,6 +207,7 @@ function GroupMenu() {
  */
 function TopGroup(props) {
   const { latestPosts, allNavPages, siteInfo } = props
+  const { locale } = useGlobal()
   const todayCardRef = useRef()
   function handleMouseLeave() {
     todayCardRef.current.coverUp()
@@ -238,7 +240,7 @@ function TopGroup(props) {
                 </div>
                 {/* hover 悬浮的 ‘荐’ 字 */}
                 <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
-                  荐
+                  {locale.COMMON.RECOMMEND_BADGES}
                 </div>
               </div>
             </Link>
@@ -304,6 +306,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
 function TodayCard({ cRef, siteInfo }) {
   const router = useRouter()
   const link = siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG)
+  const { locale } = useGlobal()
   // 卡牌是否盖住下层
   const [isCoverUp, setIsCoverUp] = useState(true)
 
@@ -348,7 +351,7 @@ function TodayCard({ cRef, siteInfo }) {
           isCoverUp
             ? 'opacity-100 cursor-pointer'
             : 'opacity-0 transform scale-110 pointer-events-none'
-        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
+        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] dark:bg-yellow-500 rounded-xl relative overflow-hidden flex items-end`}>
         <div
           id='today-card-info'
           className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
@@ -364,12 +367,14 @@ function TodayCard({ cRef, siteInfo }) {
             onClick={handleClickMore}
             className={`'${
               isCoverUp ? '' : 'hidden pointer-events-none '
-            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
+            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] dark:bg-yellow-500 dark:hover:bg-yellow-600 transition-colors duration-100 rounded-3xl`}>
             <PlusSmall
-              className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'}
+              className={
+                'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400 dark:stroke-yellow-400'
+              }
             />
             <div id='more' className='select-none'>
-              更多推荐
+              {locale.COMMON.MORE}
             </div>
           </div>
         </div>

diff --git a/themes/heo/components/LatestPostsGroupMini.js b/themes/heo/components/LatestPostsGroupMini.js
@@ -50,13 +50,13 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
             </div>
             <div
               className={
-                (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                (selected ? ' text-indigo-400 ' : 'dark:text-gray-200') +
                 ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
-                ' hover:text-indigo-400 cursor-pointer items-center flex'
+                ' hover:text-indigo-400 dark:hover:text-yellow-600 cursor-pointer items-center flex'
               }>
               <div>
                 <div className='line-clamp-2 menu-link'>{post.title}</div>
-                <div className='text-gray-500'>{post.lastEditedDay}</div>
+                <div className='text-gray-400'>{post.lastEditedDay}</div>
               </div>
             </div>
           </Link>

diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
@@ -28,7 +28,7 @@ export const MenuItemCollapse = ({ link }) => {
   return (
     <>
       <div
-        className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray'
+        className='select-none w-full p-2 border dark:border-gray-600 rounded-lg text-left dark:bg-[#1e1e1e]'
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
@@ -62,7 +62,7 @@ export const MenuItemCollapse = ({ link }) => {
             return (
               <div
                 key={index}
-                className='dark:bg-black dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                className='dark:bg-hexo-black-gray dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}

diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
@@ -36,12 +36,12 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] border dark:border-gray-700 transition-all duration-300 z-20 absolute`}>
           {link.subMenus.map((sLink, index) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-blue-600 hover:text-white text-gray-900  tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100  tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

diff --git a/themes/heo/components/MenuListSide.js b/themes/heo/components/MenuListSide.js
@@ -48,7 +48,7 @@ export const MenuListSide = props => {
   }
 
   return (
-    <nav className='flex-col space-y-2'>
+    <nav className='flex-col space-y-1'>
       {links?.map((link, index) => (
         <MenuItemCollapse key={index} link={link} />
       ))}

diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
@@ -1,14 +1,15 @@
-
 import { ArrowRightCircle } from '@/components/HeroIcons'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import Swipe from './Swipe'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 通知横幅
  */
 export function NoticeBar() {
   let notices = siteConfig('HEO_NOTICE_BAR', null, CONFIG)
+  const { locale } = useGlobal()
   if (typeof notices === 'string') {
     notices = JSON.parse(notices)
   }
@@ -17,14 +18,16 @@ export function NoticeBar() {
   }
 
   return (
-        <div className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-            <div className="animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
-                <span className='whitespace-nowrap'>此刻</span>
-                <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
-                    <Swipe items={notices} />
-                </div>
-                <div><ArrowRightCircle className={'w-5 h-5'} /></div>
-            </div>
+    <div className='max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold'>
+      <div className='animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5'>
+        <span className='whitespace-nowrap'>{locale.COMMON.NOW}</span>
+        <div className='w-full h-full hover:text-indigo-600 dark:hover:text-yellow-600 flex justify-center items-center'>
+          <Swipe items={notices} />
+        </div>
+        <div>
+          <ArrowRightCircle className={'w-5 h-5'} />
         </div>
+      </div>
+    </div>
   )
 }
diff --git a/themes/heo/components/PostHeader.js b/themes/heo/components/PostHeader.js
@@ -18,7 +18,7 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
   }
   // 文章头图
   const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
-
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig('ANALYTICS_BUSUANZI_ENABLE')
   return (
     <div
       id='post-bg'
@@ -67,7 +67,7 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
                   className='mr-4'
                   passHref
                   legacyBehavior>
-                  <div className='cursor-pointer font-sm font-bold px-3 py-1 rounded-lg bg-blue-500 hover:bg-white text-white hover:text-blue-500 duration-200 '>
+                  <div className='cursor-pointer font-sm font-bold px-3 py-1 rounded-lg  hover:bg-white text-white bg-blue-500 dark:bg-yellow-500 hover:text-blue-500 duration-200 '>
                     {post.category}
                   </div>
                 </Link>
@@ -103,8 +103,8 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
           </div>
 
           {/* 标题底部补充信息 */}
-          <section className='flex-wrap shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white dark:text-gray-400 font-light leading-8'>
-            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
+          <section className='flex-wrap dark:text-gray-200 text-opacity-70 shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white font-light leading-8'>
+            <div className='flex justify-center '>
               <div className='mr-2'>
                 <WordCount />
               </div>
@@ -126,7 +126,8 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
               </div>
             </div>
 
-            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
+            {/* 阅读统计 */}
+            {ANALYTICS_BUSUANZI_ENABLE && (
               <div className='busuanzi_container_page_pv font-light mr-2'>
                 <i className='fa-solid fa-fire-flame-curved'></i>{' '}
                 <span className='mr-2 busuanzi_value_page_pv' />