Merge pull request #1197 from tangly1024/feat/new-theme-gitbook

Feat/new theme gitbook

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.15.2
+NEXT_PUBLIC_VERSION=3.16.0

components/DarkModeButton.js

@@ -13,9 +13,8 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
-    <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
-       onClick={handleChangeDarkMode} />
+  return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-125 cursor-pointer transform ' + props.className}>
+    <i id='darkModeButton' className={`${isDarkMode ? 'far fa-sun' : 'far fa-moon'}`}/>
   </div>
 }
 export default DarkModeButton

lib/global.js

@@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode } from '@/themes/theme'
 import NProgress from 'nprogress'
-import LoadingCover from '@/components/LoadingCover'
 import { getQueryVariable, isBrowser } from './utils'
 
 const GlobalContext = createContext()
@@ -22,7 +21,7 @@ export function GlobalContextProvider({ children }) {
   const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
-  const [onReading, setOnReading] = useState(false) // 网页资源加载
+  //   const [onReading, setOnReading] = useState(false) // 网页资源加载
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
@@ -34,7 +33,7 @@ export function GlobalContextProvider({ children }) {
         // setOnReading(true)
       }
       // 监听页面元素加载完
-      setOnReading(false)
+      //   setOnReading(false)
       window.addEventListener('beforeunload', handleBeforeUnload)
       return () => {
         window.removeEventListener('beforeunload', handleBeforeUnload)
@@ -88,10 +87,8 @@ export function GlobalContextProvider({ children }) {
           updateDarkMode,
           theme,
           setTheme,
-          switchTheme,
-          setOnReading
+          switchTheme
         }}>
-            <LoadingCover onReading={onReading} setOnReading={setOnReading}/>
             {children}
         </GlobalContext.Provider>
   )

lib/notion/getNotionData.js

