From 77c13a4448dc56ba31658e2ce286453c53d66eb6 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 4 Jul 2023 18:17:33 +0800
Subject: [PATCH] theme-gitbook

---
 themes/example/components/MenuItemDrop.js   |   4 +-
 themes/gitbook/Layout404.js                 |   9 -
 themes/gitbook/LayoutArchive.js             |  49 ----
 themes/gitbook/LayoutBase.js                | 135 ----------
 themes/gitbook/LayoutCategory.js            |  15 --
 themes/gitbook/LayoutCategoryIndex.js       |  34 ---
 themes/gitbook/LayoutIndex.js               |  34 ---
 themes/gitbook/LayoutPage.js                |  10 -
 themes/gitbook/LayoutSearch.js              |  53 ----
 themes/gitbook/LayoutSlug.js                |  57 ----
 themes/gitbook/LayoutTag.js                 |  15 --
 themes/gitbook/LayoutTagIndex.js            |  29 ---
 themes/gitbook/components/BottomMenuBar.js  |   2 +-
 themes/gitbook/components/FloatTocButton.js |   2 +-
 themes/gitbook/components/LoadingCover.js   |   7 +
 themes/gitbook/components/LogoBar.js        |   2 +-
 themes/gitbook/components/MenuItemDrop.js   |   4 +-
 themes/gitbook/components/PageNavDrawer.js  |   2 +-
 themes/gitbook/components/SearchInput.js    |   2 +-
 themes/gitbook/components/TocDrawer.js      |   2 +-
 themes/gitbook/index.js                     | 271 +++++++++++++++++++-
 themes/medium/LayoutBase.js                 |   2 +-
 themes/medium/components/BottomMenuBar.js   |   4 +-
 themes/medium/components/TocDrawer.js       |   4 +-
 24 files changed, 280 insertions(+), 468 deletions(-)
 delete mode 100644 themes/gitbook/Layout404.js
 delete mode 100644 themes/gitbook/LayoutArchive.js
 delete mode 100644 themes/gitbook/LayoutBase.js
 delete mode 100644 themes/gitbook/LayoutCategory.js
 delete mode 100644 themes/gitbook/LayoutCategoryIndex.js
 delete mode 100644 themes/gitbook/LayoutIndex.js
 delete mode 100644 themes/gitbook/LayoutPage.js
 delete mode 100644 themes/gitbook/LayoutSearch.js
 delete mode 100644 themes/gitbook/LayoutSlug.js
 delete mode 100644 themes/gitbook/LayoutTag.js
 delete mode 100644 themes/gitbook/LayoutTagIndex.js
 create mode 100644 themes/gitbook/components/LoadingCover.js

