gitbook 主题框架

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,93 @@
+import CommonHead from '@/components/CommonHead'
+import { useState, createContext, useContext } from 'react'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import CONFIG_MEDIUM from './config_medium'
+import Tabs from '@/components/Tabs'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import BottomMenuBar from './components/BottomMenuBar'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+const ThemeGlobalMedium = createContext()
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta, showInfoCard = true, slotLeft, slotTop, siteInfo } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const [tocVisible, changeTocVisible] = useState(false)
+  const { onLoading } = useGlobal()
+
+  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 }}>
+            <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'>
+
+                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+
+                    {/* 左侧推拉抽屉 */}
+                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <Tabs>
+                                {slotLeft}
+                                <div key={locale.NAV.ABOUT}>
+                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
+                                    {showInfoCard && <InfoCard {...props} />}
+                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                </div>
+                            </Tabs>
+                            <Live2D />
+                        </div>
+                    </div>
+
+                    <div id='container-inner' className='w-full relative z-10'>
+                        {/* 顶部导航栏 */}
+                        <TopNavBar {...props} />
+
+                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+                            {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>
+
+                </main>
+
+                {/* 移动端底部导航栏 */}
+                <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,12 @@
+import BLOG from '@/blog.config'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import LayoutBase from './LayoutBase'
+
+export const LayoutIndex = (props) => {
+  return <LayoutBase {...props}>
+    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...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)
+  })
+  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,97 @@
+import LayoutBase from './LayoutBase'
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import Catalog from './components/Catalog'
+import { ArticleLock } from './components/ArticleLock'
+import formatDate from '@/lib/formatDate'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import NotionPage from '@/components/NotionPage'
+import CONFIG_MEDIUM from './config_medium'
+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, siteInfo, lock, validPassword } = props
+  const { locale } = useGlobal()
+
+  const date = formatDate(
+    post?.date?.start_date || post?.createdTime,
+    locale.LOCALE
+  )
+  if (!post) {
+    return <LayoutBase {...props} showInfoCard={true}
+        />
+  }
+
+  const slotLeft = 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>
+  )
+
+  return (
+        <LayoutBase showInfoCard={true} slotLeft={slotLeft} {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id='container'>
+
+                {/* title */}
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+
+                {/* meta */}
+                <section className="py-2 items-center text-sm  px-1">
+                    <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
+                        <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
+                        <span className='mx-1'>|</span>
+                        <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
+                        <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
+                            <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
+                        </div>
+                    </div>
+                    <Link href="/about" passHref legacyBehavior>
+                        <div className='flex pt-2'>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
+
+                            <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
+                                {BLOG.AUTHOR}
+                            </div>
+                        </div>
+                    </Link>
+                </section>
+
+                {/* Notion文章主体 */}
+                <section id="notion-article" className="px-1 max-w-4xl">
+                    {post && (<NotionPage post={post} />)}
+                </section>
+
+                <section>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
+                        <div>
+                            {CONFIG_MEDIUM.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/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/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,83 @@
+import BLOG from '@/blog.config'
+import NotionPage from '@/components/NotionPage'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import React from 'react'
+import CONFIG_MEDIUM from '../config_medium'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+import TwikooCommentCount from '@/components/TwikooCommentCount'
+
+const BlogPostCard = ({ post, showSummary }) => {
+  const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
+  const { locale } = useGlobal()
+  return (
+        <div
+            key={post.id}
+            data-aos="fade-up"
+            data-aos-duration="300"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-bottom"
+            className="mb-6 max-w-7xl border-b dark:border-gray-800 "
+        >
+
+            <div className="lg:py-8 py-4 flex flex-col w-full">
+                <Link
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    passHref
+                    className={
+                        'cursor-pointer font-bold  hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
+                    }>
+                    <div>
+                        {CONFIG_MEDIUM.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
+                        </div>}
+                        {post.title}
+                    </div>
+
+                </Link>
+
+                <div
+                    className={
+                        'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
+                    }
+                >
+                    <div className="text-sm py-1">{post.date?.start_date}</div>
+                    {CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
+                    {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                    <TwikooCommentCount post={post} className='hover:underline'/>
+                </div>
+
+                <div className="flex"></div>
+
+                {(!showPreview || showSummary) && (
+                    <p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                        {post.summary}
+                    </p>
+                )}
+
+                {showPreview && (
+                    <div className="overflow-ellipsis truncate">
+                        <NotionPage post={post} />
+                        <div className="pointer-events-none border-t pt-8 border-dashed">
+                            <div className="w-full justify-start flex">
+                                <Link
+                                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                    passHref
+                                    className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
+
+                                    {locale.COMMON.ARTICLE_DETAIL}
+                                    <i className="ml-1 fas fa-angle-right" />
+
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </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,106 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch }) => {
+  const postsPerPage = BLOG.POSTS_PER_PAGE
+  const [page, updatePage] = useState(1)
+  let filteredPosts = Object.assign(posts)
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  }
+  const postsToShow = getPostByPage(page, filteredPosts, postsPerPage)
+
+  let hasMore = false
+  if (filteredPosts) {
+    const totalCount = filteredPosts.length
+    hasMore = page * postsPerPage < totalCount
+  }
+
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY + window.outerHeight
+    const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+    if (scrollS > clientHeight + 100) {
+      handleGetMore()
+    }
+  }, 500))
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = useRef(null)
+  const { locale } = useGlobal()
+
+  if (!postsToShow || postsToShow.length === 0) {
+    return <BlogPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div id='container' ref={targetRef} className='w-full'>
+
+      {/* 文章列表 */}
+      <div className='space-y-1 lg:space-y-4'>
+        {postsToShow?.map(post => (
+          <BlogPostCard key={post.id} post={post} showSummary={true} />
+        ))}
+      </div>
+
+      <div>
+        <div onClick={() => {
+          handleGetMore()
+        }}
+          className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200'
+        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
+      </div>
+    </div>
+  }
+}
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param postsPerPage 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, postsPerPage) {
+  return totalPosts.slice(
+    0,
+    postsPerPage * page
+  )
+}
+
+function getSearchKey() {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+
+export default BlogPostListScroll

themes/gitbook/components/BottomMenuBar.js

@@ -0,0 +1,36 @@
+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 } = useMediumGlobal()
+  const showTocBotton = post?.toc?.length > 0
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  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'>
+        <Link href='/search' passHref legacyBehavior>
+          <div className='flex w-full items-center justify-center cursor-pointer'>
+            <i className='fas fa-search'/>
+          </div>
+        </Link>
+        <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,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  const tocIds = []
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  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
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+  }, throttleMs))
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return <div className='px-3'>
+    <div className='w-full mt-2 mb-4'>
+      <Progress />
+    </div>
+    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
+      <nav className='h-full  text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-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-green-500 underline'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  </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,35 @@
+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='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
+    >
+       <DarkModeButton/>
+      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><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/>
+
+      {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>
+        <span className='text-xs font-serif'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
+    </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_MEDIUM from '../config_medium'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  const { locale } = useGlobal()
+  if (!CONFIG_MEDIUM.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,12 @@
+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='text-md md:text-xl dark:text-gray-200'>
+            {siteInfo?.title}
+          </Link>
+    </div>
+  );
+}