@@ -26,6 +26,7 @@ export async function getGlobalNotionData({
 }) {
   // 获取Notion数据
   const notionPageData = deepClone(await getNotionPageData({ pageId, from }))
+  notionPageData.allNavPages = getNavPages({ allPages: notionPageData.allPages })
   delete notionPageData.block
   delete notionPageData.schema
   delete notionPageData.rawMetadata
@@ -168,6 +169,37 @@ function getSiteInfo({ collection, block }) {
   return { title, description, pageCover, icon }
 }
 
+/**
+ * 获取导航pages
+ * 转为gitbook这类文档主题设计，精减的标题和内容
+ * 导航页面的条件，必须是Posts
+ * @param {*} param0
+ */
+export function getNavPages({ allPages }) {
+  const allNavPages = allPages.filter(post => {
+    return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
+  })
+  const result = allNavPages.map(item => ({ id: item.id, title: item.title, category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
+
+  const groupedArray = result.reduce((groups, item) => {
+    const categoryName = item.category ? item.category.join('/') : '' // 将category转换为字符串
+    const lastGroup = groups[groups.length - 1] // 获取最后一个分组
+
+    if (!lastGroup || lastGroup.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组
+      groups.push({ category: categoryName, items: [] })
+    }
+
+    groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
+
+    return groups
+  }, [])
+
+  return groupedArray
+}
+
+/**
+ * 获取公告
+ */
 async function getNotice(post) {
   if (!post) {
     return null
@@ -183,6 +215,7 @@ const EmptyData = (pageId) => {
     notice: null,
     siteInfo: getSiteInfo({}),
     allPages: [{ id: 1, title: `无法获取Notion数据，请检查Notion_ID： \n 当前 ${pageId}`, summary: '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next', status: 'Published', type: 'Post', slug: '13a171332816461db29d50e9f575b00d', date: { start_date: '2023-04-24', lastEditedTime: '2023-04-24', tagItems: [] } }],
+    allNavPages: [],
     collection: [],
     collectionQuery: {},
     collectionId: null,
@@ -275,11 +308,13 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   // 新的菜单
   const customMenu = await getCustomMenu({ collectionData })
   const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
+  const allNavPages = getNavPages({ allPages })
 
   return {
     notice,
     siteInfo,
     allPages,
+    allNavPages,
     collection,
     collectionQuery,
     collectionId,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.15.2",
+  "version": "3.16.0",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

pages/[...slug].js

@@ -4,11 +4,11 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
-import { isBrowser } from '@/lib/utils'
 import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
-import md5 from 'js-md5'
 import { getLayoutByTheme } from '@/themes/theme'
+import md5 from 'js-md5'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 根据notion的slug访问页面
@@ -19,16 +19,13 @@ const Slug = props => {
   const { post, siteInfo } = props
   const router = useRouter()
 
-  // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
-
   // 文章锁🔐
   const [lock, setLock] = useState(post?.password && post?.password !== '')
 
   /**
-     * 验证文章密码
-     * @param {*} result
-     */
+   * 验证文章密码
+   * @param {*} result
+  */
   const validPassword = passInput => {
     const encrypt = md5(post.slug + passInput)
     if (passInput && encrypt === post.password) {
@@ -51,18 +48,18 @@ const Slug = props => {
             })
           }
         }
-      }, 8 * 1000) // 404时长 8秒
+      }, 5 * 1000) // 404时长 8秒
     }
 
     // 文章加密
     if (post?.password && post?.password !== '') {
       setLock(true)
     } else {
+      setLock(false)
       if (!lock && post?.blockMap?.block) {
         post.content = Object.keys(post.blockMap.block).filter(key => post.blockMap.block[key]?.value?.parent_id === post.id)
         post.toc = getPageTableOfContents(post, post.blockMap)
       }
-      setLock(false)
     }
     router.events.on('routeChangeComplete', () => {
       window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -79,7 +76,8 @@ const Slug = props => {
     tags: post?.tags
   }
   props = { ...props, lock, meta, setLock, validPassword }
-
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme(useRouter())
   return <Layout {...props} />
 }
 
@@ -124,6 +122,7 @@ export async function getStaticProps({ params: { slug } }) {
 
   // 无法获取文章
   if (!props?.post) {
+    props.post = null
     return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
   }
 

styles/notion.css

@@ -1142,7 +1142,6 @@ code[class*='language-'] {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  @apply text-blue-600 dark:text-blue-200
 }
 
 .notion-table-of-contents-item:hover {

themes/gitbook/Layout404.js

@@ -0,0 +1,9 @@
+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

themes/gitbook/LayoutArchive.js

@@ -0,0 +1,49 @@
+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?.date?.start_date}>
+                    <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

themes/gitbook/LayoutBase.js

@@ -0,0 +1,122 @@
+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 BottomMenuBar from './components/BottomMenuBar'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import BlogPostListScroll from './components/BlogPostListScroll'
+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'
+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()
+
+  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' />
+
+                            {/* 所有文章列表 */}
+                            <BlogPostListScroll posts={filterPosts} />
+
+                        </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}
+
+                            {onLoading ? LoadingCover : children}
+
+                            {/* 回顶按钮 */}
+                            <div
+                                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 hidden lg:block z-20'>
+                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+                            </div>
+                        </div>
+
+                        {/* 底部 */}
+                        <Footer title={siteInfo?.title} />
+                    </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='pt-6'>
+                                <Catalog {...props} />
+                                {slotRight}
+                                {router.route === '/' && <>
+                                    <InfoCard {...props} />
+                                    {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                    <Live2D />
+                                </>}
+                                {/* gitbook主题首页只显示公告 */}
+                                <Announcement {...props} />
+                            </div>
+
+                        </div>
+                    </div>
+
+                </main>
+
+                <PageNavDrawer {...props}/>
+
+                {/* 移动端底部导航栏 */}
+                <BottomMenuBar {...props} className='block md:hidden' />
+            </div>
+        </ThemeGlobalMedium.Provider>
+  )
+}
+
+export default LayoutBase
+export const useMediumGlobal = () => useContext(ThemeGlobalMedium)

themes/gitbook/LayoutCategory.js

@@ -0,0 +1,15 @@
+import LayoutBase from './LayoutBase'
+import BlogPostListScroll from './components/BlogPostListScroll'
+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} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
+}
+
+export default LayoutCategory

themes/gitbook/LayoutCategoryIndex.js

@@ -0,0 +1,34 @@
+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

themes/gitbook/LayoutIndex.js

@@ -0,0 +1,34 @@
+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

themes/gitbook/LayoutPage.js

@@ -0,0 +1,10 @@
+import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
+
+export const LayoutPage = (props) => {
+  return <LayoutBase {...props}>
+      <BlogPostListPage {...props} />
+  </LayoutBase>
+}
+
+export default LayoutPage

themes/gitbook/LayoutSearch.js

@@ -0,0 +1,53 @@
+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 BlogPostListScroll from './components/BlogPostListScroll'
+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('container')
+      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} /> : <BlogPostListScroll {...props} />}
+    </div>}
+  </LayoutBase>
+}
+
+export default LayoutSearch

