heo 主题样式、交互微调

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,7 +86,6 @@ export default function CustomContextMenu(props) {
 
   function handleScrollTop() {
     window.scrollTo({ top: 0, behavior: 'smooth' })
-    setShow(false)
   }
 
   function handleCopyLink() {
@@ -96,12 +93,12 @@ export default function CustomContextMenu(props) {
     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() {

lib/lang/en-US.js

@@ -37,6 +37,7 @@ export default {
     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',

lib/lang/zh-CN.js

@@ -39,6 +39,7 @@ export default {
     ARTICLE: '文章',
     VISITORS: '位访客',
     VIEWS: '次查看',
+    PAGE_URL_COPIED: '页面地址已复制',
     COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。',
     RESULT_OF_SEARCH: '篇搜索到的结果',
     NO_RESULTS_FOUND: '没有找到文章',

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'
-        >
+    <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 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>
+      <br />
 
-            {/* 社交按钮 */}
-            <div className='w-full h-24'>
-                <SocialButton />
-            </div>
-
-            <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></>}
-
-                <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>
-
-                {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
-
-            </div>
+      {/* 底部页面信息 */}
+      <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>
-        </footer >
+
+        <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>
+            </>
+          )}
+
+          <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>
+
+          {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
+        </div>
+      </div>
+    </footer>
   )
 }
 

themes/heo/components/PostAdjacent.js

@@ -10,21 +10,28 @@ import CONFIG from '../config'
  * @returns
  */
 export default function PostAdjacent({ prev, next }) {
-  const [isScrollEnd, setIsScrollEnd] = useState(false)
+  const [isShow, setIsShow] = useState(false)
   const router = useRouter()
 
   useEffect(() => {
-    setIsScrollEnd(false)
+    setIsShow(false)
   }, [router])
 
   useEffect(() => {
-    // 文章是否已经到了底部
-    const targetElement = document.getElementById('article-end')
+    // 文章到底部时显示下一篇文章推荐
+    const articleEnd = document.getElementById('article-end')
+    const footerBottom = document.getElementById('footer-bottom')
 
     const handleIntersect = entries => {
       entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          setIsScrollEnd(true)
+        if (entry.target === articleEnd) {
+          if (entry.isIntersecting) {
+            setIsShow(true)
+          }
+        } else if (entry.target === footerBottom) {
+          if (entry.isIntersecting) {
+            setIsShow(false)
+          }
         }
       })
     }
@@ -36,9 +43,12 @@ export default function PostAdjacent({ prev, next }) {
     }
 
     const observer = new IntersectionObserver(handleIntersect, options)
-    observer.observe(targetElement)
+    if (articleEnd) observer.observe(articleEnd)
+    if (footerBottom) observer.observe(footerBottom)
 
     return () => {
+      if (articleEnd) observer.unobserve(articleEnd)
+      if (footerBottom) observer.unobserve(footerBottom)
       observer.disconnect()
     }
   }, [])
@@ -75,7 +85,7 @@ export default function PostAdjacent({ prev, next }) {
 
       <div
         id='pc-next-post'
-        className={`hidden md:block fixed z-40 right-24 bottom-4 duration-200 transition-all ${isScrollEnd ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
+        className={`hidden md:block fixed z-40 right-24 bottom-4 duration-200 transition-all ${isShow ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
         <Link
           href={`/${next.slug}`}
           className='cursor-pointer drop-shadow-xl duration transition-all h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg flex flex-col justify-between'>

themes/heo/index.js

@@ -311,12 +311,13 @@ const LayoutSlug = props => {
                   <PostCopyright {...props} />
                   {/* 文章推荐 */}
                   <PostRecommend {...props} />
-                  {/* 上一篇\下一篇文章 */}
-                  <PostAdjacent {...props} />
                 </div>
               )}
             </article>
 
+            {/* 上一篇\下一篇文章 */}
+            <PostAdjacent {...props} />
+
             {fullWidth ? null : (
               <div className={`${commentEnable && post ? '' : 'hidden'}`}>
                 <hr className='my-4 border-dashed' />
@@ -337,6 +338,7 @@ const LayoutSlug = props => {
           </div>
         )}
       </div>
+
       <FloatTocButton {...props} />
     </>
   )