heo主题 导航栏动画丝滑

lib/lang/en-US.js

@@ -61,7 +61,8 @@ export default {
     START_READING: 'Start Reading',
     MINUTE: 'min',
     WORD_COUNT: 'Words',
-    READ_TIME: 'Read Time'
+    READ_TIME: 'Read Time',
+    NEXT_POST: '下一篇'
   },
   PAGINATION: {
     PREV: 'Prev',

lib/lang/zh-CN.js

@@ -62,7 +62,8 @@ export default {
     START_READING: '开始阅读',
     MINUTE: '分钟',
     WORD_COUNT: '字数',
-    READ_TIME: '阅读时长'
+    READ_TIME: '阅读时长',
+    NEXT_POST:'下一篇'
   },
   PAGINATION: {
     PREV: '上页',

themes/heo/components/Header.js

@@ -140,7 +140,7 @@ const Header = props => {
       {/* 顶部导航菜单栏 */}
       <nav
         id='nav'
-        className={`z-20 h-16 top-0 w-full duration-500 transition-all
+        className={`z-20 h-16 top-0 w-full duration-300 transition-all
             ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
             ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
             ${navBgWhite ? 'bg-white dark:bg-[#18171d] shadow' : 'bg-transparent'}`}>
@@ -153,14 +153,18 @@ const Header = props => {
           {/* 中间菜单 */}
           <div
             id='nav-bar-swipe'
-            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full ${activeIndex === 0 ? 'fade-in-down' : 'fade-in-up'}`}>
-            {activeIndex === 0 && <MenuListTop {...props} />}
-            {activeIndex === 1 && (
+            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full overflow-hidden`}>
+            <div
+              className={`absolute transition-all duration-500 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-24 opacity-0 invisible'}`}>
+              <MenuListTop {...props} />
+            </div>
+            <div
+              className={`absolute transition-all duration-500 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-24 opacity-0 invisible'}`}>
               <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>
                 {siteConfig('AUTHOR') || siteConfig('TITLE')}{' '}
                 {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}
               </h1>
-            )}
+            </div>
           </div>
 
           {/* 右侧固定 */}

themes/heo/components/PostAdjacent.js

@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -12,6 +13,7 @@ import CONFIG from '../config'
 export default function PostAdjacent({ prev, next }) {
   const [isShow, setIsShow] = useState(false)
   const router = useRouter()
+  const { locale } = useGlobal()
 
   useEffect(() => {
     setIsShow(false)
@@ -85,13 +87,13 @@ 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 ${isShow ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
+        className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
         <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'>
-          <div className='text-xs'>下一篇</div>
-          <hr />
-          <div>{next?.title}</div>
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg'>
+          <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
+          <hr className='mt-2 mb-3' />
+          <div className='line-clamp-2'>{next?.title}</div>
         </Link>
       </div>
     </div>

themes/heo/index.js

@@ -291,18 +291,19 @@ const LayoutSlug = props => {
         {!lock && (
           <div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
             {/* 文章主体 */}
-            <article
-              itemScope
-              itemType='https://schema.org/Movie'
-              data-wow-delay='.2s'
-              className='wow fadeInUp'>
+            <article itemScope itemType='https://schema.org/Movie'>
               {/* Notion文章主体 */}
-              <section className='px-5 py-5 justify-center mx-auto'>
+              <section
+                className='wow fadeInUp p-5 justify-center mx-auto'
+                data-wow-delay='.2s'>
                 <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
                 <WWAds orientation='horizontal' className='w-full' />
               </section>
 
+              {/* 上一篇\下一篇文章 */}
+              <PostAdjacent {...props} />
+
               {/* 分享 */}
               <ShareBar post={post} />
               {post?.type === 'Post' && (
@@ -315,9 +316,6 @@ const LayoutSlug = props => {
               )}
             </article>
 
-            {/* 上一篇\下一篇文章 */}
-            <PostAdjacent {...props} />
-
             {/* 评论区 */}
             {fullWidth ? null : (
               <div className={`${commentEnable && post ? '' : 'hidden'}`}>