themes/gitbook/components/MenuBarMobile.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MEDIUM from '../config_medium'
+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_MEDIUM.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.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-1 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-1 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/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,86 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
+
+const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+
+    if (key && key !== '') {
+      setLoadingState(true)
+      location.href = '/search/' + key
+    } else {
+      router.push({ pathname: '/' }).then(r => {
+      })
+    }
+  }
+  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 ${onLoading ? 'fa-spinner animate-spin' : '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'>
+             <Catalog toc={post.toc}/>
+           </div>
+          </>}
+      </div>
+    </div>
+    {/* 背景蒙版 */}
+    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+         onClick={switchVisible} />
+  </>
+}
+export default TocDrawer

themes/gitbook/components/TopNavBar.js

@@ -0,0 +1,74 @@
+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_MEDIUM from '../config_medium'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @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_MEDIUM.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.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={'sticky top-0 lg:relative 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'>
+                    <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}/>)}
+                </div>
+            </div>
+        </div>
+  )
+}

themes/gitbook/config_medium.js

@@ -0,0 +1,24 @@
+const CONFIG_MEDIUM = {
+
+  // Style
+  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
+
+  POST_LIST_COVER: true, // 文章列表显示图片封面
+  POST_LIST_PREVIEW: true, // 列表显示文章预览
+  POST_LIST_CATEGORY: true, // 列表显示文章分类
+  POST_LIST_TAG: true, // 列表显示文章标签
+
+  POST_DETAIL_CATEGORY: true, // 文章显示分类
+  POST_DETAIL_TAG: true, // 文章显示标签
+
+  // 菜单
+  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_MEDIUM

themes/gitbook/index.js

@@ -0,0 +1,25 @@
+import CONFIG_MEDIUM from './config_medium'
+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_MEDIUM as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategory,
+  LayoutCategoryIndex,
+  LayoutPage,
+  LayoutTag,
+  LayoutTagIndex
+}

themes/medium/LayoutBase.js

@@ -21,7 +21,7 @@ const ThemeGlobalMedium = createContext()
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo } = props
+  const { children, meta, showInfoCard = true, slotLeft, slotTop, siteInfo } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
@@ -71,7 +71,7 @@ const LayoutBase = props => {
                     <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
                         <div className='py-14 px-6 sticky top-0'>
                             <Tabs>
-                                {slotRight}
+                                {slotLeft}
                                 <div key={locale.NAV.ABOUT}>
                                     {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
                                     {showInfoCard && <InfoCard {...props} />}

themes/medium/LayoutSlug.js

@@ -28,7 +28,7 @@ export const LayoutSlug = props => {
         />
   }
 
-  const slotRight = post?.toc && post?.toc?.length > 3 && (
+  const slotLeft = 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' /> */}
@@ -36,7 +36,7 @@ export const LayoutSlug = props => {
   )
 
   return (
-        <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
+        <LayoutBase showInfoCard={true} slotLeft={slotLeft} {...props} >
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 

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'
 ]
 
 /**