themes/gitbook/LayoutSlug.js

@@ -0,0 +1,53 @@
+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'
+
+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="notion-article" 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} />}
+                    <Comment frontMatter={post} />
+                </section>
+
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
+}
+
+export default LayoutSlug

themes/gitbook/LayoutTag.js

@@ -0,0 +1,15 @@
+import LayoutBase from './LayoutBase'
+import BLOG from '@/blog.config'
+import BlogPostListScroll from './components/BlogPostListScroll'
+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} /> : <BlogPostListScroll {...props} />}
+   </LayoutBase>
+}
+
+export default LayoutTag

themes/gitbook/LayoutTagIndex.js

@@ -0,0 +1,29 @@
+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

themes/gitbook/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+//   const { locale } = useGlobal()
+  if (notice?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {notice && (<div id="announcement-content">
+            <NotionPage post={notice} />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/gitbook/components/ArticleAround.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return (
+    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+        {next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+
+      </Link>
+    </section>
+  )
+}

themes/gitbook/components/ArticleInfo.js

@@ -0,0 +1,9 @@
+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}
+    </div>
+}

themes/gitbook/components/ArticleLock.js

@@ -0,0 +1,53 @@
+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 font-light 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-green-500 hover:bg-green-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/gitbook/components/BlogPostCard.js

@@ -0,0 +1,28 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const BlogPostCard = ({ post, className }) => {
+  const router = useRouter()
+  const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
+  return (
+        <div key={post.id} className="py-0.5">
+            <div className="flex flex-col w-full">
+                <Link
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    passHref
+                    className={
+                        `${className} ${currentSelected ? 'bg-gray-500 text-white' : 'text-gray-700 dark:text-gray-300 '} hover:font-bold py-0.5 cursor-pointer`
+                    }>
+                    <div>
+                        {post.title}
+                    </div>
+
+                </Link>
+            </div>
+        </div>
+  )
+}
+
+export default BlogPostCard

themes/gitbook/components/BlogPostListEmpty.js

@@ -0,0 +1,12 @@
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+  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'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+  </div>
+}
+export default BlogPostListEmpty

themes/gitbook/components/BlogPostListPage.js

@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import PaginationSimple from './PaginationSimple'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+
+  if (!posts || posts.length === 0) {
+    return <BlogPostListEmpty />
+  }
+
+  return (
+      <div className='w-full justify-center'>
+        <div id='container'>
+        {/* 文章列表 */}
+        {posts?.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+        </div>
+        <PaginationSimple page={page} totalPage={totalPage} />
+      </div>
+  )
+}
+
+export default BlogPostListPage

themes/gitbook/components/BlogPostListScroll.js

@@ -0,0 +1,35 @@
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import React, { useRef } from 'react'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch }) => {
+  const targetRef = useRef(null)
+  const filteredPosts = Object.assign(posts)
+
+  if (!filteredPosts || filteredPosts.length === 0) {
+    return <BlogPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div id='container' ref={targetRef} className='w-full'>
+            {/* 文章列表 */}
+            {filteredPosts?.map((group, index) => {
+              if (group.category) {
+                return <div key={index}>
+                        <div className='text-md font-sans ' key={group.category}>{group.category}</div>
+                        {group.items?.map(post => (<div key={post.id} className='pl-6 border-l'><BlogPostCard className='text-sm' post={post} /></div>))}
+                    </div>
+              } else {
+                return <div key={index}> {group.items?.map(post => (<BlogPostCard key={post.id} post={post} className='text-md' />))}</div>
+              }
+            })}
+        </div>
+  }
+}
+
+export default BlogPostListScroll

