From e90ba11a02698f186aaaf1d31121a163aa61e642 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 31 Jan 2024 11:01:12 +0800
Subject: [PATCH] =?UTF-8?q?plog=20=E6=A8=A1=E6=80=81=E6=A1=86=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/plog/components/Modal.js | 11 ++++++-----
 themes/plog/index.js            | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 8c49009364e..17ae4da61b1 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -34,7 +34,7 @@ export default function Modal(props) {
   // 修改当前显示的遮罩内容
   function prev() {
     setLoading(true)
-    const index = posts.findIndex(post => post.slug === modalContent.slug)
+    const index = posts?.findIndex(post => post.slug === modalContent.slug)
     if (index === 0) {
       setModalContent(posts[posts.length - 1])
     } else {
@@ -90,10 +90,11 @@ export default function Modal(props) {
 
                                 {!loading && (<>
                                     <div className='absolute bottom-0 left-0 m-4 z-20'>
-                                        <div className='flex'>
-                                            <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
-                                        </div>
-
+                                        <Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
+                                            <div className='flex'>
+                                                <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
+                                            </div>
+                                        </Link>
                                         <Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
                                             <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
                                                 {modalContent?.summary}
diff --git a/themes/plog/index.js b/themes/plog/index.js
index 07d340682d7..80bad683cf9 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -21,6 +21,7 @@ import Modal from './components/Modal'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
+import { useRouter } from 'next/router'
 
 // 主题全局状态
 const ThemeGlobalPlog = createContext()
@@ -38,6 +39,20 @@ const LayoutBase = props => {
   const [showModal, setShowModal] = useState(false)
   const [modalContent, setModalContent] = useState(null)
 
+  // 页面切换关闭遮罩
+  const router = useRouter()
+  const closeModal = ()=>{
+    setShowModal(false)
+  }
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', closeModal)
+    return () => {
+      router.events.off('routeChangeComplete', closeModal)
+    }
+  }, [router.events])
+
+
   return (
     <ThemeGlobalPlog.Provider value={{ showModal, setShowModal, modalContent, setModalContent }}>
         <div id='theme-plog' className='plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen'>