Merge branch 'main' into original-fix

themes/commerce/components/Catalog.js

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Progress from './Progress'
-import { useGlobal } from '@/lib/global'
 
 /**
  * 目录导航组件
@@ -29,67 +29,77 @@ const Catalog = ({ toc }) => {
   const [activeSection, setActiveSection] = useState(null)
 
   const throttleMs = 200
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='w-full py-3'>
-      <Progress />
+  return (
+    <div className='px-3 py-1'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div className='w-full py-3'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? 'font-bold text-red-600' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`truncate ${activeSection === id ? 'font-bold text-red-600': ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
-    </div>
-  </div>
+  )
 }
 
 export default Catalog

themes/commerce/components/Footer.js

@@ -1,3 +1,6 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
+import BeiAnSite from '@/components/BeiAnSite'
+import CopyRightDate from '@/components/CopyRightDate'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import CONFIG from '../config'
@@ -185,14 +188,7 @@ const Footer = props => {
           <div className='text-start space-y-1'>
             {/* 网站所有者 */}
             <div>
-              {' '}
-              Copyright <i className='fas fa-copyright' /> {`${copyrightDate}`}{' '}
-              <a
-                href={siteConfig('LINK')}
-                className='underline font-bold  dark:text-gray-300 '>
-                {siteConfig('AUTHOR')}
-              </a>{' '}
-              All Rights Reserved.
+              <CopyRightDate />
             </div>
 
             {/* 技术支持 */}