themes/gitbook/components/BottomMenuBar.js

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import React from 'react'
+import { useMediumGlobal } from '../LayoutBase'
+import JumpToTopButton from './JumpToTopButton'
+
+export default function BottomMenuBar({ post, className }) {
+  const { tocVisible, changeTocVisible, pageNavVisible, changePageNavVisible } = useMediumGlobal()
+  const showTocBotton = post?.toc?.length > 0
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
+            <div className='flex justify-between h-full shadow-card'>
+                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
+                    <i className="fa-regular fa-chart-bar"></i>
+                </div>
+                <div className='flex w-full items-center justify-center cursor-pointer'>
+                    <JumpToTopButton />
+                </div>
+                {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
+                    <i className='fas fa-list-ol ' />
+                </div>}
+                {!showTocBotton && <Link href='/' passHref legacyBehavior>
+                    <div className='flex w-full items-center justify-center cursor-pointer'>
+                        <i className='fas fa-home' />
+                    </div>
+                </Link>}
+            </div>
+        </div>
+  )
+}

themes/gitbook/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/gitbook/components/Catalog.js

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useState } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ post }) => {
+  const tocIds = []
+  const toc = post?.toc
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [post])
+
+  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 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
+    if (isBrowser()) {
+      document?.getElementById('toc-wrapper')?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }
+  }, throttleMs))
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return null
+  }
+
+  return <>
+    <div id='toc-wrapper' className='overflow-y-auto max-h-96 overscroll-none scroll-hidden'>
+      <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-300
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+            >
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  </>
+}
+
+export default Catalog

themes/gitbook/components/CategoryGroup.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import CategoryItem from './CategoryItem'
+
+const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  if (!categoryOptions) {
+    return <></>
+  }
+  return <div id='category-list' className='pt-4'>
+    <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
+    <div className='flex flex-wrap'>
+      {categoryOptions?.map(category => {
+        const selected = currentCategory === category.name
+        return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count} />
+      })}
+    </div>
+  </div>
+}
+
+export default CategoryGroup

themes/gitbook/components/CategoryItem.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function CategoryItem ({ selected, category, categoryCount }) {
+  return (
+    <Link
+      href={`/category/${category}`}
+      passHref
+      className={(selected
+        ? 'hover:text-white dark:hover:text-white bg-green-600 text-white '
+        : 'dark:text-green-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-green-600') +
+      ' flex text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
+
+      <div><i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category} {categoryCount && `(${categoryCount})`}
+      </div>
+
+    </Link>
+  );
+}

themes/gitbook/components/Footer.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import DarkModeButton from '@/components/DarkModeButton'
+
+const Footer = ({ title }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const copyrightDate = (function () {
+    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+      return BLOG.SINCE + '-' + currentYear
+    }
+    return currentYear
+  })()
+
+  return (
+        <footer
+            className='max-w-3xl z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center mx-auto w-full leading-6 text-sm px-6 pb-6 relative'
+        >
+            <hr />
+
+            <div className='flex justify-between'>
+                <div className='flex'>© {`${copyrightDate}`} <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br /></div></div>
+                <div className='text-xs font-serif'><a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a></div>
+            </div>
+
+            {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.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>
+            <br />
+            <h1>{title}</h1>
+
+        </footer>
+  )
+}
+
+export default Footer

themes/gitbook/components/InfoCard.js

@@ -0,0 +1,21 @@
+import BLOG from '@/blog.config'
+import Router from 'next/router'
+import React from 'react'
+import SocialButton from './SocialButton'
+
+const InfoCard = (props) => {
+  const { siteInfo } = props
+  return <div id='info-card' className='py-4'>
+    <div className='items-center justify-center'>
+        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+         </div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
+        <SocialButton/>
+    </div>
+  </div>
+}
+
+export default InfoCard

themes/gitbook/components/JumpToTopButton.js