diff --git a/themes/example/components/MenuItemDrop.js b/themes/example/components/MenuItemDrop.js
index a61f608b..756b57df 100644
--- a/themes/example/components/MenuItemDrop.js
+++ b/themes/example/components/MenuItemDrop.js
@@ -25,8 +25,8 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {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 => {
-              return <li key={sLink.id} 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-2'>
+            {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-2'>
                     <Link href={sLink.to}>
                     <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/gitbook/Layout404.js b/themes/gitbook/Layout404.js
deleted file mode 100644
index 68b656cc..00000000
--- a/themes/gitbook/Layout404.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const Layout404 = props => {
-  return <LayoutBase {...props}>
-   <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-  </LayoutBase>
-}
-
-export default Layout404
diff --git a/themes/gitbook/LayoutArchive.js b/themes/gitbook/LayoutArchive.js
deleted file mode 100644
index 083dd8ac..00000000
--- a/themes/gitbook/LayoutArchive.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutArchive = props => {
-  const { archivePosts } = props
-
-  return (
-    <LayoutBase {...props}>
-      <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts)?.map(archiveTitle => (
-          <div key={archiveTitle}>
-            <div
-              className="pt-16 pb-4 text-3xl dark:text-gray-300"
-              id={archiveTitle}
-            >
-              {archiveTitle}
-            </div>
-            <ul>
-              {archivePosts[archiveTitle]?.map(post => (
-                <li
-                  key={post.id}
-                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-                >
-                  <div id={post?.publishTime}>
-                    <span className="text-gray-400">
-                      {post.date?.start_date}
-                    </span>{' '}
-                    &nbsp;
-                    <Link
-                      href={`${BLOG.SUB_PATH}/${post.slug}`}
-                      passHref
-                      className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-
-                      {post.title}
-
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutArchive
diff --git a/themes/gitbook/LayoutBase.js b/themes/gitbook/LayoutBase.js
deleted file mode 100644
index 10a9f7bd..00000000
--- a/themes/gitbook/LayoutBase.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-import { useState, createContext, useContext, useEffect } from 'react'
-import Footer from './components/Footer'
-import InfoCard from './components/InfoCard'
-import RevolverMaps from './components/RevolverMaps'
-import CONFIG_GITBOOK from './config_gitbook'
-import TopNavBar from './components/TopNavBar'
-import SearchInput from './components/SearchInput'
-import { useGlobal } from '@/lib/global'
-import Live2D from '@/components/Live2D'
-import BLOG from '@/blog.config'
-import NavPostList from './components/NavPostList'
-import ArticleInfo from './components/ArticleInfo'
-import Catalog from './components/Catalog'
-import { useRouter } from 'next/router'
-import Announcement from './components/Announcement'
-import PageNavDrawer from './components/PageNavDrawer'
-import FloatTocButton from './components/FloatTocButton'
-import { AdSlot } from '@/components/GoogleAdsense'
-import JumpToTopButton from './components/JumpToTopButton'
-const ThemeGlobalMedium = createContext()
-
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
-
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = (props) => {
-  const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop, siteInfo } = props
-  const [tocVisible, changeTocVisible] = useState(false)
-  const [pageNavVisible, changePageNavVisible] = useState(false)
-  const [filterPosts, setFilterPosts] = useState(allNavPages)
-  const { onLoading } = useGlobal()
-  const router = useRouter()
-
-  const showTocButton = post?.toc?.length > 1
-
-  useEffect(() => {
-    setFilterPosts(allNavPages)
-  }, [post])
-
-  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-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>
-
-  return (
-        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages, pageNavVisible, changePageNavVisible }}>
-            <CommonHead meta={meta} />
-
-            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
-                {/* 顶部导航栏 */}
-                <TopNavBar {...props} />
-
-                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
-
-                    {/* 左侧推拉抽屉 */}
-                    <div style={{ width: '32rem' }} className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
-                        <div className='py-14 px-6 sticky top-0 overflow-y-scroll h-screen'>
-                            {slotLeft}
-
-                            <SearchInput className='my-3 rounded-md' />
-
-                            {/* 所有文章列表 */}
-                            <NavPostList posts={filterPosts} />
-
-                            <AdSlot />
-
-                        </div>
-                    </div>
-
-                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
-
-                        <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
-                            {slotTop}
-
-                            <AdSlot type='in-article' />
-
-                            {onLoading ? LoadingCover : children}
-
-                            <AdSlot type='in-article' />
-
-                            {/* 回顶按钮 */}
-                            <JumpToTopButton />
-                        </div>
-
-                        {/* 底部 */}
-                        <Footer title={siteInfo?.title} />
-
-                        <div className='text-center'>
-                            <AdSlot type='native' />
-                        </div>
-                    </div>
-
-                    {/*  右侧侧推拉抽屉 */}
-                    <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
-                        <div className='py-14 px-6 sticky top-0'>
-                            <ArticleInfo post={props?.post ? props?.post : props.notice} />
-
-                            <div className='py-6'>
-                                <Catalog {...props} />
-                                {slotRight}
-                                {router.route === '/' && <>
-                                    <InfoCard {...props} />
-                                    {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                    <Live2D />
-                                </>}
-                                {/* gitbook主题首页只显示公告 */}
-                                <Announcement {...props} />
-                            </div>
-
-                            <AdSlot />
-
-                        </div>
-                    </div>
-
-                </main>
-
-                {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-                    <FloatTocButton {...props} />
-                </div>}
-
-                <PageNavDrawer {...props} />
-
-                {/* 移动端底部导航栏 */}
-                {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
-            </div>
-        </ThemeGlobalMedium.Provider>
-  )
-}
-
-export default LayoutBase
-export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)
diff --git a/themes/gitbook/LayoutCategory.js b/themes/gitbook/LayoutCategory.js
deleted file mode 100644
index 8c22757e..00000000
--- a/themes/gitbook/LayoutCategory.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import LayoutBase from './LayoutBase'
-import NavPostList from './components/NavPostList'
-import BlogPostListPage from './components/BlogPostListPage'
-import BLOG from '@/blog.config'
-
-export const LayoutCategory = props => {
-  const { category } = props
-  const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
-
-  return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
-    </LayoutBase>
-}
-
-export default LayoutCategory
diff --git a/themes/gitbook/LayoutCategoryIndex.js b/themes/gitbook/LayoutCategoryIndex.js
deleted file mode 100644
index 2c8121ad..00000000
--- a/themes/gitbook/LayoutCategoryIndex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategoryIndex = (props) => {
-  const { categoryOptions } = props
-  const { locale } = useGlobal()
-  return (
-    <LayoutBase {...props}>
-         <div className='bg-white dark:bg-gray-700 py-10'>
-        <div className='dark:text-gray-200 mb-5'>
-          <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
-        </div>
-        <div id='category-list' className='duration-200 flex flex-wrap'>
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior>
-                <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-      </div>
-    </LayoutBase>
-  )
-}
-export default LayoutCategoryIndex
diff --git a/themes/gitbook/LayoutIndex.js b/themes/gitbook/LayoutIndex.js
deleted file mode 100644
index 0b4bd7b0..00000000
--- a/themes/gitbook/LayoutIndex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useRouter } from 'next/router'
-import LayoutBase from './LayoutBase'
-import { useEffect } from 'react'
-import CONFIG_GITBOOK from './config_gitbook'
-import { isBrowser } from '@/lib/utils'
-/**
- * gitbook的首页
- * @param {*} props
- * @returns
- */
-export const LayoutIndex = (props) => {
-  const router = useRouter()
-  // 直接显示指定页面
-  useEffect(() => {
-    router.push(CONFIG_GITBOOK.INDEX_PAGE).then(() => {
-    //   console.log('跳转到指定首页', CONFIG_GITBOOK.INDEX_PAGE)
-      setTimeout(() => {
-        if (isBrowser()) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG_GITBOOK.INDEX_PAGE)
-            const containerInner = document.getElementById('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为${CONFIG_GITBOOK.INDEX_PAGE}的文章</div></blockquote>`
-            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
-          }
-        }
-      }, 7 * 1000)
-    })
-  }, [])
-  return <LayoutBase {...props}>
-  </LayoutBase>
-}
-
-export default LayoutIndex
diff --git a/themes/gitbook/LayoutPage.js b/themes/gitbook/LayoutPage.js
deleted file mode 100644
index 563df90b..00000000
--- a/themes/gitbook/LayoutPage.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import LayoutBase from './LayoutBase'
-import BlogPostListPage from './components/BlogPostListPage'
-
-export const LayoutPage = (props) => {
-  return <LayoutBase {...props}>
-      <BlogPostListPage {...props} />
-  </LayoutBase>
-}
-
-export default LayoutPage
diff --git a/themes/gitbook/LayoutSearch.js b/themes/gitbook/LayoutSearch.js
deleted file mode 100644
index f6ba05ac..00000000
--- a/themes/gitbook/LayoutSearch.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import LayoutBase from './LayoutBase'
-import SearchInput from './components/SearchInput'
-import { useGlobal } from '@/lib/global'
-import TagGroups from './components/TagGroups'
-import CategoryGroup from './components/CategoryGroup'
-import { useEffect } from 'react'
-import { isBrowser } from '@/lib/utils'
-import BLOG from '@/blog.config'
-import Mark from 'mark.js'
-import NavPostList from './components/NavPostList'
-import BlogPostListPage from './components/BlogPostListPage'
-import { useRouter } from 'next/router'
-
-export const LayoutSearch = (props) => {
-  const { locale } = useGlobal()
-  const { keyword } = props
-  const router = useRouter()
-  const currentSearch = keyword || router?.query?.s
-
-  useEffect(() => {
-    setTimeout(() => {
-      const container = isBrowser() && document.getElementById('posts-wrapper')
-      if (container && container.innerHTML) {
-        const re = new RegExp(currentSearch, 'gim')
-        const instance = new Mark(container)
-        instance.markRegExp(re, {
-          element: 'span',
-          className: 'text-red-500 border-b border-dashed'
-        })
-      }
-    },
-    100)
-  }, [currentSearch])
-  return <LayoutBase {...props}>
-
-    <div className='py-12'>
-      <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
-      <SearchInput currentSearch={currentSearch} {...props} />
-
-    {!currentSearch && <>
-        <TagGroups {...props} />
-      <CategoryGroup {...props} />
-    </>}
-
-    </div>
-
-    {currentSearch && <div>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
-    </div>}
-  </LayoutBase>
-}
-
-export default LayoutSearch
diff --git a/themes/gitbook/LayoutSlug.js b/themes/gitbook/LayoutSlug.js
deleted file mode 100644
index b5445883..00000000
--- a/themes/gitbook/LayoutSlug.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import LayoutBase from './LayoutBase'
-import React from 'react'
-import { ArticleLock } from './components/ArticleLock'
-import NotionPage from '@/components/NotionPage'
-import CONFIG_GITBOOK from './config_gitbook'
-import Comment from '@/components/Comment'
-import ArticleAround from './components/ArticleAround'
-import TocDrawer from './components/TocDrawer'
-import CategoryItem from './components/CategoryItem'
-import TagItemMini from './components/TagItemMini'
-import ShareBar from '@/components/ShareBar'
-import { AdSlot } from '@/components/GoogleAdsense'
-
-export const LayoutSlug = (props) => {
-  const { post, prev, next, lock, validPassword } = props
-
-  return (
-        <LayoutBase {...props} >
-            {/* 文章锁 */}
-            {lock && <ArticleLock validPassword={validPassword} />}
-
-            {!lock && <div id='container'>
-
-                {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
-
-                {/* Notion文章主体 */}
-                {post && (<section id="article-wrapper" className="px-1">
-                    <NotionPage post={post} />
-                </section>)}
-
-                <section>
-
-                    {/* 分享 */}
-                    <ShareBar post={post} />
-                    {/* 文章分类和标签信息 */}
-                    <div className='flex justify-between'>
-                        {CONFIG_GITBOOK.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
-                        <div>
-                            {CONFIG_GITBOOK.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                        </div>
-                    </div>
-
-                    {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
-
-                    <AdSlot/>
-
-                    <Comment frontMatter={post} />
-                </section>
-
-                <TocDrawer {...props} />
-            </div>}
-        </LayoutBase>
-  )
-}
-
-export default LayoutSlug
diff --git a/themes/gitbook/LayoutTag.js b/themes/gitbook/LayoutTag.js
deleted file mode 100644
index 03e33788..00000000
--- a/themes/gitbook/LayoutTag.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import LayoutBase from './LayoutBase'
-import BLOG from '@/blog.config'
-import NavPostList from './components/NavPostList'
-import BlogPostListPage from './components/BlogPostListPage'
-
-export const LayoutTag = (props) => {
-  const { tag } = props
-  const slotTop = <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
-
-  return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <NavPostList {...props} />}
-   </LayoutBase>
-}
-
-export default LayoutTag
diff --git a/themes/gitbook/LayoutTagIndex.js b/themes/gitbook/LayoutTagIndex.js
deleted file mode 100644
index cc9f8c94..00000000
--- a/themes/gitbook/LayoutTagIndex.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import TagItemMini from './components/TagItemMini'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTagIndex = props => {
-  const { tagOptions } = props
-  const { locale } = useGlobal()
-  return (
-    <LayoutBase {...props}>
-      <div className="bg-white dark:bg-gray-700 py-10">
-        <div className="dark:text-gray-200 mb-5">
-          <i className="mr-4 fas fa-tag" />
-          {locale.COMMON.TAGS}:
-        </div>
-        <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions?.map(tag => {
-            return (
-              <div key={tag.name} className="p-2">
-                <TagItemMini key={tag.name} tag={tag} />
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutTagIndex
diff --git a/themes/gitbook/components/BottomMenuBar.js b/themes/gitbook/components/BottomMenuBar.js
index 0265bd28..101fd572 100644
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,5 +1,5 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
 import React from 'react'
-import { useGitBookGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
diff --git a/themes/gitbook/components/FloatTocButton.js b/themes/gitbook/components/FloatTocButton.js
index 8a66ee8f..3b6c5933 100644
--- a/themes/gitbook/components/FloatTocButton.js
+++ b/themes/gitbook/components/FloatTocButton.js
@@ -1,4 +1,4 @@
-import { useGitBookGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '@/themes/gitbook'
 
 export default function FloatTocButton () {
   const { tocVisible, changeTocVisible } = useGitBookGlobal()
diff --git a/themes/gitbook/components/LoadingCover.js b/themes/gitbook/components/LoadingCover.js
new file mode 100644
index 00000000..f74757ef
--- /dev/null
+++ b/themes/gitbook/components/LoadingCover.js
@@ -0,0 +1,7 @@
+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>
+}
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js
index 70e78100..803a4fa3 100644
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
+import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
-import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * Logo区域
diff --git a/themes/gitbook/components/MenuItemDrop.js b/themes/gitbook/components/MenuItemDrop.js
index 3ef482b5..4e8feeb0 100644
--- a/themes/gitbook/components/MenuItemDrop.js
+++ b/themes/gitbook/components/MenuItemDrop.js
@@ -37,8 +37,8 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {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 => {
-              return <li key={sLink.id} 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-2'>
+            {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-2'>
                     <Link href={sLink.to}>
                         <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js
index dce89671..faa441ed 100644
--- a/themes/gitbook/components/PageNavDrawer.js
+++ b/themes/gitbook/components/PageNavDrawer.js
@@ -1,4 +1,4 @@
-import { useGitBookGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '@/themes/gitbook'
 import NavPostList from './NavPostList'
 
 /**
diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js
index d35d2bc4..43062eb2 100644
--- a/themes/gitbook/components/SearchInput.js
+++ b/themes/gitbook/components/SearchInput.js
@@ -1,6 +1,6 @@
 import { useImperativeHandle, useRef, useState } from 'react'
-import { useGitBookGlobal } from '../LayoutBase'
 import { deepClone } from '@/lib/utils'
+import { useGitBookGlobal } from '@/themes/gitbook'
 let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
index f08644f4..ca869b40 100644
--- a/themes/gitbook/components/TocDrawer.js
+++ b/themes/gitbook/components/TocDrawer.js
@@ -1,5 +1,5 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
 import Catalog from './Catalog'
-import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 039b93c8..9a8b166b 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -1,14 +1,261 @@
 import CONFIG_GITBOOK from './config_gitbook'
-import LayoutIndex from './LayoutIndex'
-import LayoutSearch from './LayoutSearch'
-import LayoutArchive from './LayoutArchive'
-import LayoutSlug from './LayoutSlug'
-import Layout404 from './Layout404'
-import LayoutCategory from './LayoutCategory'
-import LayoutCategoryIndex from './LayoutCategoryIndex'
-import LayoutPage from './LayoutPage'
-import LayoutTag from './LayoutTag'
-import LayoutTagIndex from './LayoutTagIndex'
+import { useRouter } from 'next/router'
+import { useEffect, useState, createContext, useContext } from 'react'
+import { isBrowser } from '@/lib/utils'
+import CommonHead from '@/components/CommonHead'
+
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import NavPostList from './components/NavPostList'
+import ArticleInfo from './components/ArticleInfo'
+import Catalog from './components/Catalog'
+import Announcement from './components/Announcement'
+import PageNavDrawer from './components/PageNavDrawer'
+import FloatTocButton from './components/FloatTocButton'
+import { AdSlot } from '@/components/GoogleAdsense'
+import JumpToTopButton from './components/JumpToTopButton'
+import LoadingCover from './components/LoadingCover'
+import ShareBar from '@/components/ShareBar'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import ArticleAround from './components/ArticleAround'
+import Comment from '@/components/Comment'
+import TocDrawer from './components/TocDrawer'
+import NotionPage from '@/components/NotionPage'
+import { ArticleLock } from './components/ArticleLock'
+
+// 主题全局变量
+const ThemeGlobalGitbook = createContext()
+export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook)
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = (props) => {
+  const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop, siteInfo } = props
+  const { onLoading } = useGlobal()
+  const router = useRouter()
+  const [tocVisible, changeTocVisible] = useState(false)
+  const [pageNavVisible, changePageNavVisible] = useState(false)
+  const [filterPosts, setFilterPosts] = useState(allNavPages)
+
+  const showTocButton = post?.toc?.length > 1
+
+  useEffect(() => {
+    setFilterPosts(allNavPages)
+  }, [post])
+
+  return (
+        <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages, pageNavVisible, changePageNavVisible }}>
+            <CommonHead meta={meta} />
+
+            <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+                {/* 顶部导航栏 */}
+                <TopNavBar {...props} />
+
+                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+
+                    {/* 左侧推拉抽屉 */}
+                    <div style={{ width: '32rem' }} className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
+                        <div className='py-14 px-6 sticky top-0 overflow-y-scroll h-screen'>
+                            {slotLeft}
+                            <SearchInput className='my-3 rounded-md' />
+                            {/* 所有文章列表 */}
+                            <NavPostList posts={filterPosts} />
+                            <AdSlot />
+                        </div>
+                    </div>
+
+                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
+
+                        <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
+                            {slotTop}
+                            <AdSlot type='in-article' />
+                            {onLoading ? <LoadingCover /> : children}
+                            <AdSlot type='in-article' />
+                            {/* 回顶按钮 */}
+                            <JumpToTopButton />
+                        </div>
+
+                        {/* 底部 */}
+                        <Footer title={siteInfo?.title} />
+                        <div className='text-center'>
+                            <AdSlot type='native' />
+                        </div>
+                    </div>
+
+                    {/*  右侧侧推拉抽屉 */}
+                    <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <ArticleInfo post={props?.post ? props?.post : props.notice} />
+
+                            <div className='py-6'>
+                                <Catalog {...props} />
+                                {slotRight}
+                                {router.route === '/' && <>
+                                    <InfoCard {...props} />
+                                    {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                    <Live2D />
+                                </>}
+                                {/* gitbook主题首页只显示公告 */}
+                                <Announcement {...props} />
+                            </div>
+
+                            <AdSlot />
+
+                        </div>
+                    </div>
+
+                </main>
+
+                {/* 移动端悬浮目录按钮 */}
+                {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
+                    <FloatTocButton {...props} />
+                </div>}
+
+                {/* 移动端导航抽屉 */}
+                <PageNavDrawer {...props} />
+            </div>
+        </ThemeGlobalGitbook.Provider>
+  )
+}
+
+/**
+ * 首页
+ * 重定向到某个文章详情页
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+  const router = useRouter()
+  useEffect(() => {
+    router.push(CONFIG_GITBOOK.INDEX_PAGE).then(() => {
+      // console.log('跳转到指定首页', CONFIG_GITBOOK.INDEX_PAGE)
+      setTimeout(() => {
+        if (isBrowser()) {
+          const article = document.getElementById('notion-article')
+          if (!article) {
+            console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG_GITBOOK.INDEX_PAGE)
+            const containerInner = document.getElementById('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为${CONFIG_GITBOOK.INDEX_PAGE}的文章</div></blockquote>`
+            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+          }
+        }
+      }, 7 * 1000)
+    })
+  }, [])
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 文章列表 无
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = (props) => {
+  const { post, prev, next, lock, validPassword } = props
+
+  return (
+        <LayoutBase {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id='container'>
+
+                {/* title */}
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+
+                {/* Notion文章主体 */}
+                {post && (<section id="article-wrapper" className="px-1">
+                    <NotionPage post={post} />
+                </section>)}
+
+                <section>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG_GITBOOK.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
+                        <div>
+                            {CONFIG_GITBOOK.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                        </div>
+                    </div>
+
+                    {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+
+                    <AdSlot />
+
+                    <Comment frontMatter={post} />
+                </section>
+
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 没有搜索
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 没有归档
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 404
+ */
+const Layout404 = props => {
+  return <LayoutBase {...props}>
+        <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+    </LayoutBase>
+}
+
+/**
+ * 分类列表
+ */
+const LayoutCategoryIndex = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 标签列表
+ */
+const LayoutTagIndex = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
 
 export {
   CONFIG_GITBOOK as THEME_CONFIG,
@@ -17,9 +264,7 @@ export {
   LayoutArchive,
   LayoutSlug,
   Layout404,
-  LayoutCategory,
   LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
+  LayoutPostList,
   LayoutTagIndex
 }
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index 728252c9..be8cfa41 100644
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -86,4 +86,4 @@ const LayoutBase = props => {
 }
 
 export default LayoutBase
-export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)
+export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
diff --git a/themes/medium/components/BottomMenuBar.js b/themes/medium/components/BottomMenuBar.js
index 5b63c82e..45215f50 100644
--- a/themes/medium/components/BottomMenuBar.js
+++ b/themes/medium/components/BottomMenuBar.js
@@ -1,10 +1,10 @@
 import Link from 'next/link'
 import React from 'react'
-import { useGitBookGlobal } from '../LayoutBase'
+import { useMediumGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ post, className }) {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { tocVisible, changeTocVisible } = useMediumGlobal()
   const showTocBotton = post?.toc?.length > 0
 
   const toggleToc = () => {
diff --git a/themes/medium/components/TocDrawer.js b/themes/medium/components/TocDrawer.js
index 1cfbb504..9a9270db 100644
--- a/themes/medium/components/TocDrawer.js
+++ b/themes/medium/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import { useGitBookGlobal } from '../LayoutBase'
+import { useMediumGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
@@ -9,7 +9,7 @@ import { useGitBookGlobal } from '../LayoutBase'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { tocVisible, changeTocVisible } = useMediumGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }