Merge branch 'main' of https://github.com/tangly1024/NotionNext

wensley · May 30, 2024 · edcb036 · edcb036
2 parents 2c743f9 + c040148
commit edcb036
Show file tree

Hide file tree

Showing 22 changed files with 332 additions and 216 deletions.
diff --git a/components/CustomContextMenu.js b/components/CustomContextMenu.js
@@ -57,12 +57,10 @@ export default function CustomContextMenu(props) {
     }
 
     /**
-     * 鼠标点击事件
+     * 鼠标点击即关闭菜单
      */
     const handleClick = event => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setShow(false)
-      }
+      setShow(false)
     }
 
     window.addEventListener('contextmenu', handleContextMenu)
@@ -88,20 +86,19 @@ export default function CustomContextMenu(props) {
 
   function handleScrollTop() {
     window.scrollTo({ top: 0, behavior: 'smooth' })
-    setShow(false)
   }
 
   function handleCopyLink() {
     const url = window.location.href
     navigator.clipboard
       .writeText(url)
       .then(() => {
-        console.log('页面地址已复制')
+        // console.log('页面地址已复制')
+        alert(`${locale.COMMON.PAGE_URL_COPIED} : ${url}`)
       })
       .catch(error => {
         console.error('复制页面地址失败:', error)
       })
-    setShow(false)
   }
 
   /**
@@ -130,8 +127,6 @@ export default function CustomContextMenu(props) {
     } else {
       // alert("Please select some text first.");
     }
-
-    setShow(false)
   }
 
   function handleChangeDarkMode() {

diff --git a/components/LazyImage.js b/components/LazyImage.js
@@ -20,6 +20,8 @@ export default function LazyImage({
   style
 }) {
   const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
+  const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+
   const imageRef = useRef(null)
   const [adjustedSrc, setAdjustedSrc] = useState(
     placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
@@ -37,6 +39,14 @@ export default function LazyImage({
       onLoad() // 触发传递的onLoad回调函数
     }
   }
+  /**
+   * 图片加载失败回调
+   */
+  const handleImageError = () => {
+    if (imageRef.current) {
+      imageRef.current.src = defaultPlaceholderSrc
+    }
+  }
 
   useEffect(() => {
     const adjustedImageSrc = adjustImgSize(src, maxWidth)
@@ -71,7 +81,8 @@ export default function LazyImage({
     ref: imageRef,
     src: priority ? adjustedSrc : placeholderSrc,
     alt: alt,
-    onLoad: handleImageLoad
+    onLoad: handleImageLoad,
+    onError: handleImageError // 添加onError处理函数
   }
 
   if (id) {

diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
@@ -33,10 +33,14 @@ export default {
     COPYRIGHT: 'Copyright',
     AUTHOR: 'Author',
     URL: 'URL',
+    NOW: 'NOW',
+    RECOMMEND_BADGES: 'Recommend',
+    BLOG: 'Blog',
     POSTS: 'Posts',
     ARTICLE: 'Article',
     VISITORS: 'Visitors',
     VIEWS: 'Views',
+    PAGE_URL_COPIED: 'Page URL copied',
     COPYRIGHT_NOTICE:
       'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
     RESULT_OF_SEARCH: 'Results Found',

diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
@@ -35,10 +35,14 @@ export default {
     AUTHOR: '作者',
     URL: '链接',
     ANALYTICS: '统计',
+    RECOMMEND_BADGES: '荐',
+    BLOG: '博客',
+    NOW: '此刻',
     POSTS: '篇文章',
     ARTICLE: '文章',
     VISITORS: '位访客',
     VIEWS: '次查看',
+    PAGE_URL_COPIED: '页面地址已复制',
     COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。',
     RESULT_OF_SEARCH: '篇搜索到的结果',
     NO_RESULTS_FOUND: '没有找到文章',

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/Footer.js b/themes/heo/components/Footer.js
@@ -1,49 +1,66 @@
-import SocialButton from './SocialButton'
 import { siteConfig } from '@/lib/config'
+import SocialButton from './SocialButton'
 
 const Footer = ({ title }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'
-        >
-
-            {/* 颜色过度区 */}
-            <div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
-
-            </div>
+    <footer className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'>
+      {/* 颜色过度区 */}
+      <div
+        id='color-transition'
+        className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'
+      />
 
-            {/* 社交按钮 */}
-            <div className='w-full h-24'>
-                <SocialButton />
-            </div>
+      {/* 社交按钮 */}
+      <div className='w-full h-24'>
+        <SocialButton />
+      </div>
 
-            <br />
+      <br />
 
-            {/* 底部页面信息 */}
-            <div id='footer-bottom' className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
-
-                <div id='footer-bottom-left'>
-                   NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.
-                </div>
-
-            <div id='footer-bottom-right'>
-                {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
+      {/* 底部页面信息 */}
+      <div
+        id='footer-bottom'
+        className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#21232A] border-t dark:border-t-[#3D3D3F]'>
+        <div id='footer-bottom-left'>
+          NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' />{' '}
+          {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' />{' '}
+          <a
+            href={siteConfig('LINK')}
+            className='underline font-bold dark:text-gray-300 '>
+            {siteConfig('AUTHOR')}
+          </a>
+          .
+        </div>
 
-                <span className='hidden busuanzi_container_site_pv'>
-                    <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
-                <span className='pl-2 hidden busuanzi_container_site_uv'>
-                    <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <div id='footer-bottom-right'>
+          {siteConfig('BEI_AN') && (
+            <>
+              <i className='fas fa-shield-alt' />{' '}
+              <a href='https://beian.miit.gov.cn/' className='mr-2'>
+                {siteConfig('BEI_AN')}
+              </a>
+            </>
+          )}
 
-                {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
+          <span className='hidden busuanzi_container_site_pv'>
+            <i className='fas fa-eye' />
+            <span className='px-1 busuanzi_value_site_pv'> </span>{' '}
+          </span>
+          <span className='pl-2 hidden busuanzi_container_site_uv'>
+            <i className='fas fa-users' />{' '}
+            <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
+          </span>
 
-            </div>
+          {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
         </div>
-        </footer >
+      </div>
+    </footer>
   )
 }
 

diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
@@ -1,6 +1,7 @@
 import { siteConfig } from '@/lib/config'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import DarkModeButton from './DarkModeButton'
 import Logo from './Logo'
@@ -21,6 +22,7 @@ const Header = props => {
   const [navBgWhite, setBgWhite] = useState(false)
   const [activeIndex, setActiveIndex] = useState(0)
 
+  const router = useRouter()
   const slideOverRef = useRef()
 
   const toggleMenuOpen = () => {
@@ -34,35 +36,37 @@ const Header = props => {
     throttle(() => {
       const scrollS = window.scrollY
       // 导航栏设置 白色背景
-      if (scrollS <= 0) {
+      if (scrollS <= 1) {
         setFixedNav(false)
         setBgWhite(false)
+        setTextWhite(false)
 
         // 文章详情页特殊处理
-        if (document.querySelector('#post-bg')) {
+        if (document?.querySelector('#post-bg')) {
           setFixedNav(true)
           setTextWhite(true)
-          setBgWhite(false)
         }
       } else {
         // 向下滚动后的导航样式
         setFixedNav(true)
         setTextWhite(false)
         setBgWhite(true)
       }
-    }, 200)
+    }, 100)
   )
+  useEffect(() => {
+    scrollTrigger()
+  }, [router])
 
   // 监听滚动
   useEffect(() => {
-    scrollTrigger()
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
 
-  // 监听导航栏显示文字
+  // 导航栏根据滚动轮播菜单内容
   useEffect(() => {
     let prevScrollY = 0
     let ticking = false
@@ -71,17 +75,14 @@ const Header = props => {
       if (!ticking) {
         window.requestAnimationFrame(() => {
           const currentScrollY = window.scrollY
-
           if (currentScrollY > prevScrollY) {
             setActiveIndex(1) // 向下滚动时设置activeIndex为1
           } else {
             setActiveIndex(0) // 向上滚动时设置activeIndex为0
           }
-
           prevScrollY = currentScrollY
           ticking = false
         })
-
         ticking = true
       }
     }
@@ -131,6 +132,11 @@ const Header = props => {
         }
       `}</style>
 
+      {/* fixed时留白高度 */}
+      {fixedNav && !document?.querySelector('#post-bg') && (
+        <div className='h-16'></div>
+      )}
+
       {/* 顶部导航菜单栏 */}
       <nav
         id='nav'
@@ -158,7 +164,7 @@ const Header = props => {
           </div>
 
           {/* 右侧固定 */}
-          <div className='flex flex-shrink-0 justify-center items-center'>
+          <div className='flex flex-shrink-0 justify-end items-center w-48'>
             <RandomPostButton {...props} />
             <SearchButton {...props} />
             {!JSON.parse(siteConfig('THEME_SWITCH')) && (