@@ -0,0 +1,26 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG_GITBOOK from '../config_gitbook'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  const { locale } = useGlobal()
+  if (!CONFIG_GITBOOK.WIDGET_TO_TOP) {
+    return <></>
+  }
+  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+        <div title={locale.POST.TOP} >
+          <i className='fas fa-arrow-up'/>
+        </div>
+        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+    </div>)
+}
+
+export default JumpToTopButton

themes/gitbook/components/LeftMenuBar.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import React from 'react'
+
+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/gitbook/components/LogoBar.js

@@ -0,0 +1,14 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+export default function LogoBar(props) {
+  const { siteInfo } = props
+  return (
+        <div id='top-wrapper' className='w-full flex items-center'>
+            <Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
+                {/*  eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2' /> {siteInfo?.title}
+            </Link>
+        </div>
+  )
+}

themes/gitbook/components/MenuBarMobile.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_GITBOOK from '../config_gitbook'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuBarMobile = (props) => {
+  const { customMenu, customNav } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_GITBOOK.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_GITBOOK.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_GITBOOK.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_GITBOOK.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className=' text-md'>
+        {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
+        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
+
+    </nav>
+  )
+}

themes/gitbook/components/MenuItemCollapse.js

@@ -0,0 +1,62 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  return <>
+        <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+
+            {!hasSubMenu && <Link href={link?.to} 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 font-extralight 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 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
+              font-extralight 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.to}>
+                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}

themes/gitbook/components/MenuItemDrop.js

@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+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.to) || (router.asPath === link.to)
+
+  return <li className='cursor-pointer list-none items-center flex mx-2' 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={'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')}>
+                <Link href={link?.to}>
+                    {link?.icon && <i className={link?.icon} />} {link?.name}
+                </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 => {
+              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 href={sLink.to}>
+                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}

themes/gitbook/components/MenuItemMobileNormal.js

@@ -0,0 +1,27 @@
+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.to) || (router.asPath === link.to)
+
+  return <Link
+    key={`${link.to}`}
+    title={link.to}
+    href={link.to}
+    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/gitbook/components/MenuItemPCNormal.js

@@ -0,0 +1,24 @@
+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.to) || (router.asPath === link.to)
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <Link
+        key={`${link.id}-${link.to}`}
+        title={link.to}
+        href={link.to}
+        className={'px-2 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 className='items-center justify-center flex '>
+            <i className={link.icon} />
+            <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+        </div>
+        {link.slot}
+    </Link>
+}

themes/gitbook/components/PageNavDrawer.js

@@ -0,0 +1,34 @@
+import { useMediumGlobal } from '../LayoutBase'
+import BlogPostListScroll from './BlogPostListScroll'
+
+/**
+ * 悬浮抽屉 页面内导航
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PageNavDrawer = ({ post, cRef }) => {
+  const { pageNavVisible, changePageNavVisible, filterPosts } = useMediumGlobal()
+  const switchVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return <>
+        <div id='gitbook-left-float' className='fixed top-0 left-0 z-40'>
+            {/* 侧边菜单 */}
+            <div
+                className={(pageNavVisible ? 'animate__slideInLeft ' : ' -ml-72 animate__slideOutLeft') +
+                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'}>
+                <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
+                    {/* 所有文章列表 */}
+                    <BlogPostListScroll posts={filterPosts} />
+                </div>
+            </div>
+        </div>
+        {/* 背景蒙版 */}
+        <div id='left-drawer-background' className={(pageNavVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+            onClick={switchVisible} />
+    </>
+}
+export default PageNavDrawer

themes/gitbook/components/PaginationSimple.js

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 简易翻页插件
+ * @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.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-green-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-green-500 border-b-2 hover:font-bold`}>
+
+        {locale.PAGINATION.NEXT}→
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple

themes/gitbook/components/Progress.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || (isBrowser() && document.getElementById('container'))
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black">
+      <div
+        className="h-4 bg-gray-600 duration-200"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress

themes/gitbook/components/RevolverMaps.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+export default function RevolverMaps () {
+  const [load, changeLoad] = useState(false)
+  useEffect(() => {
+    if (!load) {
+      initRevolverMaps()
+      changeLoad(true)
+    }
+  }, [])
+  return <div id="revolvermaps" className='p-4'/>
+}
+
+function initRevolverMaps () {
+  if (screen.width >= 768) {
+    Promise.all([
+      loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33')
+    ]).then(() => {
+      console.log('地图加载完成')
+    })
+  }
+}
+
+// 封装异步加载资源的方法
+function loadExternalResource (url) {
+  return new Promise((resolve, reject) => {
+    const container = document.getElementById('revolvermaps')
+    const tag = document.createElement('script')
+    tag.src = url
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      container.appendChild(tag)
+    }
+  })
+}

themes/gitbook/components/SearchInput.js

@@ -0,0 +1,114 @@
+import { useImperativeHandle, useRef, useState } from 'react'
+import { useMediumGlobal } from '../LayoutBase'
+let lock = false
+
+const SearchInput = ({ currentSearch, cRef, className }) => {
+  const searchInputRef = useRef()
+  const { setFilterPosts, allNavPages } = useMediumGlobal()
+
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    let keyword = searchInputRef.current.value
+    const filterPosts = []
+    if (keyword) {
+      keyword = keyword.trim()
+    } else {
+      setFilterPosts(allNavPages)
+    }
+    for (const post of allNavPages) {
+      const tagContent = post.tags && Array.isArray(post.tags) ? post.tags.join(' ') : ''
+      const categoryContent = post.category && Array.isArray(post.category) ? post.category.join(' ') : ''
+      const articleInfo = post.title + post.summary + tagContent + categoryContent
+      let hit = articleInfo.toLowerCase().indexOf(keyword) > -1
+      const indexContent = [post.summary]
+      // console.log('全文搜索缓存', cacheKey, page != null)
+      post.results = []
+      let hitCount = 0
+      for (const i in indexContent) {
+        const c = indexContent[i]
+        if (!c) {
+          continue
+        }
+        const index = c.toLowerCase().indexOf(keyword.toLowerCase())
+        if (index > -1) {
+          hit = true
+          hitCount += 1
+          post.results.push(c)
+        } else {
+          if ((post.results.length - 1) / hitCount < 3 || i === 0) {
+            post.results.push(c)
+          }
+        }
+      }
+      if (hit) {
+        filterPosts.push(post)
+      }
+    }
+    setFilterPosts(filterPosts)
+  }
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = (val) => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+    <input
+      ref={searchInputRef}
+      type='text'
+      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-900 dark:text-white'}
+      onKeyUp={handleKeyUp}
+      onCompositionStart={lockSearchInput}
+      onCompositionUpdate={lockSearchInput}
+      onCompositionEnd={unLockSearchInput}
+      onChange={e => updateSearchKey(e.target.value)}
+      defaultValue={currentSearch}
+    />
+
+    <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+      onClick={handleSearch}>
+        <i className={'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
+    </div>
+
+    {(showClean &&
+      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
+      </div>
+      )}
+  </div>
+}
+
+export default SearchInput

themes/gitbook/components/SocialButton.js

@@ -0,0 +1,37 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+    </div>
+}
+export default SocialButton

themes/gitbook/components/TagGroups.js

@@ -0,0 +1,27 @@
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tagOptions, currentTag }) => {
+  if (!tagOptions) return <></>
+  return (
+    <div id='tags-group' className='dark:border-gray-600 py-4'>
+      <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
+      <div className='space-y-2'>
+        {
+          tagOptions?.map(tag => {
+            const selected = tag.name === currentTag
+            return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+          })
+        }
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups

themes/gitbook/components/TagItemMini.js

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return (
+    <Link
+      key={tag}
+      href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
+      passHref
+      className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+        mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
+         ${selected
+        ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
+        : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}` }>
+
+      <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+
+    </Link>
+  )
+}
+
+export default TagItemMini

themes/gitbook/components/TocDrawer.js

@@ -0,0 +1,34 @@
+import Catalog from './Catalog'
+import { useMediumGlobal } from '../LayoutBase'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawer = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return <>
+    <div id='medium-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 p-3'>
+             <Catalog post={post}/>
+           </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} />
+  </>
+}
+export default TocDrawer