@@ -226,14 +222,10 @@ const Footer = props => {
             </h1>
             <h2> {siteConfig('DESCRIPTION')}</h2>
             {/* 可选备案信息 */}
-            {siteConfig('BEI_AN') && (
-              <>
-                <i className='fas fa-shield-alt' />{' '}
-                <a href='https://beian.miit.gov.cn/' className='mr-2'>
-                  {siteConfig('BEI_AN')}
-                </a>
-              </>
-            )}
+            <div className='flex flex-wrap'>
+              <BeiAnSite />
+              <BeiAnGongAn />
+            </div>
           </div>
         </div>
       </div>

themes/commerce/index.js

@@ -246,7 +246,7 @@ const LayoutSlug = props => {
       <div className='w-full max-w-screen-xl mx-auto lg:hover:shadow lg:border lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article'>
         {lock && <ArticleLock validPassword={validPassword} />}
 
-        {!lock && (
+        {!lock && post && (
           <div
             id='article-wrapper'
             className='overflow-x-auto flex-grow mx-auto md:w-full md:px-5 '>
@@ -304,7 +304,7 @@ const Layout404 = props => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
       if (isBrowser) {
-        const article = document.getElementById('notion-article')
+        const article = document.querySelector('#article-wrapper #notion-article')
         if (!article) {
           router.push('/').then(() => {
             // console.log('找不到页面', router.asPath)

themes/example/components/Catalog.js

@@ -73,7 +73,7 @@ const Catalog = ({ toc }) => {
                 key={id}
                 href={`#${id}`}
                 className={`notion-table-of-contents-item duration-300 transform font-light
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',

themes/example/components/Footer.js

@@ -1,26 +1,27 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
+import BeiAnSite from '@/components/BeiAnSite'
+import CopyRightDate from '@/components/CopyRightDate'
 import DarkModeButton from '@/components/DarkModeButton'
-import { siteConfig } from '@/lib/config'
+import PoweredBy from '@/components/PoweredBy'
 
-export const Footer = (props) => {
-  const d = new Date()
-  const currentYear = d.getFullYear()
-  const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+export const Footer = props => {
+  return (
+    <footer className='z-10 relative w-full bg-white px-6 space-y-1 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray '>
+      <DarkModeButton className='text-center pt-4' />
 
-  return <footer className="z-10 relative w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray ">
-        <DarkModeButton className='text-center pt-4'/>
-
-        <div className="container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
-            <div className='text-center'> &copy;{`${copyrightDate}`} {siteConfig('AUTHOR')}. All rights reserved.</div>
-            <div className="md:p-0 text-center md:text-right text-xs">
-                {/* 右侧链接 */}
-                {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
-                {siteConfig('BEI_AN') && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{siteConfig('BEI_AN')} </a>)}
-                <span className='dark:text-gray-200 no-underline ml-4'>
-                    Powered by
-                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {siteConfig('VERSION')}  </a>
-                </span>
-            </div>
+      <div className='container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm'>
+        <CopyRightDate />
+        <div className='md:p-0 text-center md:text-right text-xs'>
+          {/* 右侧链接 */}
+          {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
+          <div className='flex flex-wrap'>
+            {' '}
+            <BeiAnSite />
+            <BeiAnGongAn />
+          </div>
+          <PoweredBy />
         </div>
+      </div>
     </footer>
+  )
 }

themes/example/components/Header.js

@@ -13,7 +13,7 @@ export const Header = props => {
       <div className='mx-auto max-w-4xl md:flex justify-between items-center'>
         <Link
           href='/'
-          className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
+          className='logo py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
           {siteConfig('TITLE')}
         </Link>
         <div className='w-full md:w-auto text-center md:text-right'>

themes/example/index.js

@@ -156,13 +156,14 @@ const LayoutPostList = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector('#article-wrapper #notion-article')
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -170,7 +171,7 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
@@ -178,11 +179,13 @@ const LayoutSlug = props => {
     <>
       {lock ? (
         <PostLock validPassword={validPassword} />
-      ) : (
-        <div id='article-wrapper'>
+      ) : post && (
+        <div>
           <PostMeta post={post} />
-          <NotionPage post={post} />
-          <ShareBar post={post} />
+          <div id='article-wrapper'>
+            <NotionPage post={post} />
+            <ShareBar post={post} />
+          </div>
           <Comment frontMatter={post} />
         </div>
       )}

themes/fukasawa/components/ArticleDetail.js

@@ -1,16 +1,16 @@
-import TagItemMini from './TagItemMini'
 import Comment from '@/components/Comment'
-import NotionPage from '@/components/NotionPage'
-import ShareBar from '@/components/ShareBar'
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import ArticleAround from './ArticleAround'
 import { AdSlot } from '@/components/GoogleAdsense'
 import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import WWAds from '@/components/WWAds'
 import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import WWAds from '@/components/WWAds'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import ArticleAround from './ArticleAround'
+import TagItemMini from './TagItemMini'
 
 /**
  *
@@ -25,66 +25,75 @@ export default function ArticleDetail(props) {
     return <></>
   }
   return (
-    <div id="container" className={`${fullWidth ? 'px-10' : 'max-w-5xl '} overflow-x-auto flex-grow mx-auto w-screen md:w-full`}>
+    <div
+      id='container'
+      className={`${fullWidth ? 'px-10' : 'max-w-5xl '} overflow-x-auto flex-grow mx-auto w-screen md:w-full`}>
       {post?.type && !post?.type !== 'Page' && post?.pageCover && (
-        <div className="w-full relative md:flex-shrink-0 overflow-hidden">
-          <LazyImage alt={post.title} src={post?.pageCover} className='object-cover max-h-[60vh] w-full' />
+        <div className='w-full relative md:flex-shrink-0 overflow-hidden'>
+          <LazyImage
+            alt={post.title}
+            src={post?.pageCover}
+            className='object-cover max-h-[60vh] w-full'
+          />
         </div>
       )}
 
-      <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-32  dark:border-gray-700 bg-white dark:bg-hexo-black-gray" >
-
+      <article
+        itemScope
+        itemType='https://schema.org/Movie'
+        className='subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-32  dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
         <header>
-
           {/* 文章Title */}
-          <div className="font-bold text-4xl text-black dark:text-white">
-            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post.title}
+          <div className='font-bold text-4xl text-black dark:text-white'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {post.title}
           </div>
 
-          <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
+          <section className='flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8'>
             <div>
-              {post?.category && (<>
+              {post?.category && (
+                <>
                   <Link
                     href={`/category/${post.category}`}
                     passHref
-                    className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-
-                    <i className="mr-1 fas fa-folder-open" />
+                    className='cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed'>
+                    <i className='mr-1 fas fa-folder-open' />
                     {post.category}
-
                   </Link>
-                <span className='mr-2'>|</span>
-              </>)}
+                  <span className='mr-2'>|</span>
+                </>
+              )}
 
-              {post?.type !== 'Page' && (<>
-                <Link
-                  href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                  passHref
-                  className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
+              {post?.type !== 'Page' && (
+                <>
+                  <Link
+                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                    passHref
+                    className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
+                    {post?.publishDay}
+                  </Link>
+                  <span className='mr-2'>|</span>
+                  <span className='mx-2 text-gray-400 dark:text-gray-500'>
+                    {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
+                  </span>
+                </>
+              )}
 
-                  {post?.publishDay}
-
-                </Link>
-                <span className='mr-2'>|</span>
-                <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                  {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
-                </span>
-              </>)}
-
-            <div className='my-2'>
+              <div className='my-2'>
                 {post.tagItems && (
-                    <div className="flex flex-nowrap overflow-x-auto">
-                        {post.tagItems.map(tag => (
-                            <TagItemMini key={tag.name} tag={tag} />
-                        ))}
-                    </div>
+                  <div className='flex flex-nowrap overflow-x-auto'>
+                    {post.tagItems.map(tag => (
+                      <TagItemMini key={tag.name} tag={tag} />
+                    ))}
+                  </div>
                 )}
+              </div>
             </div>
-            </div>
-
           </section>
 
-          <WWAds className='w-full' orientation='horizontal'/>
+          <WWAds className='w-full' orientation='horizontal' />
         </header>
 
         {/* Notion文章主体 */}
@@ -93,17 +102,16 @@ export default function ArticleDetail(props) {
         </section>
 
         <section>
-          <AdSlot type='in-article'/>
-           {/* 分享 */}
-           <ShareBar post={post} />
+          <AdSlot type='in-article' />
+          {/* 分享 */}
+          <ShareBar post={post} />
         </section>
-
       </article>
 
-      {post?.type === 'Post' && <ArticleAround prev={prev} next={next} /> }
+      {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
 
       {/* 评论互动 */}
-      <div className="duration-200 shadow py-6 px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
+      <div className='duration-200 shadow py-6 px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
         <Comment frontMatter={post} />
       </div>
     </div>

themes/fukasawa/components/Catalog.js

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -58,29 +58,37 @@ const Catalog = ({ toc }) => {
   if (!toc || toc?.length < 1) {
     return <></>
   }
-  return <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
-    <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <nav ref={tRef} className='flex-1 overflow-auto  overscroll-none scroll-hidden   text-black mb-6'>
-      {toc.map((tocItem) => {
-        const id = uuidToId(tocItem.id)
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-          >
-            <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-              className={`truncate ${activeSection === id ? 'font-bold text-red-400 underline' : ''}`}
-              title={tocItem.text}
-            >
-              {tocItem.text}
-            </span>
-          </a>
-        )
-      })}
-    </nav>
-  </div>
+  return (
+    <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
+      <div className='w-full dark:text-gray-300 mb-2'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <nav
+        ref={tRef}
+        className='flex-1 overflow-auto  overscroll-none scroll-hidden   text-black mb-6'>
+        {toc.map(tocItem => {
+          const id = uuidToId(tocItem.id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
+        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  marginLeft: tocItem.indentLevel * 16
+                }}
+                className={`truncate ${activeSection === id ? ' font-bold text-black dark:text-white underline' : ''}`}>
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  )
 }
 
 export default Catalog

themes/fukasawa/components/Logo.js

@@ -1,16 +1,16 @@
-import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
 
 const Logo = props => {
   return (
-   <section className='flex'>
-    <Link
-     href='/'
-     className='hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>
-     {siteConfig('TITLE')}
-    </Link>
-   </section>
-  );
+    <section className='flex'>
+      <Link
+        href='/'
+        className='logo hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>
+        {siteConfig('TITLE')}
+      </Link>
+    </section>
+  )
 }
 
 export default Logo

themes/fukasawa/components/SiteInfo.js

@@ -1,25 +1,55 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
 import { siteConfig } from '@/lib/config'
 
-function SiteInfo ({ title }) {
+function SiteInfo({ 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 leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs '
-        >
-            <span> © {`${copyrightDate}`} <span> <a href={siteConfig('LINK')}> <i className='mx-1 animate-pulse fas fa-heart'/> {siteConfig('AUTHOR')}</a>. <br /></span>
-
-            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
-
-            <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>
+    <footer className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs '>
+      <span>
+        © {`${copyrightDate}`}
+        <span>
+          <a href={siteConfig('LINK')}>
+            <i className='mx-1 animate-pulse fas fa-heart' />
+            {siteConfig('AUTHOR')}
+          </a>
+          . <br />
+        </span>
+        {siteConfig('BEI_AN') && (
+          <>
+            <i className='fas fa-shield-alt' />
+            <a href='https://beian.miit.gov.cn/' className='mr-2'>
+              {siteConfig('BEI_AN')}
+            </a>
             <br />
-            <span className='text-xs font-serif'> Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline'>NotionNext {siteConfig('VERSION')}</a></span><br /></span>
-            <h1>{title}</h1>
-        </footer>
+          </>
+        )}
+        <BeiAnGongAn />
+        <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>
+        <br />
+        <span className='text-xs font-serif'>
+          Powered by
+          <a
+            href='https://github.com/tangly1024/NotionNext'
+            className='underline'>
+            NotionNext {siteConfig('VERSION')}
+          </a>
+        </span>
+        <br />
+      </span>
+      <h1>{title}</h1>
+    </footer>
   )
 }
 export default SiteInfo

themes/fukasawa/components/SocialButton.js

@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,99 +8,175 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
+
+  const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
+  const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
+  const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+
   return (
-    <div className='w-52 flex-wrap flex'>
-      <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
-        {siteConfig('CONTACT_GITHUB') && (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
+        {CONTACT_GITHUB && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'github'}
-            href={siteConfig('CONTACT_GITHUB')}>
-            <i className='fab fa-github transform hover:scale-125 duration-150' />
+            href={CONTACT_GITHUB}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_TWITTER') && (
+        {CONTACT_TWITTER && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'twitter'}
-            href={siteConfig('CONTACT_TWITTER')}>
-            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+            href={CONTACT_TWITTER}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_TELEGRAM') && (
+        {CONTACT_TELEGRAM && (
           <a
             target='_blank'
             rel='noreferrer'
-            href={siteConfig('CONTACT_TELEGRAM')}
+            href={CONTACT_TELEGRAM}
             title={'telegram'}>
-            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_LINKEDIN') && (
+        {CONTACT_LINKEDIN && (
           <a
             target='_blank'
             rel='noreferrer'
-            href={siteConfig('CONTACT_LINKEDIN')}
-            title={'linkedIn'}>
-            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
+            href={CONTACT_LINKEDIN}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_WEIBO') && (
+        {CONTACT_WEIBO && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'weibo'}
-            href={siteConfig('CONTACT_WEIBO')}>
-            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+            href={CONTACT_WEIBO}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_INSTAGRAM') && (
+        {CONTACT_INSTAGRAM && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'instagram'}
-            href={siteConfig('CONTACT_INSTAGRAM')}>
-            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+            href={CONTACT_INSTAGRAM}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_EMAIL') && (
+        {CONTACT_EMAIL && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'email'}
-            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
-            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+            href={`mailto:${CONTACT_EMAIL}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        {ENABLE_RSS && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'RSS'}
             href={'/rss/feed.xml'}>
-            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
-        {siteConfig('CONTACT_BILIBILI') && (
+        {CONTACT_BILIBILI && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'bilibili'}
-            href={siteConfig('CONTACT_BILIBILI')}>
-            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+            href={CONTACT_BILIBILI}>
+            <i className='transform hover:scale-125 duration-150 dark:hover:text-green-400 hover:text-green-600 fab fa-bilibili' />
           </a>
         )}
-        {siteConfig('CONTACT_YOUTUBE') && (
+        {CONTACT_YOUTUBE && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'youtube'}
-            href={siteConfig('CONTACT_YOUTUBE')}>
-            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+            href={CONTACT_YOUTUBE}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
+        {CONTACT_XIAOHONGSHU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'小红书'}
+            href={CONTACT_XIAOHONGSHU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/xiaohongshu.svg'
+              alt='小红书'
+            />
+          </a>
+        )}
+        {CONTACT_ZHISHIXINGQIU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'知识星球'}
+            className='flex justify-center items-center'
+            href={CONTACT_ZHISHIXINGQIU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/zhishixingqiu.svg'
+              alt='知识星球'
+            />{' '}
+          </a>
+        )}
+        {CONTACT_WEHCHAT_PUBLIC && (
+          <button
+            onMouseEnter={openPopover}
+            onMouseLeave={closePopover}
+            aria-label={'微信公众号'}>
+            <div id='wechat-button'>
+              <i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin  dark:hover:text-green-400 hover:text-green-600' />
+            </div>
+            {/* 二维码弹框 */}
+            <div className='absolute'>
+              <div
+                id='pop'
+                className={
+                  (qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
+                  ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
+                }>
+                <div className='p-2 mt-1 w-28 h-28'>
+                  {qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
       </div>
     </div>
   )

themes/fukasawa/index.js

@@ -137,13 +137,14 @@ const LayoutPostList = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector('#article-wrapper #notion-article')
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -151,7 +152,7 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
@@ -159,7 +160,7 @@ const LayoutSlug = props => {
     <>
       {lock ? (
         <ArticleLock validPassword={validPassword} />
-      ) : (
+      ) : post && (
         <ArticleDetail {...props} />
       )}
     </>

themes/game/components/SideBarContent.js

@@ -37,9 +37,9 @@ export default function SideBarContent({ allNavPages, siteInfo }) {
     const filtered = allGames?.filter(item => {
       return (
         item.title.toLowerCase().includes(search.toLowerCase()) ||
-        item.id.toLowerCase().includes(search.toLowerCase()) ||
-        item.id
-          .toLowerCase()
+        item.short_id?.toLowerCase().includes(search.toLowerCase()) ||
+        item.short_id
+          ?.toLowerCase()
           .replace('-', '')
           .includes(search.toLowerCase().replace('-', ''))
       )

themes/game/index.js

@@ -45,7 +45,15 @@ export const useGameGlobal = () => useContext(ThemeGlobalGame)
  * @constructor
  */
 const LayoutBase = props => {
-  const { allNavPages, children, siteInfo } = props
+  const {
+    allNavPages,
+    children,
+    siteInfo,
+    tagOptions,
+    currentTag,
+    categoryOptions,
+    currentCategory
+  } = props
   const searchModal = useRef(null)
   // 在列表中进行实时过滤
   const [filterKey, setFilterKey] = useState('')
@@ -108,6 +116,23 @@ const LayoutBase = props => {
           {/* 右侧 */}
           <main className='flex-grow w-full h-full flex flex-col min-h-screen overflow-x-auto md:p-2'>
             <div className='flex-grow h-full'>{children}</div>
+            {/* 广告 */}
+            <div className='w-full py-4'>
+              <AdSlot type='in-article' />
+            </div>
+
+            {/* 主区域下方 导览 */}
+            <div className='w-full bg-white dark:bg-hexo-black-gray rounded-lg p-2'>
+              {/* 标签汇总             */}
+              <GroupCategory
+                categoryOptions={categoryOptions}
+                currentCategory={currentCategory}
+              />
+              <hr />
+              <GroupTag tagOptions={tagOptions} currentTag={currentTag} />
+              {/* 站点公告信息 */}
+              <Announcement {...props} className='p-2' />
+            </div>
             <Footer />
           </main>
         </div>
@@ -131,8 +156,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = props => {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, siteInfo } =
-    props
+  const { siteInfo } = props
   return (
     <>
       {/* 首页移动端顶部导航 */}
@@ -143,24 +167,6 @@ const LayoutIndex = props => {
       <GameListRecent />
       {/* 游戏列表 */}
       <LayoutPostList {...props} />
-
-      {/* 广告 */}
-      <div className='w-full'>
-        <AdSlot type='in-article' />
-      </div>
-
-      {/* 主区域下方 导览 */}
-      <div className='w-full bg-white dark:bg-hexo-black-gray rounded-lg p-2'>
-        {/* 标签汇总             */}
-        <GroupCategory
-          categoryOptions={categoryOptions}
-          currentCategory={currentCategory}
-        />
-        <hr />
-        <GroupTag tagOptions={tagOptions} currentTag={currentTag} />
-        {/* 站点公告信息 */}
-        <Announcement {...props} className='p-2' />
-      </div>
     </>
   )
 }
@@ -302,7 +308,7 @@ const LayoutSlug = props => {
     <>
       {lock && <ArticleLock validPassword={validPassword} />}
 
-      {!lock && (
+      {!lock && post && (
         <div id='article-wrapper'>
           <div className='game-detail-wrapper w-full grow flex'>
             <div className={`w-full md:py-2`}>

themes/game/style.js

@@ -14,9 +14,19 @@ const Style = () => {
 
       body {
         background-color: #ffffff;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
-        background-attachment: fixed;
-        background-size: cover;
+      }
+
+      /* 自定义滚动条样式（适用于 Chrome、Safari 和 Edge） */
+      html::-webkit-scrollbar {
+        width: 12px;
+      }
+
+      html::-webkit-scrollbar-track {
+        background-color: black;
+      }
+
+      html::-webkit-scrollbar-thumb {
+        background: #4e4e4e;
       }
     `}</style>
   )

themes/gitbook/components/ArticleAround.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 
 /**
@@ -9,21 +10,29 @@ export default function ArticleAround({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
+  const { locale } = useGlobal()
   return (
-    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+    <section className='text-gray-800 dark:text-gray-400 flex items-center justify-between gap-x-3 my-4'>
       <Link
         href={prev.href}
         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}
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <i className='mr-1 fas fa-angle-left' />
+        <div>
+          <div>{locale.COMMON.PREV_POST}</div>
+          <div>{prev.title}</div>
+        </div>
       </Link>
+
       <Link
         href={next.href}
         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' />
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <div>
+          <div>{locale.COMMON.NEXT_POST}</div>
+          <div> {next.title}</div>
+        </div>
+        <i className='ml-1 my-1 fas fa-angle-right' />
       </Link>
     </section>
   )

themes/gitbook/components/ArticleInfo.js

@@ -1,9 +1,17 @@
+/**
+ * 文章补充咨询
+ * @param {*} param0
+ * @returns
+ */
 export default function ArticleInfo({ post }) {
   if (!post) {
     return null
   }
-  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
-        <i className="fa-regular fa-clock mr-1" />
-        Last update:  { post.date?.start_date}
+  return (
+    <div className='pt-10 pb-6 text-gray-400 text-sm'>
+      <i className='fa-regular fa-clock mr-1' />
+      Last update:{' '}
+      {post.date?.start_date || post?.publishDay || post?.lastEditedDay}
     </div>
+  )
 }

themes/gitbook/components/BlogPostCard.js

@@ -3,7 +3,6 @@ import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import CONFIG from '../config'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
@@ -14,8 +13,8 @@ const BlogPostCard = ({ post, className }) => {
     <Link href={post?.href} passHref>
       <div
         key={post.id}
-        className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
-                    ${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
+        className={`${className} relative py-1.5 cursor-pointer px-1.5 rounded-md hover:bg-gray-50
+                    ${currentSelected ? 'text-green-500 dark:bg-yellow-100 dark:text-yellow-600 font-semibold' : ' dark:hover:bg-yellow-100 dark:hover:text-yellow-600'}`}>
         <div className='w-full select-none'>
           {siteConfig('POST_TITLE_ICON') && (
             <NotionIcon icon={post?.pageIcon} />
@@ -23,10 +22,9 @@ const BlogPostCard = ({ post, className }) => {
           {post.title}
         </div>
         {/* 最新文章加个红点 */}
-        {post?.isLatest &&
-          siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
-            <Badge />
-          )}
+        {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE') && (
+          <Badge />
+        )}
       </div>
     </Link>
   )

themes/gitbook/components/BottomMenuBar.js

@@ -1,5 +1,5 @@
-import MobileButtonCatalog from './MobileButtonCatalog'
-import MobileButtonPageNav from './MobileButtonPageNav'
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '..'
 
 /**
  * 移动端底部导航
@@ -8,20 +8,43 @@ import MobileButtonPageNav from './MobileButtonPageNav'
  */
 export default function BottomMenuBar({ post, className }) {
   const showTocButton = post?.toc?.length > 1
+  const { locale } = useGlobal()
+  const { pageNavVisible, changePageNavVisible, tocVisible, changeTocVisible } =
+    useGitBookGlobal()
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
 
   return (
-    <>
-      {/* 移动端底部导航按钮 */}
-      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
-        <div className='w-full'>
-          <MobileButtonPageNav />
-        </div>
+    <div className='md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600'>
+      <div
+        className={`grid h-full max-w-lg  mx-auto font-medium ${showTocButton && 'grid-cols-2'}`}>
+        <button
+          type='button'
+          onClick={togglePageNavVisible}
+          className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+          <i className='fa-book fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+          <span className='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+            {locale.COMMON.ARTICLE_LIST}
+          </span>
+        </button>
+
         {showTocButton && (
-          <div className='w-full'>
-            <MobileButtonCatalog />
-          </div>
+          <button
+            type='button'
+            onClick={toggleToc}
+            className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+            <i className='fa-list-ol fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+            <span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+              {locale.COMMON.TABLE_OF_CONTENTS}
+            </span>
+          </button>
         )}
       </div>
-    </>
+    </div>
   )
 }

themes/gitbook/components/Catalog.js

@@ -1,4 +1,3 @@
-import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -14,7 +13,6 @@ const Catalog = ({ post }) => {
   const toc = post?.toc
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
-  const {locale}= useGlobal()
 
   // 监听滚动事件
   useEffect(() => {
@@ -69,25 +67,29 @@ const Catalog = ({ post }) => {
 
   return (
     <>
-      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+      {/* <div className='w-full hidden md:block'>
+        <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
+        </div> */}
+
       <div
         id='toc-wrapper'
         className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
-        <nav className='h-full  text-black'>
+        <nav className='h-full text-black'>
           {toc?.map(tocItem => {
             const id = uuidToId(tocItem.id)
             return (
               <a
                 key={id}
                 href={`#${id}`}
-                className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+                //  notion-table-of-contents-item
+                className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',
                     marginLeft: tocItem.indentLevel * 16
                   }}
-                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}>
+                  className={`truncate`}>
                   {tocItem.text}
                 </span>
               </a>

themes/gitbook/components/Footer.js

@@ -1,3 +1,4 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
 import { siteConfig } from '@/lib/config'
 import SocialButton from './SocialButton'
 /**
@@ -13,12 +14,10 @@ const Footer = ({ siteInfo }) => {
     parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
-      <hr className='pb-2' />
-
+    <footer className='z-20 border p-2 rounded-lg bg:white dark:border-black dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
       <SocialButton />
 
-      <div className='flex justify-center pt-1'>
+      <div className='flex justify-center'>
         <div>
           <i className='mx-1 animate-pulse fas fa-heart' />{' '}
           <a
@@ -31,21 +30,13 @@ const Footer = ({ siteInfo }) => {
         © {`${copyrightDate}`}
       </div>
 
-      <div className='text-xs font-serif'>
-        Powered By{' '}
-        <a
-          href='https://github.com/tangly1024/NotionNext'
-          className='underline text-gray-500 dark:text-gray-300'>
-          NotionNext {siteConfig('VERSION')}
-        </a>
-      </div>
-
       {siteConfig('BEI_AN') && (
         <>
           <i className='fas fa-shield-alt' />{' '}
           <a href='https://beian.miit.gov.cn/' className='mr-2'>
             {siteConfig('BEI_AN')}
           </a>
+          <BeiAnGongAn />
           <br />
         </>
       )}
@@ -58,6 +49,14 @@ const Footer = ({ siteInfo }) => {
         <i className='fas fa-users' />{' '}
         <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
       </span>
+      <div className='text-xs font-serif'>
+        Powered By{' '}
+        <a
+          href='https://github.com/tangly1024/NotionNext'
+          className='underline text-gray-500 dark:text-gray-300'>
+          NotionNext {siteConfig('VERSION')}
+        </a>
+      </div>
       {/* SEO title */}
       <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
     </footer>

themes/gitbook/components/Header.js

@@ -2,11 +2,13 @@ import Collapse from '@/components/Collapse'
 import DarkModeButton from '@/components/DarkModeButton'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs'
 import { useRef, useState } from 'react'
 import CONFIG from '../config'
 import LogoBar from './LogoBar'
 import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
+import SearchInput from './SearchInput'
 
 /**
  * 页头：顶部导航栏 + 菜单
@@ -58,8 +60,60 @@ export default function Header(props) {
     links = customMenu
   }
 
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
   return (
     <div id='top-nav' className={'fixed top-0 w-full z-20 ' + className}>
+      {/* PC端菜单 */}
+      <div className='flex justify-center border-b dark:border-black items-center w-full h-16 bg-white dark:bg-hexo-black-gray'>
+        <div className='px-5 max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
+          {/* 左侧*/}
+          <div className='flex'>
+            <LogoBar {...props} />
+
+            {/* 桌面端顶部菜单 */}
+            <div className='hidden md:flex'>
+              {links &&
+                links?.map((link, index) => (
+                  <MenuItemDrop key={index} link={link} />
+                ))}
+            </div>
+          </div>
+
+          {/* 右侧 */}
+          <div className='flex items-center gap-4'>
+            {/* 登录相关 */}
+            {enableClerk && (
+              <>
+                <SignedOut>
+                  <SignInButton mode='modal'>
+                    <button className='bg-green-500 hover:bg-green-600 text-white rounded-lg px-3 py-2'>
+                      {locale.COMMON.SIGN_IN}
+                    </button>
+                  </SignInButton>
+                </SignedOut>
+                <UserButton />
+              </>
+            )}
+            <DarkModeButton className='text-sm items-center h-full hidden md:flex' />
+            <SearchInput className='hidden md:flex md:w-52 lg:w-72' />
+            {/* 折叠按钮、仅移动端显示 */}
+            <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
+              <DarkModeButton className='flex text-md items-center h-full' />
+              <div
+                onClick={toggleMenuOpen}
+                className='cursor-pointer text-lg hover:scale-110 duration-150'>
+                {isOpen ? (
+                  <i className='fas fa-times' />
+                ) : (
+                  <i className='fa-solid fa-bars' />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* 移动端折叠菜单 */}
       <Collapse
         type='vertical'
@@ -75,35 +129,6 @@ export default function Header(props) {
           />
         </div>
       </Collapse>
-
-      {/* 导航栏菜单 */}
-      <div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
-        {/* 左侧图标Logo */}
-        <LogoBar {...props} />
-
-        {/* 折叠按钮、仅移动端显示 */}
-        <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
-          <DarkModeButton className='flex text-md items-center h-full' />
-          <div
-            onClick={toggleMenuOpen}
-            className='cursor-pointer text-lg hover:scale-110 duration-150'>
-            {isOpen ? (
-              <i className='fas fa-times' />
-            ) : (
-              <i className='fa-solid fa-bars' />
-            )}
-          </div>
-        </div>
-
-        {/* 桌面端顶部菜单 */}
-        <div className='hidden md:flex'>
-          {links &&
-            links?.map((link, index) => (
-              <MenuItemDrop key={index} link={link} />
-            ))}
-          <DarkModeButton className='text-sm flex items-center h-full' />
-        </div>
-      </div>
     </div>
   )
 }

themes/gitbook/components/JumpToTopButton.js

@@ -14,7 +14,7 @@ const JumpToTopButton = ({ showPercent = false, percent, className }) => {
       data-aos-duration='300'
       data-aos-once='false'
       data-aos-anchor-placement='top-center'
-      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      className='fixed xl:right-96 xl:mr-20 right-2 bottom-24 z-20'>
       <i
         className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
         onClick={() => {

themes/gitbook/components/LoadingCover.js

@@ -1,7 +0,0 @@
-export default function LoadingCover() {
-  return <div id='cover-loading' className={'z-50 opacity-50pointer-events-none transition-all duration-300'}>
-    <div className='w-full h-screen flex justify-center items-center'>
-        <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
-    </div>
-</div>
-}

themes/gitbook/components/LogoBar.js

@@ -11,16 +11,16 @@ import CONFIG from '../config'
 export default function LogoBar(props) {
   const { siteInfo } = props
   return (
-    <div id='top-wrapper' className='w-full flex items-center'>
+    <div id='logo-wrapper' className='w-full flex items-center mr-2'>
       <Link
         href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
-        className='flex text-md md:text-xl dark:text-gray-200'>
+        className='flex text-lg font-bold md:text-2xl dark:text-gray-200'>
         <LazyImage
           src={siteInfo?.icon}
           width={24}
           height={24}
           alt={siteConfig('AUTHOR')}
-          className='mr-2 hidden md:block'
+          className='mr-2 hidden md:block '
         />
         {siteInfo?.title || siteConfig('TITLE')}
       </Link>

themes/gitbook/components/MenuItemDrop.js

@@ -13,27 +13,9 @@ export const MenuItemDrop = ({ link }) => {
   const selected = router.pathname === link.href || router.asPath === link.href
   return (
     <li
-      className='cursor-pointer list-none items-center flex mx-2'
+      className='cursor-pointer list-none items-center flex mx-2 font-semibold'
       onMouseOver={() => changeShow(true)}
       onMouseOut={() => changeShow(false)}>
-      {hasSubMenu && (
-        <div
-          className={
-            'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-            (selected
-              ? 'bg-green-600 text-white hover:text-white'
-              : 'hover:text-green-600')
-          }>
-          <div>
-            {link?.icon && <i className={link?.icon} />} {link?.name}
-            {hasSubMenu && (
-              <i
-                className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-            )}
-          </div>
-        </div>
-      )}
-
       {!hasSubMenu && (
         <div
           className={
@@ -48,25 +30,43 @@ export const MenuItemDrop = ({ link }) => {
         </div>
       )}
 
-      {/* 子菜单 */}
+      {/* 包含子菜单 */}
       {hasSubMenu && (
-        <ul
-          className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-          {link?.subMenus?.map((sLink, index) => {
-            return (
-              <li
-                key={index}
-                className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.href} target={link?.target}>
-                  <span className='text-xs font-extralight'>
-                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
-                    {sLink.title}
-                  </span>
-                </Link>
-              </li>
-            )
-          })}
-        </ul>
+        <>
+          <div
+            className={
+              'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+              (selected
+                ? 'bg-green-600 text-white hover:text-white'
+                : 'hover:text-green-600')
+            }>
+            <div>
+              {link?.icon && <i className={link?.icon} />} {link?.name}
+              {hasSubMenu && (
+                <i
+                  className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+              )}
+            </div>
+          </div>
+          {/* 下拉菜单内容 */}
+          <ul
+            className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+            {link?.subMenus?.map((sLink, index) => {
+              return (
+                <li
+                  key={index}
+                  className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                  <Link href={sLink.href} target={link?.target}>
+                    <span className='text-xs'>
+                      {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                      {sLink.title}
+                    </span>
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </>
       )}
     </li>
   )

themes/gitbook/components/MobileButtonCatalog.js

@@ -1,31 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端目录按钮
- */
-export default function MobileButtonCatalog() {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const { locale } = useGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={
-        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }>
-      <a
-        id='toc-button'
-        className={
-          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
-        }>
-        <i className='fa-list-ol fas' />
-        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
-      </a>
-    </div>
-  )
-}

themes/gitbook/components/MobileButtonPageNav.js

@@ -1,30 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端文章导航按钮
- */
-export default function MobileButtonPageNav() {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-  const { locale } = useGlobal()
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
-
-  return (
-    <div
-      onClick={togglePageNavVisible}
-      className={
-        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }>
-      <a
-        id='nav-button'
-        className={
-          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
-        }>
-        <i className='fa-book fas' />
-        <span>{locale.COMMON.ARTICLE_LIST}</span>
-      </a>
-    </div>
-  )
-}

themes/gitbook/components/NavPostItem.js

@@ -1,7 +1,7 @@
 import Badge from '@/components/Badge'
 import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
+import { useEffect, useState } from 'react'
 import BlogPostCard from './BlogPostCard'
 
 /**
@@ -13,12 +13,35 @@ import BlogPostCard from './BlogPostCard'
  */
 const NavPostItem = props => {
   const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
-  // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND')
+  const [isTouchDevice, setIsTouchDevice] = useState(false)
+
+  // 检测是否为触摸设备
+  useEffect(() => {
+    const checkTouchDevice = () => {
+      if (window.matchMedia('(pointer: coarse)').matches) {
+        setIsTouchDevice(true)
+      }
+    }
+    checkTouchDevice()
+
+    // 可选：监听窗口大小变化时重新检测
+    window.addEventListener('resize', checkTouchDevice)
+    return () => {
+      window.removeEventListener('resize', checkTouchDevice)
+    }
+  }, [])
 
   // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
     toggleItem() // 调用父组件传递的切换函数
-    // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
+  }
+  const onHoverToggle = () => {
+    // 允许鼠标悬停时自动展开，而非点击展开
+    if (!hoverExpand || isTouchDevice) {
+      return
+    }
+    toggleOpenSubMenu()
   }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
@@ -27,22 +50,25 @@ const NavPostItem = props => {
     return (
       <>
         <div
+          onMouseEnter={onHoverToggle}
           onClick={toggleOpenSubMenu}
-          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-md p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
-          <span>{group?.category}</span>
+          <span className={`${expanded && 'font-semibold'}`}>
+            {group?.category}
+          </span>
           <div className='inline-flex items-center select-none pointer-events-none '>
             <i
-              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
           </div>
           {groupHasLatest &&
-            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE') &&
             !expanded && <Badge />}
         </div>
         <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
           {group?.items?.map((post, index) => (
             <div key={index} className='ml-3 border-l'>
-              <BlogPostCard className='text-sm ml-3' post={post} />
+              <BlogPostCard className='ml-3' post={post} />
             </div>
           ))}
         </Collapse>
@@ -53,7 +79,7 @@ const NavPostItem = props => {
       <>
         {group?.items?.map((post, index) => (
           <div key={index}>
-            <BlogPostCard className='text-sm py-2' post={post} />
+            <BlogPostCard className='text-md py-2' post={post} />
           </div>
         ))}
       </>

themes/gitbook/components/NavPostList.js

@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
 import NavPostItem from './NavPostItem'
 
 /**
@@ -30,16 +31,17 @@ const NavPostList = props => {
     CONFIG
   )
 
-  // 展开文件夹
   useEffect(() => {
+    // 展开文件夹
     setTimeout(() => {
-      // 默认展开一个
+      const currentPath = decodeURIComponent(router.asPath.split('?')[0])
       const defaultOpenIndex = getDefaultOpenIndexByPath(
         categoryFolders,
-        decodeURIComponent(router.asPath.split('?')[0])
+        currentPath
       )
       setExpandedGroups([defaultOpenIndex])
     }, 500)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router, filteredNavPages])
 
   // 折叠项切换，当折叠或展开数组时会调用
@@ -80,11 +82,22 @@ const NavPostList = props => {
       </div>
     )
   }
+  // 如果href
+  const href = siteConfig('GITBOOK_INDEX_PAGE') + ''
+
+  const homePost = {
+    id: '-1',
+    title: siteConfig('DESCRIPTION'),
+    href: href.indexOf('/') !== 0 ? '/' + href : href
+  }
 
   return (
     <div
       id='posts-wrapper'
-      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      className='w-full flex-grow space-y-0.5 pr-4 tracking-wider'>
+      {/* 当前文章 */}
+      <BlogPostCard className='mb-4' post={homePost} />
+
       {/* 文章列表 */}
       {categoryFolders?.map((group, index) => (
         <NavPostItem
@@ -105,6 +118,7 @@ function groupArticles(filteredNavPages) {
     return []
   }
   const groups = []
+  const AUTO_SORT = siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)
 
   for (let i = 0; i < filteredNavPages.length; i++) {
     const item = filteredNavPages[i]
@@ -112,7 +126,7 @@ function groupArticles(filteredNavPages) {
 
     let existingGroup = null
     // 开启自动分组排序；将同分类的自动归到同一个文件夹，忽略Notion中的排序
-    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
+    if (AUTO_SORT) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组
@@ -136,19 +150,16 @@ function groupArticles(filteredNavPages) {
  * @returns {number} 返回需要展开的菜单索引
  */
 function getDefaultOpenIndexByPath(categoryFolders, path) {
-  // 默认展开第一个索引
-  let defaultIndex = 0
-
   // 查找满足条件的第一个索引
   const index = categoryFolders.findIndex(group => {
-    return group.items.some(post => path === '/' + post.slug)
+    return group.items.some(post => path === post.href)
   })
 
   // 如果找到满足条件的索引，则设置为该索引
   if (index !== -1) {
-    defaultIndex = index
+    return index
   }
 
-  return defaultIndex
+  return 0
 }
 export default NavPostList

themes/gitbook/components/PageNavDrawer.js

@@ -22,6 +22,7 @@ const PageNavDrawer = props => {
 
   useEffect(() => {
     changePageNavVisible(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router])
 
   return (

themes/gitbook/components/SearchInput.js

@@ -2,6 +2,7 @@ import { siteConfig } from '@/lib/config'
 import { deepClone } from '@/lib/utils'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 let lock = false
 
 /**
@@ -19,6 +20,15 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     }
   })
 
+  /**
+   * 快捷键设置
+   */
+  useHotkeys('ctrl+k', e => {
+    searchInputRef?.current?.focus()
+    e.preventDefault()
+    handleSearch()
+  })
+
   const handleSearch = () => {
     // 使用Algolia
     if (siteConfig('ALGOLIA_APP_ID')) {
@@ -29,6 +39,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       keyword = keyword.trim()
     } else {
       setFilteredNavPages(allNavPages)
+      return
     }
     const filterAllNavPages = deepClone(allNavPages)
 
@@ -79,6 +90,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   const cleanSearch = () => {
     searchInputRef.current.value = ''
     handleSearch()
+    setShowClean(false)
   }
 
   const [showClean, setShowClean] = useState(false)
@@ -103,22 +115,9 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   }
 
   return (
-    <div className={'flex w-full'}>
-      <input
-        ref={searchInputRef}
-        type='text'
-        className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white`}
-        onFocus={handleFocus}
-        onKeyUp={handleKeyUp}
-        onCompositionStart={lockSearchInput}
-        onCompositionUpdate={lockSearchInput}
-        onCompositionEnd={unLockSearchInput}
-        onChange={e => updateSearchKey(e.target.value)}
-        defaultValue={currentSearch}
-      />
-
+    <div className={`${className} relative`}>
       <div
-        className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
+        className='absolute left-0 ml-4 items-center justify-center py-2'
         onClick={handleSearch}>
         <i
           className={
@@ -126,6 +125,24 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
           }
         />
       </div>
+      <input
+        ref={searchInputRef}
+        type='text'
+        className={`rounded-lg border dark:border-black pl-12 leading-10 placeholder-gray-500 outline-none w-full transition focus:shadow-lg text-black bg-gray-100 dark:bg-black dark:text-white`}
+        onFocus={handleFocus}
+        onKeyUp={handleKeyUp}
+        placeholder='Search'
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch}
+      />
+      <div
+        className='absolute right-0 mr-4 items-center justify-center py-2 text-gray-400 dark:text-gray-600'
+        onClick={handleSearch}>
+        Ctrl+K
+      </div>
 
       {showClean && (
         <div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>

themes/gitbook/components/SocialButton.js

@@ -144,6 +144,7 @@ const SocialButton = () => {
             target='_blank'
             rel='noreferrer'
             title={'知识星球'}
+            className='flex justify-center items-center'
             href={CONTACT_ZHISHIXINGQIU}>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img

themes/gitbook/config.js

@@ -15,6 +15,8 @@ const CONFIG = {
   // 导航文章自动排他折叠
   GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类，其它文件夹自动关闭。
 
+  GITBOOK_FOLDER_HOVER_EXPAND: false, // 左侧导航文件夹鼠标悬停时自动展开；若为false，则要点击才能展开
+
   // Widget
   GITBOOK_WIDGET_REVOLVER_MAPS:
     process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件

themes/gitbook/index.js

@@ -3,14 +3,19 @@
 import Comment from '@/components/Comment'
 import { AdSlot } from '@/components/GoogleAdsense'
 import Live2D from '@/components/Live2D'
+import LoadingCover from '@/components/LoadingCover'
 import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
+import DashboardBody from '@/components/ui/dashboard/DashboardBody'
+import DashboardHeader from '@/components/ui/dashboard/DashboardHeader'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import { getShortId } from '@/lib/utils/pageId'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
@@ -30,7 +35,6 @@ import JumpToTopButton from './components/JumpToTopButton'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
-import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
 import CONFIG from './config'
 import { Style } from './style'
@@ -74,7 +78,7 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
     }
     // 属于最新文章通常6篇 && (无阅读记录 || 最近更新时间大于上次阅读时间)
     if (
-      latestPosts.some(post => post?.id.indexOf(item?.short_id) === 0) &&
+      latestPosts.some(post => post?.id.indexOf(item?.short_id) === 14) &&
       (!postReadTime[item.short_id] ||
         postReadTime[item.short_id] < new Date(item.lastEditedDate).getTime())
     ) {
@@ -113,6 +117,11 @@ const LayoutBase = props => {
     setFilteredNavPages(getNavPagesWithLatest(allNavPages, latestPosts, post))
   }, [router])
 
+  const GITBOOK_LOADING_COVER = siteConfig(
+    'GITBOOK_LOADING_COVER',
+    true,
+    CONFIG
+  )
   return (
     <ThemeGlobalGitbook.Provider
       value={{
@@ -129,7 +138,7 @@ const LayoutBase = props => {
 
       <div
         id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300`}>
         <AlgoliaSearchModal cRef={searchModal} {...props} />
 
         {/* 顶部导航栏 */}
@@ -137,27 +146,18 @@ const LayoutBase = props => {
 
         <main
           id='wrapper'
-          className={
-            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
-            'relative flex justify-between w-full h-full mx-auto'
-          }>
+          className={`${siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : ''} relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl`}>
           {/* 左侧推拉抽屉 */}
           {fullWidth ? null : (
-            <div
-              className={
-                'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
-              }>
-              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+            <div className={'hidden md:block relative z-10 '}>
+              <div className='w-80 pt-14 pb-4 sticky top-0 h-screen flex justify-between flex-col'>
                 {/* 导航 */}
-                <div className='overflow-y-scroll scroll-hidden'>
+                <div className='overflow-y-scroll scroll-hidden pt-10 pl-5'>
                   {/* 嵌入 */}
                   {slotLeft}
-                  {/* 搜索框 */}
-                  <SearchInput className='my-3 rounded-md' />
 
-                  {/* 文章列表 */}
                   {/* 所有文章列表 */}
-                  <NavPostList filteredNavPages={filteredNavPages} />
+                  <NavPostList filteredNavPages={filteredNavPages} {...props} />
                 </div>
                 {/* 页脚 */}
                 <Footer {...props} />
@@ -165,34 +165,21 @@ const LayoutBase = props => {
             </div>
           )}
 
+          {/* 中间内容区域 */}
           <div
             id='center-wrapper'
-            className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen dark:bg-black'>
+            className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'>
             <div
               id='container-inner'
-              className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}>
+              className={`w-full ${fullWidth ? 'px-5' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
               {slotTop}
               <WWAds className='w-full' orientation='horizontal' />
 
-              {/* <Transition
-                show={!onLoading}
-                appear={true}
-                enter='transition ease-in-out duration-700 transform order-first'
-                enterFrom='opacity-0 translate-y-16'
-                enterTo='opacity-100'
-                leave='transition ease-in-out duration-300 transform'
-                leaveFrom='opacity-100 translate-y-0'
-                leaveTo='opacity-0 -translate-y-16'
-                unmount={false}> */}
               {children}
-              {/* </Transition> */}
 
               {/* Google广告 */}
               <AdSlot type='in-article' />
               <WWAds className='w-full' orientation='horizontal' />
-
-              {/* 回顶按钮 */}
-              <JumpToTopButton />
             </div>
 
             {/* 底部 */}
@@ -201,17 +188,16 @@ const LayoutBase = props => {
             </div>
           </div>
 
-          {/*  右侧侧推拉抽屉 */}
+          {/*  右侧 */}
           {fullWidth ? null : (
             <div
-              style={{ width: '20rem' }}
               className={
-                'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
+                'w-72 hidden 2xl:block dark:border-transparent flex-shrink-0 relative z-10 '
               }>
-              <div className='py-14 px-6 sticky top-0'>
+              <div className='py-14 sticky top-0'>
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
-                <div className='py-4'>
+                <div>
                   {/* 桌面端目录 */}
                   <Catalog {...props} />
                   {slotRight}
@@ -237,6 +223,11 @@ const LayoutBase = props => {
           )}
         </main>
 
+        {GITBOOK_LOADING_COVER && <LoadingCover />}
+
+        {/* 回顶按钮 */}
+        <JumpToTopButton />
+
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
@@ -255,29 +246,48 @@ const LayoutBase = props => {
  */
 const LayoutIndex = props => {
   const router = useRouter()
-  useEffect(() => {
-    router.push(siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)).then(() => {
-      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE', null, CONFIG))
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            console.log(
-              '请检查您的Notion数据库中是否包含此slug页面： ',
-              siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)
-            )
-            const containerInner = document.querySelector(
-              '#theme-gitbook #container-inner'
-            )
-            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)}的文章</div></blockquote>`
-            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
-          }
-        }
-      }, 7 * 1000)
-    })
-  }, [])
+  const index = siteConfig('GITBOOK_INDEX_PAGE', 'about', CONFIG)
+  const [hasRedirected, setHasRedirected] = useState(false) // 添加状态追踪是否已重定向
 
-  return <></>
+  useEffect(() => {
+    const tryRedirect = async () => {
+      if (!hasRedirected) {
+        // 仅当未重定向时执行
+        setHasRedirected(true) // 更新状态，防止多次执行
+
+        // 重定向到指定文章
+        router.push(index).then(() => {
+          setTimeout(() => {
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
+            if (!article) {
+              console.log(
+                '请检查您的Notion数据库中是否包含此slug页面： ',
+                index
+              )
+
+              // 显示错误信息
+              const containerInner = document.querySelector(
+                '#theme-gitbook #container-inner'
+              )
+              const newHTML = `<h1 class="text-3xl pt-12 dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${index}的文章</div></blockquote>`
+              containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+            }
+          }, 2000)
+        })
+      }
+    }
+
+    if (index) {
+      console.log('重定向', index)
+      tryRedirect()
+    } else {
+      console.log('无重定向', index)
+    }
+  }, [index, hasRedirected]) // 将 hasRedirected 作为依赖确保状态变更时更新
+
+  return null // 不渲染任何内容
 }
 
 /**
@@ -296,15 +306,26 @@ const LayoutPostList = props => {
  * @returns
  */
 const LayoutSlug = props => {
-  const { post, prev, next, lock, validPassword } = props
+  const { post, prev, next, siteInfo, lock, validPassword } = props
   const router = useRouter()
+  // 如果是文档首页文章，则修改浏览器标签
+  const index = siteConfig('GITBOOK_INDEX_PAGE', 'about', CONFIG)
+  const basePath = router.asPath.split('?')[0]
+  const title =
+    basePath?.indexOf(index) > 0
+      ? `${post?.title} | ${siteInfo?.description}`
+      : `${post?.title} | ${siteInfo?.title}`
+
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -312,12 +333,16 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
   return (
     <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+
       {/* 文章锁 */}
       {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -333,17 +358,20 @@ const LayoutSlug = props => {
 
           {/* Notion文章主体 */}
           {post && (
-            <section id='article-wrapper' className='px-1'>
-              <NotionPage post={post} />
+            <section className='px-1'>
+              <div id='article-wrapper'>
+                <NotionPage post={post} />
+              </div>
 
               {/* 分享 */}
               <ShareBar post={post} />
               {/* 文章分类和标签信息 */}
               <div className='flex justify-between'>
-                {siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) &&
-                  post?.category && <CategoryItem category={post.category} />}
+                {siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
+                  <CategoryItem category={post.category} />
+                )}
                 <div>
-                  {siteConfig('POST_DETAIL_TAG', null, CONFIG) &&
+                  {siteConfig('POST_DETAIL_TAG') &&
                     post?.tagItems?.map(tag => (
                       <TagItemMini key={tag.name} tag={tag} />
                     ))}
@@ -354,8 +382,8 @@ const LayoutSlug = props => {
                 <ArticleAround prev={prev} next={next} />
               )}
 
-              <AdSlot />
-              <WWAds className='w-full' orientation='horizontal' />
+              {/* <AdSlot />
+              <WWAds className='w-full' orientation='horizontal' /> */}
 
               <Comment frontMatter={post} />
             </section>
@@ -499,15 +527,99 @@ const LayoutTagIndex = props => {
   )
 }
 
-export {
-  Layout404,
-  LayoutArchive,
-  LayoutBase,
-  LayoutCategoryIndex,
-  LayoutIndex,
-  LayoutPostList,
-  LayoutSearch,
-  LayoutSlug,
-  LayoutTagIndex,
-  CONFIG as THEME_CONFIG
+/**
+ * 登录页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignIn = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
 }
+
+/**
+ * 注册页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignUp = props => {
+  const { post } = props
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <>
+      <div className='grow mt-20'>
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+        <div id='article-wrapper'>
+          <NotionPage post={post} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ * 仪表盘
+ * @param {*} props
+ * @returns
+ */
+const LayoutDashboard = props => {
+  const { post } = props
+
+  return (
+    <>
+      <div className='container grow'>
+        <div className='flex flex-wrap justify-center -mx-4'>
+          <div id='container-inner' className='w-full p-4'>
+            {post && (
+              <div id='article-wrapper' className='mx-auto'>
+                <NotionPage {...props} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* 仪表盘 */}
+      <DashboardHeader />
+      <DashboardBody />
+    </>
+  )
+}
+
+export {
+    Layout404,
+    LayoutArchive,
+    LayoutBase,
+    LayoutCategoryIndex,
+    LayoutDashboard,
+    LayoutIndex,
+    LayoutPostList,
+    LayoutSearch,
+    LayoutSignIn,
+    LayoutSignUp,
+    LayoutSlug,
+    LayoutTagIndex,
+    CONFIG as THEME_CONFIG
+}
+

themes/heo/components/AnalyticsCard.js

@@ -11,31 +11,35 @@ export function AnalyticsCard(props) {
   const today = new Date()
   const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
+  const postCountTitle = siteConfig('HEO_POST_COUNT_TITLE', null, CONFIG)
+  const siteTimeTitle = siteConfig('HEO_SITE_TIME_TITLE', null, CONFIG)
+  const siteVisitTitle = siteConfig('HEO_SITE_VISIT_TITLE', null, CONFIG)
+  const siteVisitorTitle = siteConfig('HEO_SITE_VISITOR_TITLE', null, CONFIG)
 
   const { postCount } = props
   return <>
         <div className='text-md flex flex-col space-y-1 justify-center px-3'>
             <div className='inline'>
                 <div className='flex justify-between'>
-                    <div>文章数:</div>
+                    <div>{postCountTitle}</div>
                     <div>{postCount}</div>
                 </div>
             </div>
             <div className='inline'>
                 <div className='flex justify-between'>
-                    <div>建站天数:</div>
+                    <div>{siteTimeTitle}</div>
                     <div>{diffDays} 天</div>
                 </div>
             </div>
             <div className='hidden busuanzi_container_page_pv'>
                 <div className='flex justify-between'>
-                    <div>访问量:</div>
+                    <div>{siteVisitTitle}</div>
                     <div className='busuanzi_value_page_pv' />
                 </div>
             </div>
             <div className='hidden busuanzi_container_site_uv'>
                 <div className='flex justify-between'>
-                    <div>访客数:</div>
+                    <div>{siteVisitorTitle}</div>
                     <div className='busuanzi_value_site_uv' />
                 </div>
             </div>

themes/heo/components/Announcement.js

@@ -4,13 +4,15 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
 
 const Announcement = ({ post, className }) => {
   if (post?.blockMap) {
-    return <div >
-            {post && (
-                <div id="announcement-content">
-                    <NotionPage post={post} />
-                </div>
-            )}
-        </div>
+    return (
+      <div>
+        {post && (
+          <div id='announcement-content'>
+            <NotionPage post={post} />
+          </div>
+        )}
+      </div>
+    )
   } else {
     return <></>
   }

themes/heo/components/BlogPostCard.js

@@ -1,14 +1,11 @@
 import LazyImage from '@/components/LazyImage'
-import NotionIcon from '@/components/NotionIcon'
+import NotionIcon from './NotionIcon'
 import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CONFIG from '../config'
 import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const { NOTION_CONFIG } = useGlobal()
-
   const showPreview =
     siteConfig('HEO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   if (
@@ -23,38 +20,35 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
     post?.pageCoverThumbnail &&
     !showPreview
 
-  const POST_TWO_COLS = siteConfig(
-    'HEO_HOME_POST_TWO_COLS',
-    null,
-    NOTION_CONFIG
+  const POST_TWO_COLS = siteConfig('HEO_HOME_POST_TWO_COLS', true, CONFIG)
+  const COVER_HOVER_ENLARGE = siteConfig(
+    'HEO_POST_LIST_COVER_HOVER_ENLARGE',
+    true,
+    CONFIG
   )
 
   return (
     <article
-      className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`}>
+      className={` ${COVER_HOVER_ENLARGE} ? ' hover:transition-all duration-150' : ''}`}>
       <div
         data-wow-delay='.2s'
         className={
-          POST_TWO_COLS
-            ? '2xl:h-96 2xl:flex-col'
-            : '' +
-              'wow fadeInUp border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row  group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'
+          (POST_TWO_COLS ? '2xl:h-96 2xl:flex-col' : '') +
+          ' wow fadeInUp border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row  group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'
         }>
         {/* 图片封面 */}
         {showPageCover && (
           <Link href={post?.href} passHref legacyBehavior>
             <div
               className={
-                POST_TWO_COLS
-                  ? ' 2xl:w-full'
-                  : '' +
-                    'w-full md:w-5/12 overflow-hidden cursor-pointer select-none'
+                (POST_TWO_COLS ? ' 2xl:w-full' : '') +
+                ' w-full md:w-5/12 overflow-hidden cursor-pointer select-none'
               }>
               <LazyImage
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
                 alt={post?.title}
-                className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'
+                className='h-full w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-500 ease-in-out' //宽高都调整为自适应,保证封面居中
               />
             </div>
           </Link>
@@ -63,10 +57,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
         {/* 文字区块 */}
         <div
           className={
-            POST_TWO_COLS
-              ? '2xl:p-4 2xl:h-48 2xl:w-full'
-              : '' +
-                'flex p-6  flex-col justify-between h-48 md:h-full w-full md:w-7/12'
+            (POST_TWO_COLS ? '2xl:p-4 2xl:h-48 2xl:w-full' : '') +
+            ' flex p-6  flex-col justify-between h-48 md:h-full w-full md:w-7/12'
           }>
           <header>
             {/* 分类 */}
@@ -82,7 +74,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
               </div>
             )}
 
-            {/* 标题 */}
+            {/* 标题和图标 */}
             <Link
               href={post?.href}
               passHref
@@ -90,7 +82,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 ' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'
               }>
               {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post.pageIcon} />
+                <NotionIcon
+                icon={post.pageIcon}
+                className="heo-icon w-6 h-6 mr-1 align-middle transform translate-y-[-8%]" // 专门为 Heo 主题的图标设置样式
+              />
               )}
               <span className='menu-link '>{post.title}</span>
             </Link>

themes/heo/components/BlogPostListPage.js

@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationNumber from './PaginationNumber'
@@ -14,14 +15,10 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
-  const POST_TWO_COLS = siteConfig(
-    'HEO_HOME_POST_TWO_COLS',
-    null,
-    NOTION_CONFIG
-  )
+  const POST_TWO_COLS = siteConfig('HEO_HOME_POST_TWO_COLS', true, CONFIG)
   if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
@@ -29,7 +26,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
       <div id='container' className='w-full'>
         {/* 文章列表 */}
         <div
-          className={`2xl:grid ${POST_TWO_COLS && '2xl:grid-cols-2'} grid-cols-1 gap-5`}>
+          className={`${POST_TWO_COLS && '2xl:grid 2xl:grid-cols-2'} grid-cols-1 gap-5`}>
           {posts?.map(post => (
             <BlogPostCard
               index={posts.indexOf(post)}

themes/heo/components/BlogPostListScroll.js

@@ -59,11 +59,7 @@ const BlogPostListScroll = ({
   })
 
   const targetRef = useRef(null)
-  const POST_TWO_COLS = siteConfig(
-    'HEO_HOME_POST_TWO_COLS',
-    null,
-    NOTION_CONFIG
-  )
+  const POST_TWO_COLS = siteConfig('HEO_HOME_POST_TWO_COLS', true, CONFIG)
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
   } else {
@@ -71,7 +67,7 @@ const BlogPostListScroll = ({
       <div id='container' ref={targetRef} className='w-full'>
         {/* 文章列表 */}
         <div
-          className={`2xl:grid ${POST_TWO_COLS && '2xl:grid-cols-2'} grid-cols-1 gap-5`}>
+          className={`${POST_TWO_COLS && '2xl:grid 2xl:grid-cols-2'} grid-cols-1 gap-5`}>
           {' '}
           {postsToShow.map(post => (
             <BlogPostCard

themes/heo/components/Catalog.js

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -27,64 +27,74 @@ const Catalog = ({ toc }) => {
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
 
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, 200))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, 200)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1 dark:text-white text-black'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full'>
-        {toc?.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
+  return (
+    <div className='px-3 py-1 dark:text-white text-black'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full'>
+          {toc?.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default Catalog

themes/heo/components/CategoryBar.js

@@ -32,8 +32,8 @@ 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]  
-  ${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`}>
+      className={`wow fadeInUp 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}

themes/heo/components/Footer.js

@@ -1,13 +1,14 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
+import CopyRightDate from '@/components/CopyRightDate'
+import PoweredBy from '@/components/PoweredBy'
 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
-
+/**
+ * 页脚
+ * @returns
+ */
+const Footer = () => {
+  const BEI_AN = siteConfig('BEI_AN')
   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'>
       {/* 颜色过度区 */}
@@ -28,18 +29,12 @@ const Footer = ({ title }) => {
         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>
-          .
+          <PoweredBy />
+          <CopyRightDate />
         </div>
 
         <div id='footer-bottom-right'>
-          {siteConfig('BEI_AN') && (
+          {BEI_AN && (
             <>
               <i className='fas fa-shield-alt' />{' '}
               <a href='https://beian.miit.gov.cn/' className='mr-2'>
@@ -47,6 +42,7 @@ const Footer = ({ title }) => {
               </a>
             </>
           )}
+          <BeiAnGongAn />
 
           <span className='hidden busuanzi_container_site_pv'>
             <i className='fas fa-eye' />

themes/heo/components/Hero.js

@@ -73,12 +73,17 @@ function Banner(props) {
     router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
+  // 遮罩文字
+  const coverTitle = siteConfig('HEO_HERO_COVER_TITLE')
+
   return (
     <div
       id='banners'
       onClick={handleClickBanner}
       className='hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden'>
-      <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
+      <div
+        id='banner-title'
+        className='z-10 flex flex-col absolute top-10 left-10'>
         <div className='text-4xl font-bold mb-3  dark:text-white'>
           {siteConfig('HEO_HERO_TITLE_1', null, CONFIG)}
           <br />
@@ -97,10 +102,10 @@ function Banner(props) {
         id='banner-cover'
         style={{ backdropFilter: 'blur(15px)' }}
         className={
-          'rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'
+          'z-20 rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'
         }>
         <div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
-          <div className='text-7xl text-white font-extrabold'>随便逛逛</div>
+          <div className='text-7xl text-white font-extrabold'>{coverTitle}</div>
           <div className='-ml-3 text-gray-300'>
             <ArrowSmallRight className={'w-24 h-24 stroke-2'} />
           </div>
@@ -115,10 +120,10 @@ function Banner(props) {
  * 英雄区左上角banner条中斜向滚动的图标
  */
 function TagsGroupBar() {
-  const groupIcons = siteConfig('HEO_GROUP_ICONS', null, CONFIG).concat(
-    siteConfig('HEO_GROUP_ICONS', null, CONFIG)
-  )
-
+  let groupIcons = siteConfig('HEO_GROUP_ICONS', null, CONFIG)
+  if (groupIcons) {
+    groupIcons = groupIcons.concat(groupIcons)
+  }
   return (
     <div className='tags-group-all flex -rotate-[30deg] h-full'>
       <div className='tags-group-wrapper flex flex-nowrap absolute top-16'>

themes/heo/components/HexoRecentComments.js

@@ -1,16 +1,15 @@
-import Card from '@/themes/hexo/components/Card'
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { RecentComments } from '@waline/client'
-import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { RecentComments } from '@waline/client'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
  * @param {*} props
  * @returns
  */
-const HexoRecentComments = (props) => {
+const HexoRecentComments = props => {
   const [comments, updateComments] = useState([])
   const { locale } = useGlobal()
   const [onLoading, changeLoading] = useState(true)
@@ -25,22 +24,43 @@ const HexoRecentComments = (props) => {
   }, [])
 
   return (
-        <Card >
-            <div className=" mb-2 px-1 justify-between">
-                <i className="mr-2 fas fas fa-comment" />
-                {locale.COMMON.RECENT_COMMENTS}
+    <section className='card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100'>
+      <div className=' mb-2 px-1 justify-between'>
+        <i className='mr-2 fas fas fa-comment' />
+        {locale.COMMON.RECENT_COMMENTS}
+      </div>
+
+      {onLoading && (
+        <div>
+          Loading...
+          <i className='ml-2 fas fa-spinner animate-spin' />
+        </div>
+      )}
+      {!onLoading && comments && comments.length === 0 && (
+        <div>No Comments</div>
+      )}
+      {!onLoading &&
+        comments &&
+        comments.length > 0 &&
+        comments.map(comment => (
+          <div key={comment.objectId} className='pb-2 pl-1'>
+            <div
+              className='dark:text-gray-200 text-sm waline-recent-content wl-content'
+              dangerouslySetInnerHTML={{ __html: comment.comment }}
+            />
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
+              <Link
+                href={{
+                  pathname: comment.url,
+                  hash: comment.objectId,
+                  query: { target: 'comment' }
+                }}>
+                --{comment.nick}
+              </Link>
             </div>
-
-            {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
-            {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
-            {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
-                <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-                <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
-                    <Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
-                </div>
-            </div>)}
-
-        </Card>
+          </div>
+        ))}
+    </section>
   )
 }
 

themes/heo/components/InfoCard.js

@@ -23,11 +23,12 @@ export function InfoCard(props) {
   const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
   const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
   return (
-    <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
+    <Card className='wow fadeInUp bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
       {/* 信息卡牌第一行 */}
       <div className='flex justify-between'>
         {/* 问候语 */}
         <GreetingsWords />
+        {/* 头像 */}
         <div
           className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
           <LazyImage
@@ -42,9 +43,7 @@ export function InfoCard(props) {
       <h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>
 
       {/* 公告栏 */}
-      <div>
-        <Announcement post={notice} style={{ color: 'white !important' }} />
-      </div>
+      <Announcement post={notice} style={{ color: 'white !important' }} />
 
       <div className='flex justify-between'>
         <div className='flex space-x-3  hover:text-black dark:hover:text-white'>

themes/heo/components/LatestPostsGroupMini.js

@@ -15,12 +15,9 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
   // 获取当前路径
   const currentPath = useRouter().asPath
   const { locale } = useGlobal()
+  const SUB_PATH = siteConfig('SUB_PATH', '')
 
-  if (!latestPosts) {
-    return <></>
-  }
-
-  return (
+  return latestPosts ? (
     <>
       <div className=' mb-2 px-1 flex flex-nowrap justify-between'>
         <div>
@@ -30,7 +27,7 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
       </div>
       {latestPosts.map(post => {
         const selected =
-          currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+          currentPath === `${SUB_PATH}/${post.slug}`
         const headerImage = post?.pageCoverThumbnail
           ? post.pageCoverThumbnail
           : siteInfo?.pageCover
@@ -63,5 +60,5 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
         )
       })}
     </>
-  )
+  ) : null
 }

themes/heo/components/LoadingCover.js

@@ -1,8 +0,0 @@
-export default function LoadingCover () {
-  return (<div id="loading-cover" className={'md:-mt-20 flex-grow dark:text-white text-black animate__animated animate__fadeIn flex flex-col justify-center z-50 w-full h-screen container mx-auto'}>
-  <div className="mx-auto">
-    <i className="fas fa-spinner animate-spin"/>
-  </div>
-</div>
-  )
-}

themes/heo/components/Logo.js

@@ -16,7 +16,7 @@ const Logo = props => {
           className='mr-4 hidden md:block'
         />
         <div id='logo-text' className='group rounded-2xl flex-none relative'>
-          <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
+          <div className='logo group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
             {siteConfig('TITLE')}
           </div>
           <div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 py-1 duration-200'>

themes/heo/components/NotionIcon.js

@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    // 这里优先使用传入的 className
+    return <LazyImage src={icon} className={className} />
+  }
+
+  // 对于 emoji 或 svg，设置默认 className，也可以传递不同的样式
+  return <span className={`inline-block ${className}`}>{icon}</span>
+}
+
+export default NotionIcon

themes/heo/components/PostHeader.js

@@ -31,9 +31,8 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
           height: 100%;
           top: 0;
           left: 0;
-          box-shadow: 110px -130px 500px 100px ${isDarkMode
-              ? '#CA8A04'
-              : '#0060e0'} inset;
+          box-shadow: 110px -130px 500px 100px
+            ${isDarkMode ? '#CA8A04' : '#0060e0'} inset;
         }
       `}</style>
 
@@ -105,7 +104,10 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
           <section className='flex-wrap dark:text-gray-200 text-opacity-70 shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white font-light leading-8'>
             <div className='flex justify-center '>
               <div className='mr-2'>
-                <WordCount />
+                <WordCount
+                  wordCount={post.wordCount}
+                  readTime={post.readTime}
+                />
               </div>
               {post?.type !== 'Page' && (
                 <>

themes/heo/components/SideRight.js

@@ -34,23 +34,25 @@ export default function SideRight(props) {
 
   return (
     <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
-      <InfoCard {...props} className='w-72' />
+      <InfoCard {...props} className='w-72 wow fadeInUp' />
 
       <div className='sticky top-20 space-y-4'>
         {/* 文章页显示目录 */}
         {post && post.toc && post.toc.length > 0 && (
-          <Card className='bg-white dark:bg-[#1e1e1e]'>
+          <Card className='bg-white dark:bg-[#1e1e1e] wow fadeInUp'>
             <Catalog toc={post.toc} />
           </Card>
         )}
 
         {/* 联系交流群 */}
-        <TouchMeCard />
+        <div className='wow fadeInUp'>
+          <TouchMeCard />
+        </div>
 
         {/* 最新文章列表 */}
         <div
           className={
-            'border hover:border-indigo-600  dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
+            'border wow fadeInUp  hover:border-indigo-600  dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
           }>
           <LatestPostsGroupMini {...props} />
         </div>

themes/heo/components/SocialButton.js

@@ -6,73 +6,83 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
-        {siteConfig('CONTACT_GITHUB') && (
+        {CONTACT_GITHUB && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'github'}
-            href={siteConfig('CONTACT_GITHUB')}>
+            href={CONTACT_GITHUB}>
             <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_TWITTER') && (
+        {CONTACT_TWITTER && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'twitter'}
-            href={siteConfig('CONTACT_TWITTER')}>
+            href={CONTACT_TWITTER}>
             <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_TELEGRAM') && (
+        {CONTACT_TELEGRAM && (
           <a
             target='_blank'
             rel='noreferrer'
-            href={siteConfig('CONTACT_TELEGRAM')}
+            href={CONTACT_TELEGRAM}
             title={'telegram'}>
             <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_LINKEDIN') && (
+        {CONTACT_LINKEDIN && (
           <a
             target='_blank'
             rel='noreferrer'
-            href={siteConfig('CONTACT_LINKEDIN')}
+            href={CONTACT_LINKEDIN}
             title={'linkIn'}>
             <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_WEIBO') && (
+        {CONTACT_WEIBO && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'weibo'}
-            href={siteConfig('CONTACT_WEIBO')}>
+            href={CONTACT_WEIBO}>
             <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_INSTAGRAM') && (
+        {CONTACT_INSTAGRAM && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'instagram'}
-            href={siteConfig('CONTACT_INSTAGRAM')}>
+            href={CONTACT_INSTAGRAM}>
             <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_EMAIL') && (
+        {CONTACT_EMAIL && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'email'}
-            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            href={`mailto:${CONTACT_EMAIL}`}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        {JSON.parse(ENABLE_RSS) && (
           <a
             target='_blank'
             rel='noreferrer'
@@ -81,21 +91,21 @@ const SocialButton = () => {
             <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_BILIBILI') && (
+        {CONTACT_BILIBILI && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'bilibili'}
-            href={siteConfig('CONTACT_BILIBILI')}>
+            href={CONTACT_BILIBILI}>
             <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
-        {siteConfig('CONTACT_YOUTUBE') && (
+        {CONTACT_YOUTUBE && (
           <a
             target='_blank'
             rel='noreferrer'
             title={'youtube'}
-            href={siteConfig('CONTACT_YOUTUBE')}>
+            href={CONTACT_YOUTUBE}>
             <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}

themes/heo/components/TouchMeCard.js

@@ -1,8 +1,7 @@
-
 import FlipCard from '@/components/FlipCard'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 交流频道
@@ -13,23 +12,33 @@ export default function TouchMeCard() {
     return <></>
   }
   return (
-        <div className={'relative h-28 text-white flex flex-col'}>
-
-            <FlipCard
-                className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
-                frontContent={
-                    <div className='h-full'>
-                        <h2 className='font-[1000] text-3xl'>{siteConfig('HEO_SOCIAL_CARD_TITLE_1', null, CONFIG)}</h2>
-                        <h3 className='pt-2'>{siteConfig('HEO_SOCIAL_CARD_TITLE_2', null, CONFIG)}</h3>
-                        <div className='absolute left-0 top-0 w-full h-full' style={{ background: 'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat' }}></div>
-                    </div>}
-                backContent={<Link href={siteConfig('HEO_SOCIAL_CARD_URL', null, CONFIG)}>
-                    <div className='font-[1000] text-xl h-full'>
-                        {siteConfig('HEO_SOCIAL_CARD_TITLE_3', null, CONFIG)}
-                    </div>
-                </Link>}
-            />
-
-        </div>
+    <div className={'relative h-28 text-white flex flex-col'}>
+      <FlipCard
+        className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
+        frontContent={
+          <div className='h-full'>
+            <h2 className='font-[1000] text-3xl'>
+              {siteConfig('HEO_SOCIAL_CARD_TITLE_1', null, CONFIG)}
+            </h2>
+            <h3 className='pt-2'>
+              {siteConfig('HEO_SOCIAL_CARD_TITLE_2', null, CONFIG)}
+            </h3>
+            <div
+              className='absolute left-0 top-0 w-full h-full'
+              style={{
+                background:
+                  'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat'
+              }}></div>
+          </div>
+        }
+        backContent={
+          <Link href={siteConfig('HEO_SOCIAL_CARD_URL', null, CONFIG)}>
+            <div className='font-[1000] text-xl h-full'>
+              {siteConfig('HEO_SOCIAL_CARD_TITLE_3', null, CONFIG)}
+            </div>
+          </Link>
+        }
+      />
+    </div>
   )
 }

themes/heo/config.js

@@ -1,5 +1,6 @@
 const CONFIG = {
   HEO_HOME_POST_TWO_COLS: true, // 首页博客两列显示，若为false则只显示一列
+  HEO_LOADING_COVER: true, // 页面加载的遮罩动画
 
   HEO_HOME_BANNER_ENABLE: true,
 
@@ -23,6 +24,8 @@ const CONFIG = {
   HEO_HERO_TITLE_4: '新版上线',
   HEO_HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
   HEO_HERO_TITLE_LINK: 'https://tangly1024.com',
+  // 英雄区遮罩文字
+  HEO_HERO_COVER_TITLE: '随便逛逛',
 
   // 英雄区显示三个置顶分类
   HEO_HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
@@ -119,6 +122,12 @@ const CONFIG = {
   HEO_SOCIAL_CARD_TITLE_3: '点击加入社群',
   HEO_SOCIAL_CARD_URL: 'https://docs.tangly1024.com/article/how-to-question',
 
+  // 底部统计面板文案
+  HEO_POST_COUNT_TITLE: '文章数:',
+  HEO_SITE_TIME_TITLE: '建站天数:',
+  HEO_SITE_VISIT_TITLE: '访问量:',
+  HEO_SITE_VISITOR_TITLE: '访客数:',
+
   // *****  以下配置无效，只是预留开发 ****
   // 菜单配置
   HEO_MENU_INDEX: true, // 显示首页

themes/heo/index.js

@@ -10,6 +10,7 @@ import Comment from '@/components/Comment'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { HashTag } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
+import LoadingCover from '@/components/LoadingCover'
 import replaceSearchResult from '@/components/Mark'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
@@ -41,6 +42,7 @@ import SearchNav from './components/SearchNav'
 import SideRight from './components/SideRight'
 import CONFIG from './config'
 import { Style } from './style'
+import AISummary from '@/components/AISummary'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -82,6 +84,7 @@ const LayoutBase = props => {
     false,
     CONFIG
   )
+  const HEO_LOADING_COVER = siteConfig('HEO_LOADING_COVER', true, CONFIG)
 
   // 加载wow动画
   useEffect(() => {
@@ -120,7 +123,9 @@ const LayoutBase = props => {
       </main>
 
       {/* 页脚 */}
-      <Footer title={siteConfig('TITLE')} />
+      <Footer />
+
+      {HEO_LOADING_COVER && <LoadingCover />}
     </div>
   )
 }
@@ -190,7 +195,7 @@ const LayoutSearch = props => {
     }
   }, [])
   return (
-    <div {...props} currentSearch={currentSearch}>
+    <div currentSearch={currentSearch}>
       <div id='post-outer-wrapper' className='px-5  md:px-0'>
         {!currentSearch ? (
           <SearchNav {...props} />
@@ -263,13 +268,16 @@ const LayoutSlug = props => {
     siteConfig('COMMENT_WEBMENTION_ENABLE')
 
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -277,25 +285,29 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
   return (
     <>
       <div
-        className={`article h-full w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600`}>
+        className={`article h-full w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''}  bg-white dark:bg-[#18171d] dark:border-gray-600 lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 `}>
         {/* 文章锁 */}
         {lock && <PostLock validPassword={validPassword} />}
 
-        {!lock && (
-          <div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
+        {!lock && post && (
+          <div className='mx-auto md:w-full md:px-5'>
             {/* 文章主体 */}
-            <article itemScope itemType='https://schema.org/Movie'>
+            <article
+              id='article-wrapper'
+              itemScope
+              itemType='https://schema.org/Movie'>
               {/* Notion文章主体 */}
               <section
                 className='wow fadeInUp p-5 justify-center mx-auto'
                 data-wow-delay='.2s'>
+                <AISummary aiSummary={post.aiSummary}/>
                 <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
                 <WWAds orientation='horizontal' className='w-full' />

themes/heo/style.js

@@ -9,7 +9,6 @@ const Style = () => {
     <style jsx global>{`
       body {
         background-color: #f7f9fe;
-        overflow-x: hidden;
       }
 
       // 公告栏中的字体固定白色
@@ -67,3 +66,4 @@ const Style = () => {
 }
 
 export { Style }
+

themes/hexo/components/BlogPostCard.js

@@ -27,7 +27,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
         key={post.id}
         data-aos='fade-up'
         data-aos-easing='ease-in-out'
-        data-aos-duration='800'
+        data-aos-duration='500'
         data-aos-once='false'
         data-aos-anchor-placement='top-bottom'
         id='blog-post-card'

themes/hexo/components/Catalog.js

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Progress from './Progress'
-import { useGlobal } from '@/lib/global'
 
 /**
  * 目录导航组件
@@ -29,67 +29,77 @@ const Catalog = ({ toc }) => {
   const [activeSection, setActiveSection] = useState(null)
 
   const throttleMs = 200
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='w-full py-3'>
-      <Progress />
+  return (
+    <div className='px-3 py-1'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div className='w-full py-3'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`${activeSection === id && 'dark:border-white border-indigo-800 text-indigo-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-indigo-800 border-lduration-300 transform dark:text-indigo-400 dark:border-indigo-400
+        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? ' font-bold text-indigo-800 dark:text-white underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
-    </div>
-  </div>
+  )
 }
 
 export default Catalog

themes/hexo/components/Footer.js

@@ -1,28 +1,43 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
+import BeiAnSite from '@/components/BeiAnSite'
+import PoweredBy from '@/components/PoweredBy'
 import { siteConfig } from '@/lib/config'
 
 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 z-10 dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm p-6'
-    >
+    <footer className='relative z-10 dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm p-6'>
       {/* <DarkModeButton/> */}
-
-      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br/>
-
-      {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
-
-      <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>
-        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</p></span><br/>
-
+      <i className='fas fa-copyright' /> {`${copyrightDate}`}
+      <span>
+        <i className='mx-1 animate-pulse fas fa-heart' />
+        <a
+          href={siteConfig('LINK')}
+          className='underline font-bold  dark:text-gray-300 '>
+          {siteConfig('AUTHOR')}
+        </a>
+        .<br />
+        <BeiAnSite />
+        <BeiAnGongAn />
+        <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>
+        <PoweredBy className='justify-center' />
+      </span>
+      <br />
     </footer>
   )
 }

themes/hexo/index.js

@@ -263,13 +263,14 @@ const LayoutArchive = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector('#article-wrapper #notion-article')
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -277,7 +278,7 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
@@ -286,11 +287,10 @@ const LayoutSlug = props => {
       <div className='w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article'>
         {lock && <ArticleLock validPassword={validPassword} />}
 
-        {!lock && (
-          <div
-            id='article-wrapper'
-            className='overflow-x-auto flex-grow mx-auto md:w-full md:px-5 '>
+        {!lock && post && (
+          <div className='overflow-x-auto flex-grow mx-auto md:w-full md:px-5 '>
             <article
+              id='article-wrapper'
               itemScope
               itemType='https://schema.org/Movie'
               className='subpixel-antialiased overflow-y-hidden'>
@@ -334,7 +334,7 @@ const Layout404 = props => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
       if (isBrowser) {
-        const article = document.getElementById('notion-article')
+        const article = document.querySelector('#article-wrapper #notion-article')
         if (!article) {
           router.push('/').then(() => {
             // console.log('找不到页面', router.asPath)

themes/landing/index.js

@@ -1,4 +1,3 @@
-
 'use client'
 
 /**
@@ -7,21 +6,21 @@
  * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
  * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
  */
+import Loading from '@/components/Loading'
 import NotionPage from '@/components/NotionPage'
-import Header from './components/Header'
-import Footer from './components/Footer'
-import Hero from './components/Hero'
+import { siteConfig } from '@/lib/config'
+import { isBrowser } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import Features from './components/Features'
 import FeaturesBlocks from './components/FeaturesBlocks'
-import Testimonials from './components/Testimonials'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import Hero from './components/Hero'
 import Newsletter from './components/Newsletter'
-import { useRouter } from 'next/router'
-import CONFIG from './config'
-import Loading from '@/components/Loading'
-import { isBrowser } from '@/lib/utils'
-import { siteConfig } from '@/lib/config'
 import { Pricing } from './components/Pricing'
-import { useEffect } from 'react'
+import Testimonials from './components/Testimonials'
+import CONFIG from './config'
 
 /**
  * 布局框架
@@ -30,22 +29,23 @@ import { useEffect } from 'react'
  * @param {*} props
  * @returns
  */
-const LayoutBase = (props) => {
+const LayoutBase = props => {
   const { children } = props
 
-  return <div id='theme-landing' className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>
+  return (
+    <div
+      id='theme-landing'
+      className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>
+      {/* 顶部导航栏 */}
+      <Header />
 
-        {/* 顶部导航栏 */}
-        <Header />
+      {/* 内容 */}
+      <div id='content-wrapper'>{children}</div>
 
-        {/* 内容 */}
-        <div id='content-wrapper'>
-            {children}
-        </div>
-
-        {/* 底部页脚 */}
-        <Footer />
+      {/* 底部页脚 */}
+      <Footer />
     </div>
+  )
 }
 
 /**
@@ -53,16 +53,16 @@ const LayoutBase = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutIndex = (props) => {
+const LayoutIndex = props => {
   return (
-        <>
-            <Hero />
-            <Features />
-            <FeaturesBlocks />
-            <Testimonials />
-            <Pricing/>
-            <Newsletter />
-        </>
+    <>
+      <Hero />
+      <Features />
+      <FeaturesBlocks />
+      <Testimonials />
+      <Pricing />
+      <Newsletter />
+    </>
   )
 }
 
@@ -71,57 +71,99 @@ const LayoutIndex = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutSlug = (props) => {
+const LayoutSlug = props => {
   const { post } = props
 
   // 如果 是 /article/[slug] 的文章路径则进行重定向到另一个域名
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.querySelector('#article-wrapper #notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        waiting404
+      )
     }
   }, [post])
 
-  if (JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) && isBrowser && router.route === '/[prefix]/[slug]') {
-    const redirectUrl = siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) + router.asPath.replace('?theme=landing', '')
+  if (
+    JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) &&
+    isBrowser &&
+    router.route === '/[prefix]/[slug]'
+  ) {
+    const redirectUrl =
+      siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) +
+      router.asPath.replace('?theme=landing', '')
     router.push(redirectUrl)
-    return <div id='theme-landing'><Loading /></div>
+    return (
+      <div id='theme-landing'>
+        <Loading />
+      </div>
+    )
   }
 
-  return <>
-        <div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
-            <NotionPage {...props} />
+  return (
+    <>
+      <div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
+        <div id='article-wrapper'>
+          <NotionPage {...props} />
         </div>
+      </div>
     </>
+  )
 }
 
 // 其他布局暂时留空
-const LayoutSearch = (props) => <><Hero /></>
-const LayoutArchive = (props) => <><Hero /></>
-const Layout404 = (props) => <><Hero /></>
-const LayoutCategoryIndex = (props) => <><Hero /></>
-const LayoutPostList = (props) => <><Hero /></>
-const LayoutTagIndex = (props) => <><Hero /></>
+const LayoutSearch = props => (
+  <>
+    <Hero />
+  </>
+)
+const LayoutArchive = props => (
+  <>
+    <Hero />
+  </>
+)
+const Layout404 = props => (
+  <>
+    <Hero />
+  </>
+)
+const LayoutCategoryIndex = props => (
+  <>
+    <Hero />
+  </>
+)
+const LayoutPostList = props => (
+  <>
+    <Hero />
+  </>
+)
+const LayoutTagIndex = props => (
+  <>
+    <Hero />
+  </>
+)
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }

themes/magzine/components/Announcement.js

@@ -0,0 +1,30 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+/**
+ * Magzine主题的公告
+ */
+const Announcement = ({ post, className }) => {
+  //   const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return (
+      <div className={className}>
+        <section
+          id='announcement-wrapper'
+          className='rounded-xl px-2'>
+          {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+          {post && (
+            <div id='announcement-content'>
+              <NotionPage post={post}/>
+            </div>
+          )}
+        </section>
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/magzine/components/ArticleInfo.js

@@ -0,0 +1,55 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 文章详情页介绍
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo(props) {
+  const { post } = props
+
+  return (
+    <>
+      <div className='flex flex-col gap-y-4 py-4 px-2 lg:px-0'>
+        <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 text-gray-400'
+            }>
+            {siteConfig('MAGZINE_POST_LIST_TAG') &&
+              post?.tagItems?.map(tag => (
+                <TagItemMini key={tag.name} tag={tag} />
+              ))}
+          </div>
+        </div>
+
+        {/* title */}
+        <h2 className='text-4xl text-center dark:text-gray-300'>
+          {siteConfig('POST_TITLE_ICON') && (
+            <NotionIcon icon={post?.pageIcon} />
+          )}
+          {post?.title}
+        </h2>
+
+        <div className='text-xl text-center'>{post?.summary}</div>
+      </div>
+
+      {post?.type && !post?.type !== 'Page' && post?.pageCover && (
+        <div className='w-full relative md:flex-shrink-0 overflow-hidden'>
+          <LazyImage
+            alt={post?.title}
+            src={post?.pageCover}
+            className='object-cover max-h-[60vh] w-full'
+          />
+        </div>
+      )}
+    </>
+  )
+}

themes/magzine/components/ArticleLock.js

@@ -0,0 +1,61 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300  leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-gray-500 hover:bg-gray-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
+        </div>
+        <div id='tips'></div>
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerFullWidth.js

@@ -0,0 +1,30 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import BannerItem from './BannerItem'
+
+/**
+ * 全宽
+ * @param {*} props
+ * @returns
+ */
+export default function BannerFullWidth() {
+  const { siteInfo } = useGlobal()
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE')
+  if (!banner) {
+    return null
+  }
+  return (
+    <div className='w-full flex lg:flex-row flex-col justify-between lg:h-96 bg-black'>
+      <LazyImage
+        alt={siteInfo?.title}
+        src={siteInfo?.pageCover}
+        className={`banner-cover w-full lg:h-96 object-cover object-center `}
+      />
+
+      <div className='w-full flex items-center justify-center'>
+        <BannerItem />
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerItem.js

@@ -0,0 +1,37 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * 文字广告Banner
+ * @param {*} props
+ * @returns
+ */
+export default function BannerItem() {
+  // 首屏信息栏按钮文字
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE', null, CONFIG)
+  const button = siteConfig('MAGZINE_HOME_BUTTON', null, CONFIG)
+  const text = siteConfig('MAGZINE_HOME_BUTTON_TEXT', null, CONFIG)
+  const url = siteConfig('MAGZINE_HOME_BUTTON_URL', null, CONFIG)
+  const title = siteConfig('MAGZINE_HOME_TITLE', null, CONFIG)
+  const description = siteConfig('MAGZINE_HOME_DESCRIPTION', null, CONFIG)
+  const tips = siteConfig('MAGZINE_HOME_TIPS', null, CONFIG)
+
+  if (!banner) {
+    return null
+  }
+
+  return (
+    <div className='flex flex-col p-5 gap-y-5 dark items-center justify-between w-full bg-black text-white'>
+      {/* 首屏导航按钮 */}
+      <h2 className='text-2xl font-semibold'>{title}</h2>
+      <h3 className='text-sm'>{description}</h3>
+      {button && (
+        <div className='mt-2 text-center px-6 py-3 font-semibold rounded-3xl text-black bg-[#7BE986] hover:bg-[#62BA6B]'>
+          <Link href={url}>{text}</Link>
+        </div>
+      )}
+      <span className='text-xs'>{tips}</span>
+    </div>
+  )
+}

themes/magzine/components/CTA.js

@@ -0,0 +1,20 @@
+import Announcement from './Announcement'
+
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
+export default function CTA({ notice }) {
+  return (
+    <>
+      {/* 底部 */}
+      <Announcement
+        post={notice}
+        className={
+          'cta text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
+        }
+      />
+    </>
+  )
+}

themes/magzine/components/Card.js

@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card

themes/magzine/components/Catalog.js

@@ -0,0 +1,100 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useEffect, useRef, useState } from 'react'
+import Progress from './Progress'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ post, toc, className }) => {
+  const tocIds = []
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 监听滚动事件
+  useEffect(() => {
+    if (toc && toc.length > 1) {
+      actionSectionScrollSpy()
+      window.addEventListener('scroll', actionSectionScrollSpy)
+    }
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    for (let i = 0; i < sections.length; ++i) {
+      const section = sections[i]
+      if (!section || !(section instanceof Element)) continue
+      if (!currentSectionId) {
+        currentSectionId = section.getAttribute('data-id')
+      }
+      const bbox = section.getBoundingClientRect()
+      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+      const offset = Math.max(150, prevHeight / 4)
+      // GetBoundingClientRect returns values relative to viewport
+      if (bbox.top - offset < 0) {
+        currentSectionId = section.getAttribute('data-id')
+        prevBBox = bbox
+        continue
+      }
+      // No need to continue loop, if last element has been detected
+      break
+    }
+    setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+  }, throttleMs)
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className={className}>
+      <div className='w-full mt-2 mb-4'>
+        {/* 阅读进度条 */}
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto scroll-hidden lg:max-h-96 max-h-44'
+        ref={tRef}>
+        <nav className='h-full text-black'>
+          {toc?.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? ' font-bold text-black dark:text-white underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog

themes/magzine/components/CatalogFloat.js

@@ -0,0 +1,56 @@
+import { useMagzineGlobal } from '..'
+import Catalog from './Catalog'
+import CatalogFloatButton from './CatalogFloatButton'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogFloat = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useMagzineGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return (
+    <div className='lg:hidden'>
+      <div
+        onClick={() => {
+          changeTocVisible(true)
+        }}
+        className='fixed right-0 bottom-24 z-20 shadow bg-white dark:bg-hexo-black-gray'>
+        {!tocVisible && <CatalogFloatButton />}
+      </div>
+      <div id='magzine-toc-float' className='fixed top-0 right-0 z-40'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'
+          }>
+          {post && (
+            <>
+              <div className='dark:text-gray-400 text-gray-600 h-56 px-2'>
+                <Catalog toc={post.toc} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </div>
+  )
+}
+export default CatalogFloat

themes/magzine/components/CatalogFloatButton.js

@@ -0,0 +1,28 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 移动端点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogFloatButton = props => {
+  const { locale } = useGlobal()
+  // 用此配置可以关闭
+  if (!siteConfig('Magzine_WIDGET_TOC', true, CONFIG)) {
+    return <></>
+  }
+  return (
+    <div
+      onClick={props.onClick}
+      className='py-5 px-5 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center'
+      title={locale.POST.TOP}>
+      <i className='fas fa-list-ol' />
+    </div>
+  )
+}
+
+export default CatalogFloatButton

themes/magzine/components/CategoryGroup.js

@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+/**
+ * 分类
+ * @param {*} param0
+ * @returns
+ */
+const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  const { locale } = useGlobal()
+  if (!categoryOptions) {
+    return <></>
+  }
+  return (
+    <div id='category-list' className='pt-4'>
+      <div className='text-xl font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
+      <div className=''>
+        {categoryOptions?.map((category, index) => {
+          const selected = currentCategory === category.name
+          return (
+            <Link
+              key={index}
+              href={`/category/${category.name}`}
+              passHref
+              className={
+                (selected
+                  ? 'bg-gray-600 text-white '
+                  : 'dark:text-gray-400 text-gray-900 ') +
+                'text-lg hover:underline flex text-md items-center duration-300 cursor-pointer py-1 whitespace-nowrap'
+              }>
+              <span>
+                {category.name} {category?.count && `(${category?.count})`}
+              </span>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default CategoryGroup

themes/magzine/components/CategoryItem.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function CategoryItem({ selected, category, categoryCount }) {
+  return (
+    <Link
+      href={`/category/${category}`}
+      passHref
+      className={
+        (selected
+          ? 'bg-gray-600 text-white '
+          : 'dark:text-gray-400 text-gray-900 ') +
+        'text-sm font-semibold hover:underline flex text-md items-center duration-300 cursor-pointer py-1 whitespace-nowrap'
+      }>
+      <div>
+        {category} {categoryCount && `(${categoryCount})`}
+      </div>
+    </Link>
+  )
+}

themes/magzine/components/Footer.js

@@ -0,0 +1,99 @@
+import AnalyticsBusuanzi from '@/components/AnalyticsBusuanzi'
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
+import BeiAnSite from '@/components/BeiAnSite'
+import CopyRightDate from '@/components/CopyRightDate'
+import DarkModeButton from '@/components/DarkModeButton'
+import LazyImage from '@/components/LazyImage'
+import PoweredBy from '@/components/PoweredBy'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CONFIG from '../config'
+import SocialButton from './SocialButton'
+
+/**
+ * 网页底脚
+ */
+const Footer = ({ title }) => {
+  const { siteInfo } = useGlobal()
+  const MAGZINE_FOOTER_LINKS = siteConfig('MAGZINE_FOOTER_LINKS', [], CONFIG)
+
+  return (
+    <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'>
+          <div className='gap-x-2 py-6 flex items-center'>
+            {/* 站长信息 */}
+            <LazyImage
+              src={siteInfo?.icon}
+              className='rounded-full'
+              width={40}
+              alt={siteConfig('AUTHOR')}
+            />
+            <div>
+              <h1 className='text-lg'>{title}</h1>
+              <i className='fas fa-copyright' />
+              <a
+                href={siteConfig('LINK')}
+                className='underline font-bold justify-start  '>
+                {siteConfig('AUTHOR')}
+              </a>
+            </div>
+          </div>
+
+          {/* 右侧链接区块 */}
+          <div className='grid grid-cols-2 lg:grid-cols-4 lg:gap-16 gap-8'>
+            {MAGZINE_FOOTER_LINKS?.map((group, index) => {
+              return (
+                <div key={index}>
+                  <div className='font-bold text-xl text-white lg:pb-8 pb-4'>
+                    {group.name}
+                  </div>
+                  <div className='flex flex-col gap-y-2'>
+                    {group?.menus?.map((menu, index) => {
+                      return (
+                        <div key={index}>
+                          <Link href={menu.href} className='hover:underline'>
+                            {menu.title}
+                          </Link>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* 页脚 */}
+        <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 flex-wrap justify-between items-center'>
+            <CopyRightDate />
+            <PoweredBy />
+          </div>
+
+          <DarkModeButton className='text-white' />
+
+          <div className='flex justify-between items-center gap-x-2'>
+            <div className='flex items-center gap-x-4'>
+              <AnalyticsBusuanzi />
+              <SocialButton />
+            </div>
+          </div>
+        </div>
+
+        {/* 备案 */}
+        <div className='w-full text-center flex flex-wrap items-center justify-center gap-x-2'>
+          <BeiAnSite />
+          <BeiAnGongAn />
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

themes/magzine/components/Header.js

@@ -0,0 +1,230 @@
+import Collapse from '@/components/Collapse'
+import DarkModeButton from '@/components/DarkModeButton'
+import DashboardButton from '@/components/ui/dashboard/DashboardButton'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import { useMagzineGlobal } from '..'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function Header(props) {
+  const { customNav, customMenu } = props
+  const [isOpen, setOpen] = useState(false)
+  const collapseRef = useRef(null)
+  const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const { searchModal } = useMagzineGlobal()
+
+  const defaultLinks = [
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: CONFIG.MENU_TAG
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: CONFIG.MENU_SEARCH
+    }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    setOpen(!isOpen)
+  }
+
+  // 向下滚动时，调整导航条高度
+  useEffect(() => {
+    scrollTrigger()
+    setOpen(false)
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [router])
+
+  const throttleMs = 150
+
+  const scrollTrigger = throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS === lastScrollY.current) return // 如果滚动位置没有变化，则不做任何操作
+
+    const nav = document.querySelector('#top-navbar')
+    const narrowNav = scrollS > 60
+    if (narrowNav) {
+      nav && nav.classList.replace('h-20', 'h-14')
+    } else {
+      nav && nav.classList.replace('h-14', 'h-20')
+    }
+
+    lastScrollY.current = scrollS // 更新上一次的滚动位置
+  }, throttleMs)
+
+  const [showSearchInput, changeShowSearchInput] = useState(false)
+
+  // 展示搜索框
+  const toggleShowSearchInput = () => {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      changeShowSearchInput(!showSearchInput)
+    }
+  }
+
+  const onKeyUp = e => {
+    if (e.keyCode === 13) {
+      const search = document.getElementById('simple-search').value
+      if (search) {
+        router.push({ pathname: '/search/' + search })
+      }
+    }
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+  return (
+    <div
+      id='top-navbar-wrapper'
+      className={
+        'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '
+      }>
+      {/* 导航栏菜单内容 */}
+      <div
+        id='top-navbar'
+        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-3xl h-20 transition-all duration-200 items-center justify-between'>
+        {/* 搜索栏 */}
+        {showSearchInput && (
+          <input
+            autoFocus
+            id='simple-search'
+            onKeyUp={onKeyUp}
+            className='outline-none dark:bg-hexo-black-gray dark:text flex flex-row text-base relative w-full border-b py-2'
+            aria-label='Submit search'
+            type='search'
+            name='s'
+            autoComplete='off'
+            placeholder='Type then hit enter to search...'
+          />
+        )}
+
+        {/* 默认菜单 */}
+        {!showSearchInput && (
+          <>
+            {/* 左侧图标Logo */}
+            <div className='flex gap-x-2 lg:gap-x-4 h-full'>
+              <LogoBar className={'text-sm md:text-md lg:text-lg'} />
+              {/* 桌面端顶部菜单 */}
+              <ul className='hidden md:flex items-center gap-x-4 py-1 text-sm md:text-md'>
+                {links &&
+                  links?.map((link, index) => (
+                    <MenuItemDrop key={index} link={link} />
+                  ))}
+              </ul>
+            </div>
+          </>
+        )}
+
+        {/* 右侧按钮 */}
+        <div className='flex items-center gap-x-2 pr-2'>
+          {/* 搜索按钮 */}
+          <div
+            onClick={toggleShowSearchInput}
+            className='flex text-center items-center cursor-pointer p-2.5 hover:bg-black hover:bg-opacity-10 rounded-full'>
+            <i
+              className={
+                showSearchInput
+                  ? 'fa-regular fa-circle-xmark'
+                  : 'fa-solid fa-magnifying-glass' +
+                    ' align-middle hover:scale-110 transform duration-200'
+              }></i>
+          </div>
+
+          {/* 深色模式切换 */}
+          <div className='p-2.5 hover:bg-black hover:bg-opacity-10 rounded-full'>
+            <DarkModeButton />
+          </div>
+
+          {/* 移动端显示开关 */}
+          <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
+            <div onClick={toggleMenuOpen} className='cursor-pointer p-2'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+
+          {/* 登录相关 */}
+          {enableClerk && (
+            <>
+              <SignedOut>
+                <SignInButton mode='modal'>
+                  <button className='bg-gray-800 hover:bg-gray-900 text-white rounded-lg px-3 py-2'>
+                    {locale.COMMON.SIGN_IN}
+                  </button>
+                </SignInButton>
+              </SignedOut>
+              <SignedIn>
+                <UserButton />
+                <DashboardButton />
+              </SignedIn>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2'>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
+        </div>
+      </Collapse>
+    </div>
+  )
+}

themes/magzine/components/Hero.js

@@ -0,0 +1,40 @@
+// import { useGlobal } from '@/lib/global'
+import BannerItem from './BannerItem'
+import PostItemCardTop from './PostItemCardTop'
+import PostItemCardWide from './PostItemCardWide'
+
+/**
+ * 首页主宣传
+ * @param {*} param0
+ * @returns
+ */
+const Hero = ({ posts }) => {
+  // 获取置顶文章与次要文章
+  const postTop = posts[0]
+  const post1 = posts[1]
+  const post2 = posts[2]
+  return (
+    <>
+      <div className='w-full mx-auto max-w-screen-3xl xl:flex justify-between gap-10'>
+        {/* 左侧一篇主要置顶文章 */}
+        <div className='basis-1/2 mb-6 px-2 lg:px-5'>
+          <PostItemCardTop post={postTop} />
+        </div>
+        {/* 右侧 */}
+        <div className='basis-1/2 flex flex-col gap-y-4'>
+          {/* 首屏宣传小Banner */}
+          <BannerItem />
+
+          {/* 两篇次要文章 */}
+          <div className='py-4 px-2 lg:px-0 flex flex-col gap-y-6'>
+            <hr />
+            <PostItemCardWide post={post1} />
+            <hr />
+            <PostItemCardWide post={post2} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Hero

themes/magzine/components/InfoCard.js

@@ -0,0 +1,40 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 用户信息卡
+ * @param {*} props
+ * @returns
+ */
+const InfoCard = props => {
+  const { siteInfo } = useGlobal()
+  const router = useRouter()
+
+  return (
+    <div id='info-card'>
+      <div className='items-center justify-start'>
+        <div
+          className='hover:scale-105 transform duration-200 cursor-pointer flex justify-start'
+          onClick={() => {
+            router.push('/about')
+          }}>
+          <LazyImage
+            src={siteInfo?.icon}
+            width={120}
+            alt={siteConfig('AUTHOR')}
+          />
+        </div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-start '>
+          {siteConfig('AUTHOR')}
+        </div>
+        <div className='text-gray-100 mb-2 hover:scale-105 transform duration-200 flex justify-start'>
+          {siteConfig('BIO')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default InfoCard

themes/magzine/components/JumpToTopButton.js

@@ -0,0 +1,33 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  if (!siteConfig('MAGZINE_WIDGET_TO_TOP')) {
+    return <></>
+  }
+  return (
+    <div
+      id='jump-to-top'
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-center'
+      className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
+      <i
+        className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
+  )
+}
+
+export default JumpToTopButton

themes/magzine/components/LeftMenuBar.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export default function LeftMenuBar () {
+  return (
+    <div className='w-20  border-r hidden lg:block pt-12'>
+      <section>
+        <Link href='/' legacyBehavior>
+          <div className='text-center cursor-pointer  hover:text-black'>
+            <i className='fas fa-home text-gray-500'/>
+          </div>
+        </Link>
+      </section>
+    </div>
+  );
+}

themes/magzine/components/LogoBar.js

@@ -0,0 +1,23 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+export default function LogoBar({ className }) {
+  return (
+    <div
+      id='top-wrapper'
+      className={`w-full flex items-center ${className || ''}`}>
+      <Link
+        href='/'
+        className='logo flex font-semibold hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
+        {/* <LazyImage
+          src={siteInfo?.icon}
+          width={24}
+          height={20}
+          alt={siteConfig('AUTHOR')}
+          className='mr-2 hidden md:block rounded-full'
+        /> */}
+        {siteConfig('TITLE')}
+      </Link>
+    </div>
+  )
+}

themes/magzine/components/MenuBarMobile.js

@@ -0,0 +1,57 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { MenuItemCollapse } from './MenuItemCollapse'
+/**
+ * 移动端菜单
+ * @param {*} props
+ * @returns
+ */
+export const MenuBarMobile = props => {
+  const { customMenu, customNav } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MAGZINE_MENU_CATEGORY')
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MAGZINE_MENU_TAG')
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MAGZINE_MENU_ARCHIVE')
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', ) }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className=' text-md'>
+      {links?.map((link, index) => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={index}
+          link={link}
+        />
+      ))}
+    </nav>
+  )
+}

themes/magzine/components/MenuItemCollapse.js

@@ -0,0 +1,102 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = props => {
+  const { link } = props
+  const [show, setShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, setOpen] = useState(false)
+
+  const router = useRouter()
+
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  const toggleShow = () => {
+    setShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    setOpen(!isOpen)
+  }
+
+  // 路由切换时菜单收起
+  useEffect(() => {
+    setOpen(false)
+  }, [router])
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return (
+    <>
+      <div
+        className={
+          (selected
+            ? 'bg-gray-600 text-white hover:text-white'
+            : 'hover:text-gray-600') +
+          ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.href}
+            target={link?.target}
+            className='py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
+
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <div
+                key={sLink.id}
+                className='
+              not:last-child:border-b-0 border-b dark:border-gray-800 py-2 pl-12 cursor-pointer hover:bg-gray-100 dark:text-gray-200
+              dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
+                <Link href={sLink.href} target={link?.target}>
+                  <div>
+                    <div
+                      className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
+    </>
+  )
+}

themes/magzine/components/MenuItemDrop.js

@@ -0,0 +1,74 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  //   const show = true
+  //   const changeShow = () => {}
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+  const hasSubMenu = link?.subMenus?.length > 0
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  return (
+    <li
+      className='cursor-pointer list-none items-center h-full'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap duration-300 justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            (selected
+              ? 'bg-gray-600 text-white hover:text-white'
+              : 'hover:text-gray-600')
+          }>
+          <div className='items-center flex'>
+            {link?.icon && <i className={`${link?.icon} pr-2`} />} {link?.name}
+            <i
+              className={`px-1 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+          </div>
+        </div>
+      )}
+
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-3 gap-x-1 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            (selected
+              ? 'bg-gray-600 text-white hover:text-white'
+              : 'hover:text-gray-600')
+          }>
+          <Link href={link?.href} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
+
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} p-1 absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg`}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <li
+                key={sLink.id}
+                className='py-3 pr-6 hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-gray-200 tracking-widest transition-color duration-200 dark:border-gray-800 '>
+                <Link href={sLink.href} target={link?.target}>
+                  <span className='text-sm ml-2'>
+                    {link?.icon && <i className={`${sLink?.icon} pr-2`}> </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </li>
+  )
+}

themes/magzine/components/MenuItemMobileNormal.js

@@ -0,0 +1,29 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const NormalMenu = props => {
+  const { link } = props
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  return (
+    <Link
+      key={`${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+        (selected ? 'text-black' : ' ')
+      }>
+      <div className='my-auto items-center justify-center flex '>
+        <div className={'hover:text-black'}>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
+}

themes/magzine/components/MenuItemPCNormal.js

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemPCNormal = props => {
+  const { link } = props
+  const router = useRouter()
+  const selected = router.pathname === link.href || router.asPath === link.href
+  if (!link || !link.show) {
+    return null
+  }
+
+  return (
+    <Link
+      key={`${link.id}-${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-gray-600 text-white hover:text-white'
+          : 'hover:text-gray-600')
+      }>
+      <div className='items-center justify-center flex '>
+        <i className={link.icon} />
+        <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
+}

themes/magzine/components/PaginationSimple.js

@@ -0,0 +1,55 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param totalPage 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, totalPage }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  const showNext = currentPage < totalPage
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+
+  return (
+    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='prev'
+        className={`${
+          currentPage === 1 ? 'invisible' : 'block'
+        } text-center w-full duration-200 px-4 py-2 hover:border-gray-500 border-b-2 hover:font-bold`}>
+        ←{locale.PAGINATION.PREV}
+      </Link>
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='next'
+        className={`${
+          +showNext ? 'block' : 'invisible'
+        } text-center w-full duration-200 px-4 py-2 hover:border-gray-500 border-b-2 hover:font-bold`}>
+        {locale.PAGINATION.NEXT}→
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple

themes/magzine/components/PostBannerGroupByCategory.js

@@ -0,0 +1,87 @@
+import { siteConfig } from '@/lib/config'
+import PostListHorizontal from './PostListHorizontal'
+
+/**
+ * 按文章类别分组的文章列表区块
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostBannerGroupByCategory = props => {
+  const { posts, categoryOptions, allNavPages } = props
+  if (!posts || posts.length === 0) {
+    return null
+  }
+
+  // 按分类将文章分组成文件夹
+  const categoryFolders = groupArticles(categoryOptions, allNavPages.slice(8))
+
+  return (
+    <>
+      {/* 不同的分类文章列表 */}
+      {categoryFolders?.map((categoryGroup, index) => {
+        if (
+          !categoryGroup ||
+          !categoryGroup.items ||
+          categoryGroup.items.length < 1
+        ) {
+          return null
+        }
+
+        return (
+          <PostListHorizontal
+            key={index}
+            hasBg={index % 2 === 1}
+            title={categoryGroup?.category}
+            href={`/category/${categoryGroup?.category}`}
+            posts={categoryGroup?.items}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+// 按照分类将文章分组成文件夹
+function groupArticles(categoryOptions, allPosts) {
+  if (!allPosts) {
+    return []
+  }
+  const groups = []
+
+  for (let i = 0; i < allPosts.length; i++) {
+    const item = allPosts[i]
+    const categoryName = item?.category ? item?.category : '' // 将 category 转换为字符串
+
+    const existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+
+    if (existingGroup && existingGroup.category === categoryName) {
+      // 如果分组已存在，并且该分组中的文章数量小于4，添加文章
+      if (existingGroup.items.length < 4) {
+        existingGroup.items.push(item)
+      }
+    } else {
+      // 新建分组，并添加当前文章
+      groups.push({ category: categoryName, items: [item] })
+    }
+  }
+  const hiddenCategory = siteConfig('MAGZINE_HOME_HIDDEN_CATEGORY')
+  // 按照 categoryOptions 的顺序排序 groups
+  const sortedGroups = []
+  for (let i = 0; i < categoryOptions.length; i++) {
+    const option = categoryOptions[i]
+    const matchingGroup = groups.find(group => group.category === option.name)
+
+    if (matchingGroup) {
+      if (
+        hiddenCategory &&
+        hiddenCategory.indexOf(matchingGroup.category) >= 0
+      ) {
+        continue
+      }
+      sortedGroups.push(matchingGroup)
+    }
+  }
+  return sortedGroups
+}
+
+export default PostBannerGroupByCategory

themes/magzine/components/PostGroupArchive.js

@@ -0,0 +1,34 @@
+import PostItemCard from './PostItemCard'
+
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostGroupArchive = ({ posts = [], archiveTitle }) => {
+  if (!posts || posts.length === 0) {
+    return <></>
+  }
+
+  return (
+    <div className='px-2 lg:px-0'>
+      {/* 分组标题 */}
+      <div
+        className='pb-4 text-2xl font-bold dark:text-gray-300'
+        id={archiveTitle}>
+        {archiveTitle}
+      </div>
+
+      {/* 列表 */}
+      <div className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
+        {posts?.map((p, index) => {
+          return <PostItemCard key={index} post={p} />
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default PostGroupArchive

themes/magzine/components/PostGroupLatest.js

@@ -0,0 +1,72 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const PostGroupLatest = props => {
+  const { latestPosts, vertical } = props
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale, siteInfo } = useGlobal()
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return (
+    <>
+      {/* 标题 */}
+      <div className='mb-2 px-1 flex flex-nowrap justify-between'>
+        <div className='font-bold text-lg'>{locale.COMMON.LATEST_POSTS}</div>
+      </div>
+
+      {/* 文章列表 */}
+      <div className={`grid grid-cols-1 ${!vertical ? 'lg:grid-cols-4' : ''}`}>
+        {latestPosts.map(post => {
+          const selected =
+            currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail
+            ? post.pageCoverThumbnail
+            : siteInfo?.pageCover
+
+          return (
+            <Link
+              key={post.id}
+              title={post.title}
+              href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+              passHref
+              className={'my-3 flex'}>
+              <div className='w-20 h-14 overflow-hidden relative'>
+                <LazyImage
+                  alt={post?.title}
+                  src={`${headerImage}`}
+                  className='object-cover w-full h-full'
+                />
+              </div>
+              <div
+                className={
+                  (selected ? ' text-green-400 ' : 'dark:text-gray-400 ') +
+                  ' text-sm overflow-x-hidden hover:text-green-600 px-2 duration-200 w-full rounded ' +
+                  ' hover:text-green-400 cursor-pointer items-center flex'
+                }>
+                <div>
+                  <div className='line-clamp-2 menu-link'>{post.title}</div>
+                  <div className='text-gray-500'>{post.lastEditedDay}</div>
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default PostGroupLatest

themes/magzine/components/PostItemCard.js

@@ -0,0 +1,62 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 普通的博客卡牌
+ * 带封面图
+ */
+const PostItemCard = ({ post }) => {
+  const { siteInfo } = useGlobal()
+  const cover = post?.pageCoverThumbnail || siteInfo?.pageCover
+  return (
+    <div key={post.id} className='mb-6 max-w-screen-3xl'>
+      <div className='flex flex-col space-y-3'>
+        {siteConfig('MAGZINE_POST_LIST_COVER') && (
+          <Link
+            href={post?.href}
+            passHref
+            className={
+              'cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+            }>
+            <div className='w-full h-40 aspect-video overflow-hidden mb-2'>
+              <LazyImage
+                alt={post?.title}
+                src={cover}
+                style={cover ? {} : { height: '0px' }}
+                className='w-full h-40 aspect-video object-cover'
+              />
+            </div>
+          </Link>
+        )}
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
+
+        <Link
+          href={post?.href}
+          passHref
+          className={
+            'text-xl cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+          }>
+          <h2>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </h2>
+        </Link>
+
+        <div className='text-sm'>
+          {formatDateFmt(post.publishDate, 'yyyy-MM')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCard

themes/magzine/components/PostItemCardSimple.js

@@ -0,0 +1,40 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 不带图片
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardSimple = ({ post }) => {
+  return (
+    <div
+      key={post.id}
+      className='lg:mb-6 max-w-screen-3xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
+      <div className='flex mr-2 items-center'>
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
+      </div>
+
+      {/* 文章标题 */}
+      <Link
+        href={post?.href}
+        passHref
+        className={
+          'cursor-pointer hover:underline text-lg leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+        }>
+        <h2>
+          {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}
+          {post.title}
+        </h2>
+      </Link>
+
+      <div className='text-sm text-gray-700'>{post.date?.start_date}</div>
+    </div>
+  )
+}
+
+export default PostItemCardSimple

themes/magzine/components/PostItemCardTop.js

@@ -0,0 +1,108 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CONFIG from '../config'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 置顶头条文章
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardTop = ({ post, showSummary }) => {
+  const showPreview =
+    siteConfig('MAGZINE_POST_LIST_PREVIEW', true, CONFIG) && post?.blockMap
+  const { locale } = useGlobal()
+  return (
+    <div
+      key={post?.id}
+      // data-aos='fade-up'
+      // data-aos-duration='300'
+      // data-aos-once='false'
+      // data-aos-anchor-placement='top-bottom'
+      className='mb-6 max-w-screen-3xl '>
+      <div className='flex flex-col w-full'>
+        {siteConfig('MAGZINE_POST_LIST_COVER', true, CONFIG) &&
+          post?.pageCoverThumbnail && (
+            <Link
+              href={post?.href || ''}
+              passHref
+              className={
+                'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
+              }>
+              <div className='w-full h-80 object-cover overflow-hidden mb-2'>
+                <LazyImage
+                  priority
+                  alt={post?.title}
+                  src={post?.pageCoverThumbnail}
+                  className='w-full h-80 object-cover hover:scale-125 duration-150'
+                />
+              </div>
+            </Link>
+          )}
+
+        <div className='flex py-2 mr-2 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'
+            }>
+            {siteConfig('MAGZINE_POST_LIST_TAG') &&
+              post?.tagItems?.map(tag => (
+                <TagItemMini key={tag.name} tag={tag} />
+              ))}
+          </div>
+        </div>
+
+        <Link
+          href={post?.href || ''}
+          passHref
+          className={
+            'cursor-pointer hover:underline leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+          }>
+          <h2 className='text-4xl'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {post?.title}
+          </h2>
+        </Link>
+
+        <div className='flex'></div>
+
+        {(!showPreview || showSummary) && (
+          <main className='my-4 text-gray-900 dark:text-gray-300 text-lg  leading-7'>
+            {post?.summary}
+          </main>
+        )}
+
+        {showPreview && (
+          <div className='overflow-ellipsis truncate'>
+            <NotionPage post={post} />
+            <div className='pointer-events-none border-t pt-8 border-dashed'>
+              <div className='w-full justify-start flex'>
+                <Link
+                  href={post?.href}
+                  passHref
+                  className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
+                  {locale.COMMON.ARTICLE_DETAIL}
+                  <i className='ml-1 fas fa-angle-right' />
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className='text-sm py-1'>{post?.date?.start_date}</div>
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCardTop

themes/magzine/components/PostItemCardWide.js

@@ -0,0 +1,86 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 水平左右布局的博客卡片
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardWide = ({ post, showSummary }) => {
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
+  const { locale } = useGlobal()
+  return (
+    <div key={post?.id} className='flex justify-between gap-x-6'>
+      {/* 卡牌左侧 */}
+      <div className='h-40 w-96 gap-y-3 flex flex-col'>
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post?.category} />
+        )}
+        <Link
+          href={post?.href || ''}
+          passHref
+          className={
+            ' cursor-pointer font-semibold hover:underline text-xl leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+          }>
+          <h3 className='max-w-80 break-words'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {post?.title}
+          </h3>
+        </Link>
+
+        {(!showPreview || showSummary) && (
+          <main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
+            {post?.summary}
+          </main>
+        )}
+
+        {showPreview && (
+          <div className='overflow-ellipsis truncate'>
+            <NotionPage post={post} />
+            <div className='pointer-events-none border-t pt-8 border-dashed'>
+              <div className='w-full justify-start flex'>
+                <Link
+                  href={post?.href || ''}
+                  passHref
+                  className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
+                  {locale.COMMON.ARTICLE_DETAIL}
+                  <i className='ml-1 fas fa-angle-right' />
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div
+          className={
+            'flex items-center justify-start flex-wrap space-x-3 text-gray-500'
+          }>
+          {/* {siteConfig('MAGZINE_POST_LIST_TAG') &&
+            post?.tagItems?.map(tag => (
+              <TagItemMini key={tag.name} tag={tag} />
+            ))} */}
+          <div className='text-sm py-1'>{post?.date?.start_date}</div>
+        </div>
+      </div>
+
+      {/* 卡牌右侧图片 */}
+      <div className='w-40 h-40 object-cover overflow-hidden mb-2'>
+        <LazyImage
+          alt={post?.title}
+          src={post?.pageCoverThumbnail}
+          style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
+          className='w-40 h-40 object-cover hover:scale-125 duration-150'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCardWide

themes/magzine/components/PostListEmpty.js

@@ -0,0 +1,19 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
+  return (
+    <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+      <p className='text-gray-500 dark:text-gray-300'>
+        {locale.COMMON.NO_RESULTS_FOUND}{' '}
+        {currentSearch && <div>{currentSearch}</div>}
+      </p>
+    </div>
+  )
+}
+export default PostListEmpty

themes/magzine/components/PostListHorizontal.js

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+import Swiper from './Swiper'
+
+/**
+ * 博文水平列表
+ * 含封面
+ * 可以指定是否有模块背景色
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListHorizontal = ({ title, href, posts, hasBg }) => {
+  if (!posts || posts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div
+      className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
+      <div className='max-w-screen-3xl w-full mx-auto'>
+        {/* 标题 */}
+        <div className='flex justify-between items-center py-6'>
+          <h3 className='text-2xl'>{title}</h3>
+          {href && (
+            <Link
+              className='hidden font-bold lg:block text-lg underline'
+              href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
+        </div>
+        {/* 列表 */}
+        <div className='hidden lg:grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {posts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </div>
+        <div className='block lg:hidden px-2'>
+          <Swiper posts={posts} />
+          {href && (
+            <Link className='lg:hidden block text-lg underline' href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostListHorizontal

themes/magzine/components/PostListPage.js

@@ -0,0 +1,39 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import PaginationSimple from './PaginationSimple'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListPage = ({ page = 1, posts = [], postCount }) => {
+  const { NOTION_CONFIG } = useGlobal()
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
+
+  if (!posts || posts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div className='w-full justify-center'>
+      <div id='posts-wrapper'>
+        {/* 列表 */}
+        <div className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {posts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </div>
+      </div>
+      <PaginationSimple page={page} totalPage={totalPage} />
+    </div>
+  )
+}
+
+export default PostListPage

themes/magzine/components/PostListRecommend.js

@@ -0,0 +1,85 @@
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+import Swiper from './Swiper'
+
+/**
+ * 博文水平列表
+ * 含封面
+ * 可以指定是否有模块背景色
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListRecommend = ({ latestPosts, allNavPages }) => {
+  // 获取推荐文章
+  const recommendPosts = getTopPosts({ latestPosts, allNavPages })
+  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE', '', CONFIG)
+
+  if (!recommendPosts || recommendPosts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
+      <div className='max-w-screen-3xl w-full mx-auto'>
+        {/* 标题 */}
+        <div className='flex justify-between items-center py-6'>
+          <h3 className='text-4xl font-bold'>{title}</h3>
+        </div>
+        {/* 列表 */}
+        <div className='hidden lg:grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {recommendPosts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </div>
+        <div className='block lg:hidden px-2'>
+          <Swiper posts={recommendPosts} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 获取推荐置顶文章
+ */
+function getTopPosts({ latestPosts, allNavPages }) {
+  // 默认展示最近更新
+  if (
+    !siteConfig('MAGZINE_RECOMMEND_POST_TAG') ||
+    siteConfig('MAGZINE_RECOMMEND_POST_TAG') === ''
+  ) {
+    return latestPosts
+  }
+
+  // 显示包含‘推荐’标签的文章
+  let sortPosts = []
+
+  // 排序方式
+  if (siteConfig('MAGZINE_RECOMMEND_POST_SORT_BY_UPDATE_TIME')) {
+    sortPosts = Object.create(allNavPages).sort((a, b) => {
+      const dateA = new Date(a?.lastEditedDate)
+      const dateB = new Date(b?.lastEditedDate)
+      return dateB - dateA
+    })
+  } else {
+    sortPosts = Object.create(allNavPages)
+  }
+
+  const count = siteConfig('MAGZINE_RECOMMEND_POST_COUNT', 6)
+  // 只取前4篇
+  const topPosts = []
+  for (const post of sortPosts) {
+    if (topPosts.length === count) {
+      break
+    }
+    // 查找标签
+    if (post?.tags?.indexOf(siteConfig('MAGZINE_RECOMMEND_POST_TAG')) >= 0) {
+      topPosts.push(post)
+    }
+  }
+  return topPosts
+}
+
+export default PostListRecommend

themes/magzine/components/PostListScroll.js

@@ -0,0 +1,107 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListScroll = ({ posts = [], currentSearch }) => {
+  const { NOTION_CONFIG } = useGlobal()
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const [page, updatePage] = useState(1)
+  const router = useRouter()
+  let filteredPosts = Object.assign(posts)
+  const searchKey = router?.query?.s || null
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post?.tags ? post?.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  }
+  const postsToShow = getPostByPage(page, filteredPosts, POSTS_PER_PAGE)
+
+  let hasMore = false
+  if (filteredPosts) {
+    const totalCount = filteredPosts.length
+    hasMore = page * POSTS_PER_PAGE < totalCount
+  }
+
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY + window.outerHeight
+      const clientHeight = targetRef
+        ? targetRef.current
+          ? targetRef.current.clientHeight
+          : 0
+        : 0
+      if (scrollS > clientHeight + 100) {
+        handleGetMore()
+      }
+    }, 500)
+  )
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = useRef(null)
+  const { locale } = useGlobal()
+
+  if (!postsToShow || postsToShow.length === 0) {
+    return <PostListEmpty currentSearch={currentSearch} />
+  } else {
+    return (
+      <div id='posts-wrapper' ref={targetRef} className='w-full'>
+        {/* 文章列表 */}
+        <div className='space-y-1 lg:space-y-4'>
+          {postsToShow?.map(post => (
+            <PostItemCard key={post.id} post={post} showSummary={true} />
+          ))}
+        </div>
+
+        <div>
+          <div
+            onClick={() => {
+              handleGetMore()
+            }}
+            className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200'>
+            {' '}
+            {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param POSTS_PER_PAGE 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, POSTS_PER_PAGE) {
+  return totalPosts.slice(0, POSTS_PER_PAGE * page)
+}
+
+export default PostListScroll