From cd86d91f6d94dbee0c0e20a5abfff7c0f810994a Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Sat, 14 Sep 2024 15:45:27 +0800
Subject: [PATCH] =?UTF-8?q?magzine=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/magzine/components/ArticleAround.js |  32 -------
 themes/magzine/components/ArticleInfo.js   |   4 +-
 themes/magzine/components/Footer.js        |  62 +++++++------
 themes/magzine/components/PostNavAround.js | 101 +++++++++++++++++++++
 themes/magzine/components/Swiper.js        |   4 +-
 themes/magzine/components/TagItemMini.js   |   2 +-
 themes/magzine/index.js                    |  28 +++---
 7 files changed, 151 insertions(+), 82 deletions(-)
 delete mode 100644 themes/magzine/components/ArticleAround.js
 create mode 100644 themes/magzine/components/PostNavAround.js

diff --git a/themes/magzine/components/ArticleAround.js b/themes/magzine/components/ArticleAround.js
deleted file mode 100644
index 95b6f83f..00000000
--- a/themes/magzine/components/ArticleAround.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Link from 'next/link'
-
-/**
- * 上一篇，下一篇文章
- * @param {prev,next} param0
- * @returns
- */
-export default function ArticleAround ({ prev, next }) {
-  if (!prev || !next) {
-    return <></>
-  }
-  return (
-    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
-      <Link
-        href={`/${prev.slug}`}
-        passHref
-        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-
-        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
-
-      </Link>
-      <Link
-        href={`/${next.slug}`}
-        passHref
-        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
-        {next.title}
-        <i className='ml-1 my-1 fas fa-angle-double-right' />
-
-      </Link>
-    </section>
-  )
-}
diff --git a/themes/magzine/components/ArticleInfo.js b/themes/magzine/components/ArticleInfo.js
index f41654b0..ba50b384 100644
--- a/themes/magzine/components/ArticleInfo.js
+++ b/themes/magzine/components/ArticleInfo.js
@@ -15,13 +15,13 @@ export default function ArticleInfo(props) {
   return (
     <>
       <div className='flex flex-col gap-y-4 py-4 px-2 lg:px-0'>
-        <div className='flex justify-center mr-2 items-center'>
+        <div className='flex justify-center items-center'>
           {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
             <CategoryItem category={post?.category} />
           )}
           <div
             className={
-              'flex items-center justify-start flex-wrap space-x-3 text-gray-400'
+              'flex items-center justify-start flex-wrap text-gray-400'
             }>
             {siteConfig('MAGZINE_POST_LIST_TAG') &&
               post?.tagItems?.map(tag => (
diff --git a/themes/magzine/components/Footer.js b/themes/magzine/components/Footer.js
index 9cd2fa0f..c4e73f61 100644
--- a/themes/magzine/components/Footer.js
+++ b/themes/magzine/components/Footer.js
@@ -18,7 +18,9 @@ const Footer = ({ title }) => {
   const MAGZINE_FOOTER_LINKS = siteConfig('MAGZINE_FOOTER_LINKS', [])
 
   return (
-    <footer className='z-10 bg-black text-white justify-center m-auto w-full p-6 relative'>
+    <footer
+      id='footer-bottom'
+      className='z-10 bg-black text-white justify-center m-auto w-full p-6 relative'>
       <div className='max-w-screen-3xl w-full mx-auto '>
         {/* 信息与链接区块 */}
         <div className='w-full flex lg:flex-row flex-col justify-between py-16'>
@@ -67,10 +69,10 @@ const Footer = ({ title }) => {
         </div>
 
         {/* 页脚 */}
-        <div className='py-4 flex justify-between items-center border-t border-gray-400'>
-          <span className='flex gap-x-2 items-center'>
-            <DarkModeButton />
-            {`${copyrightDate}`}
+        <div className='py-4 flex flex-col lg:flex-row  justify-between items-center border-t border-gray-400'>
+          <div className='flex gap-x-2 justify-between items-center'>
+            <span className='whitespace-nowrap'>{`${copyrightDate}`}</span>
+
             {siteConfig('BEI_AN') && (
               <>
                 <i className='fas fa-shield-alt' />{' '}
@@ -80,30 +82,34 @@ const Footer = ({ title }) => {
                 <br />
               </>
             )}
-          </span>
 
-          <span className='text-sm font-serif'>
-            Powered by{' '}
-            <a
-              href='https://github.com/tangly1024/NotionNext'
-              className='underline justify-start text-white'>
-              NotionNext {siteConfig('VERSION')}
-            </a>
-            .
-          </span>
-          <div className='flex items-center gap-x-2'>
-            <span>
-              <i className='mx-1 animate-pulse fas fa-heart' />{' '}
-              <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>
-            </span>
-            <SocialButton />
+            <div className='text-sm font-serif'>
+              Powered by{' '}
+              <a
+                href='https://github.com/tangly1024/NotionNext'
+                className='underline justify-start text-white'>
+                NotionNext {siteConfig('VERSION')}
+              </a>
+              .
+            </div>
+          </div>
+
+          <DarkModeButton className='text-white' />
+
+          <div className='flex justify-between items-center gap-x-2'>
+            <div className='flex items-center gap-x-4'>
+              <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>
+              <SocialButton />
+            </div>
           </div>
         </div>
       </div>
diff --git a/themes/magzine/components/PostNavAround.js b/themes/magzine/components/PostNavAround.js
new file mode 100644
index 00000000..3eb1222c
--- /dev/null
+++ b/themes/magzine/components/PostNavAround.js
@@ -0,0 +1,101 @@
+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'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function PostNavAround({ prev, next }) {
+  const [isShow, setIsShow] = useState(false)
+  const router = useRouter()
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    setIsShow(false)
+  }, [router])
+
+  useEffect(() => {
+    // 文章到底部时显示下一篇文章推荐
+    const articleEnd = document.getElementById('article-end')
+    const footerBottom = document.getElementById('footer-bottom')
+
+    const handleIntersect = entries => {
+      entries.forEach(entry => {
+        if (entry.target === articleEnd) {
+          if (entry.isIntersecting) {
+            setIsShow(true)
+          }
+        } else if (entry.target === footerBottom) {
+          if (entry.isIntersecting) {
+            setIsShow(false)
+          }
+        }
+      })
+    }
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+
+    const observer = new IntersectionObserver(handleIntersect, options)
+    if (articleEnd) observer.observe(articleEnd)
+    if (footerBottom) observer.observe(footerBottom)
+
+    return () => {
+      if (articleEnd) observer.unobserve(articleEnd)
+      if (footerBottom) observer.unobserve(footerBottom)
+      observer.disconnect()
+    }
+  }, [])
+
+  //  隐藏该组件的条件
+  if (!prev || !next || !siteConfig('MAGZINE_ARTICLE_ADJACENT', true)) {
+    return null
+  }
+
+  return (
+    <div id='article-end'>
+      {/* 移动端 */}
+      <section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
+        <Link
+          href={`/${prev.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>上一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {prev.title}
+          </div>
+        </Link>
+        <Link
+          href={`/${next.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>下一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {next.title}
+          </div>
+        </Link>
+      </section>
+
+      {/* 桌面端 */}
+
+      <div
+        id='pc-next-post'
+        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='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-green-600'>
+          <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>
+  )
+}
diff --git a/themes/magzine/components/Swiper.js b/themes/magzine/components/Swiper.js
index ac5decde..148e26bd 100644
--- a/themes/magzine/components/Swiper.js
+++ b/themes/magzine/components/Swiper.js
@@ -91,12 +91,12 @@ const Swiper = ({ posts }) => {
     <div className='relative w-full mx-auto'>
       {/* 左侧点击区域 */}
       <div
-        className='absolute inset-y-0 left-0 w-1/5 z-10'
+        className='absolute inset-y-0 left-0 w-1/6 z-10 cursor-move bg-black hover:opacity-10 opacity-0 duration-100'
         onClick={goToPrevious}></div>
 
       {/* 右侧点击区域 */}
       <div
-        className='absolute inset-y-0 right-0 w-1/5 z-10'
+        className='absolute inset-y-0 right-0 w-1/6 z-10 cursor-move bg-black hover:opacity-10 opacity-0 duration-100'
         onClick={goToNext}></div>
 
       {/* Swiper Container */}
diff --git a/themes/magzine/components/TagItemMini.js b/themes/magzine/components/TagItemMini.js
index c08b33f1..e8e2987c 100644
--- a/themes/magzine/components/TagItemMini.js
+++ b/themes/magzine/components/TagItemMini.js
@@ -7,7 +7,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
       className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
-        mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
+        py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
          ${
            selected
              ? 'text-white dark:text-gray-300 dark:hover:bg-gray-900'
diff --git a/themes/magzine/index.js b/themes/magzine/index.js
index 15825073..98b93c25 100644
--- a/themes/magzine/index.js
+++ b/themes/magzine/index.js
@@ -16,7 +16,6 @@ import { ArticleLock } from './components/ArticleLock'
 import BannerFullWidth from './components/BannerFullWidth'
 import Catalog from './components/Catalog'
 import CategoryGroup from './components/CategoryGroup'
-import CategoryItem from './components/CategoryItem'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import Hero from './components/Hero'
@@ -27,6 +26,7 @@ import PostListPage from './components/PostListPage'
 import PostListRecommend from './components/PostListRecommend'
 import PostListScroll from './components/PostListScroll'
 import PostSimpleListHorizontal from './components/PostListSimpleHorizontal'
+import PostNavAround from './components/PostNavAround'
 import TagGroups from './components/TagGroups'
 import TagItemMini from './components/TagItemMini'
 import TocDrawer from './components/TocDrawer'
@@ -147,7 +147,7 @@ const LayoutPostList = props => {
  * @returns
  */
 const LayoutSlug = props => {
-  const { post, recommendPosts, lock, validPassword } = props
+  const { post, recommendPosts, prev, next, lock, validPassword } = props
   const { locale } = useGlobal()
   const router = useRouter()
 
@@ -195,21 +195,16 @@ const LayoutSlug = props => {
 
                 {/* 文章底部区域  */}
                 <section>
+                  <div className='py-2 flex justify-end'>
+                    {siteConfig('MAGZINE_POST_DETAIL_TAG') &&
+                      post?.tagItems?.map(tag => (
+                        <TagItemMini key={tag.name} tag={tag} />
+                      ))}
+                  </div>
                   {/* 分享 */}
                   <ShareBar post={post} />
-                  {/* 文章分类和标签信息 */}
-                  <div className='flex justify-between'>
-                    {siteConfig('MAGZINE_POST_DETAIL_CATEGORY') &&
-                      post?.category && (
-                        <CategoryItem category={post?.category} />
-                      )}
-                    <div>
-                      {siteConfig('MAGZINE_POST_DETAIL_TAG') &&
-                        post?.tagItems?.map(tag => (
-                          <TagItemMini key={tag.name} tag={tag} />
-                        ))}
-                    </div>
-                  </div>
+                  {/* 上一篇下一篇 */}
+                  <PostNavAround prev={prev} next={next} />
                   {/* 评论区 */}
                   <Comment frontMatter={post} />
                 </section>
@@ -262,10 +257,9 @@ const LayoutSlug = props => {
       <div>
         {/* 广告醒图 */}
         <BannerFullWidth />
-        {/* 最新文章区块 */}
+        {/* 推荐关联文章 */}
         <PostSimpleListHorizontal
           title={locale.COMMON.RELATE_POSTS}
-          href='/archive'
           posts={recommendPosts}
         />
       </div>