themes/gitbook/components/TopNavBar.js

@@ -0,0 +1,78 @@
+import LogoBar from './LogoBar'
+import { useRef, useState } from 'react'
+import Collapse from '@/components/Collapse'
+import { MenuBarMobile } from './MenuBarMobile'
+import { useGlobal } from '@/lib/global'
+import CONFIG_GITBOOK from '../config_gitbook'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+import DarkModeButton from '@/components/DarkModeButton'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function TopNavBar(props) {
+  const { className, customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_GITBOOK.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_GITBOOK.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_GITBOOK.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_GITBOOK.MENU_SEARCH }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <div id='top-nav' className={'fixed top-0 w-full z-40 ' + className}>
+
+            {/* 移动端折叠菜单 */}
+            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
+                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+                    <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
+                </div>
+            </Collapse>
+
+            {/* 导航栏菜单 */}
+            <div className='flex w-full h-12 shadow 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 text-sm space-x-4 font-serif dark:text-gray-200'>
+                    <DarkModeButton className='text-sm flex items-center h-full' />
+
+                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                    </div>
+                </div>
+
+                {/* 桌面端顶部菜单 */}
+                <div className='hidden md:flex'>
+                    {links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                    <DarkModeButton className='text-sm flex items-center h-full' />
+                </div>
+            </div>
+        </div>
+  )
+}

themes/gitbook/config_gitbook.js

@@ -0,0 +1,15 @@
+const CONFIG_GITBOOK = {
+
+  INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
+
+  // 菜单
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  // Widget
+  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  WIDGET_TO_TOP: true // 跳回顶部
+}
+export default CONFIG_GITBOOK

themes/gitbook/index.js

@@ -0,0 +1,25 @@
+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'
+
+export {
+  CONFIG_GITBOOK as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}

themes/medium/LayoutBase.js

@@ -12,6 +12,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
+import Announcement from './components/Announcement'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -21,7 +22,7 @@ const ThemeGlobalMedium = createContext()
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo } = props
+  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
@@ -43,7 +44,7 @@ const LayoutBase = props => {
                     {/* 桌面端左侧菜单 */}
                     {/* <LeftMenuBar/> */}
 
-                    <div id='container-inner' className='w-full relative z-10'>
+                    <div id='container-wrapper' className='w-full relative z-10'>
                         {/* 顶部导航栏 */}
                         <TopNavBar {...props} />
 
@@ -78,6 +79,7 @@ const LayoutBase = props => {
                                     {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
                                 </div>
                             </Tabs>
+                            <Announcement post={notice}/>
                             <Live2D />
                         </div>
                     </div>

themes/medium/LayoutSlug.js

@@ -24,12 +24,11 @@ export const LayoutSlug = props => {
     locale.LOCALE
   )
   if (!post) {
-    return <LayoutBase {...props} showInfoCard={true}
-        />
+    return <LayoutBase {...props} showInfoCard={true} />
   }
 
-  const slotRight = post?.toc && post?.toc?.length > 3 && (
-        <div key={locale.COMMON.TABLE_OF_CONTENTS} >
+  const slotRight = post?.toc && post?.toc?.length >= 3 && (
+      <div key={locale.COMMON.TABLE_OF_CONTENTS} >
             <Catalog toc={post.toc} />
             {/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
         </div>

themes/medium/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+//   const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/medium/components/MenuItemDrop.js

@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
   return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
 
         {hasSubMenu &&
-            <div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            <div className={'px-3 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}
@@ -27,7 +27,7 @@ export const MenuItemDrop = ({ link }) => {
         }
 
         {!hasSubMenu &&
-            <div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            <div className={'px-3 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')}>
                 <Link href={link?.to}>
                     {link?.icon && <i className={link?.icon} />} {link?.name}

themes/theme.js

@@ -8,7 +8,7 @@ import * as ThemeComponents from '@theme-components'
  * 所有主题枚举
  */
 export const ALL_THEME = [
-  'hexo', 'matery', 'next', 'medium', 'fukasawa', 'nobelium', 'example', 'simple'
+  'hexo', 'matery', 'next', 'medium', 'fukasawa', 'nobelium', 'example', 'simple', 'gitbook'
 ]
 
 /**