}
export default DarkModeButton
diff --git a/lib/global.js b/lib/global.js
index 599a14cb..a6e45b3f 100644
--- a/lib/global.js
+++ b/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
}}>
-
{children}
)
diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js
index 977193b2..f2550855 100644
--- a/lib/notion/getNotionData.js
+++ b/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,
diff --git a/package.json b/package.json
index a916caa3..1551bc82 100644
--- a/package.json
+++ b/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": {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index f28b0a42..511ca761 100644
--- a/pages/[...slug].js
+++ b/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
}
@@ -124,6 +122,7 @@ export async function getStaticProps({ params: { slug } }) {
// 无法获取文章
if (!props?.post) {
+ props.post = null
return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
}
diff --git a/styles/notion.css b/styles/notion.css
index c309b68b..746189ec 100644
--- a/styles/notion.css
+++ b/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 {
diff --git a/themes/gitbook/Layout404.js b/themes/gitbook/Layout404.js
new file mode 100644
index 00000000..68b656cc
--- /dev/null
+++ b/themes/gitbook/Layout404.js
@@ -0,0 +1,9 @@
+import LayoutBase from './LayoutBase'
+
+export const Layout404 = props => {
+ return
+ 404 Not found.
+
+}
+
+export default Layout404
diff --git a/themes/gitbook/LayoutArchive.js b/themes/gitbook/LayoutArchive.js
new file mode 100644
index 00000000..101b7119
--- /dev/null
+++ b/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 (
+
+
+ {Object.keys(archivePosts)?.map(archiveTitle => (
+
+ ))}
+
+ {/* 顶部导航栏 */}
+
+
+
+
+ {/* 左侧推拉抽屉 */}
+
+
+ {slotLeft}
+
+
+
+ {/* 所有文章列表 */}
+
+
+
+
+
+
+ {slotTop}
+
+ {onLoading ? LoadingCover : children}
+
+ {/* 回顶按钮 */}
+
+ { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+
+
+
+ {/* 底部 */}
+
+
+
+
+
+
+
+ {slotRight}
+ {router.route === '/' && <>
+
+ {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' &&
}
+
+ }
+ {/* gitbook主题首页只显示公告 */}
+
+
+
+
+
+
+
+
+ {/* 移动端底部导航栏 */}
+
+
+
+ {locale.COMMON.CATEGORY}:
+
+
+ {categoryOptions?.map(category => {
+ return (
+
+
+ {category.name}({category.count})
+
+
+ )
+ })}
+
+
配置有误
请在您的notion中添加一个slug为${CONFIG_GITBOOK.INDEX_PAGE}的文章
`
+ containerInner.insertAdjacentHTML('afterbegin', newHTML)
+ }
+ }
+ }, 7 * 1000)
+ })
+ }, [])
+ return
+
+}
+
+export default LayoutIndex
diff --git a/themes/gitbook/LayoutPage.js b/themes/gitbook/LayoutPage.js
new file mode 100644
index 00000000..563df90b
--- /dev/null
+++ b/themes/gitbook/LayoutPage.js
@@ -0,0 +1,10 @@
+import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
+
+export const LayoutPage = (props) => {
+ return
+
+
+}
+
+export default LayoutPage
diff --git a/themes/gitbook/LayoutSearch.js b/themes/gitbook/LayoutSearch.js
new file mode 100644
index 00000000..eaecbd84
--- /dev/null
+++ b/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
+
+
+
{locale.NAV.SEARCH}
+
+
+ {!currentSearch && <>
+
+
+ }
+
+
+ {BLOG.POST_LIST_STYLE === 'page' ? : }
+
}
+
+}
+
+export default LayoutSearch
diff --git a/themes/gitbook/LayoutSlug.js b/themes/gitbook/LayoutSlug.js
new file mode 100644
index 00000000..b33d9b61
--- /dev/null
+++ b/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 (
+
+ {/* 文章锁 */}
+ {lock && }
+
+ {!lock &&
+
+ {/* title */}
+
{post?.title}
+
+ {/* Notion文章主体 */}
+ {post && (
)}
+
+
+
+ {/* 分享 */}
+
+ {/* 文章分类和标签信息 */}
+
+ {CONFIG_GITBOOK.POST_DETAIL_CATEGORY && post?.category &&
}
+
+ {CONFIG_GITBOOK.POST_DETAIL_TAG && post?.tagItems?.map(tag => )}
+
+
+
+
+
+
+
+ {locale.COMMON.TAGS}:
+
+
+
+
+ {/* {locale.COMMON.ANNOUNCEMENT}
*/}
+ {notice && (
+
+
)}
+
+
+
+ Last update: { post.date?.start_date}
+
+}
diff --git a/themes/gitbook/components/ArticleLock.js b/themes/gitbook/components/ArticleLock.js
new file mode 100644
index 00000000..4ba5a3b9
--- /dev/null
+++ b/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 = `${locale.COMMON.PASSWORD_ERROR}
`
+ }
+ }
+ }
+
+ const passwordInputRef = useRef(null)
+ useEffect(() => {
+ // 选中密码输入框并将其聚焦
+ passwordInputRef.current.focus()
+ }, [])
+
+ return
+
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
+
{
+ 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'>
+
+
+ {locale.COMMON.SUBMIT}
+
+
+
+
+
+
+
+
+
+ {post.title}
+
+
+
+
+
+
没有找到文章 {(currentSearch &&
{currentSearch}
)}
+
+
+ {/* 文章列表 */}
+ {posts?.map(post => (
+
+ ))}
+
+
+
+ {/* 文章列表 */}
+ {filteredPosts?.map((group, index) => {
+ if (group.category) {
+ return
+
{group.category}
+ {group.items?.map(post => (
))}
+
+ } else {
+ return
{group.items?.map(post => ())}
+ }
+ })}
+
+
+
+
+
+
+
+
+ {showTocBotton &&
+
+
}
+ {!showTocBotton &&
+
+
+
+ }
+
+
+ <>{headerSlot}
+
+
+}
+export default Card
diff --git a/themes/gitbook/components/Catalog.js b/themes/gitbook/components/Catalog.js
new file mode 100644
index 00000000..a8f01fcf
--- /dev/null
+++ b/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 <>
+
+
+
+
分类
+
+ {categoryOptions?.map(category => {
+ const selected = currentCategory === category.name
+ return
+ })}
+
+
{category} {categoryCount && `(${categoryCount})`}
+
+
+
+ );
+}
diff --git a/themes/gitbook/components/Footer.js b/themes/gitbook/components/Footer.js
new file mode 100644
index 00000000..744f9e61
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default Footer
diff --git a/themes/gitbook/components/InfoCard.js b/themes/gitbook/components/InfoCard.js
new file mode 100644
index 00000000..a18408dc
--- /dev/null
+++ b/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
+
+
{ Router.push('/about') }}>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
{BLOG.AUTHOR}
+
{BLOG.BIO}
+
+
+
window.scrollTo({ top: 0, behavior: 'smooth' })} >
+
+
+
+ {showPercent && (
{percent}%
)}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
{siteInfo?.title}
+
+
+
+ {!hasSubMenu &&
+
+ }
+
+ {hasSubMenu &&
}
+
+
+ {link?.icon && } {link?.name}
+ {hasSubMenu && }
+
+
+
+ {link?.icon && } {link?.name}
+
+
+ }
+
+ {/* 子菜单 */}
+ {hasSubMenu &&
+ {link?.subMenus?.map(sLink => {
+ return -
+
+ {link?.icon && }{sLink.title}
+
+
+ })}
+
}
+
+
+}
diff --git a/themes/gitbook/components/MenuItemMobileNormal.js b/themes/gitbook/components/MenuItemMobileNormal.js
new file mode 100644
index 00000000..17f0d151
--- /dev/null
+++ b/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.slot}
+
+
+}
diff --git a/themes/gitbook/components/MenuItemPCNormal.js b/themes/gitbook/components/MenuItemPCNormal.js
new file mode 100644
index 00000000..809ae974
--- /dev/null
+++ b/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.slot}
+
+}
diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js
new file mode 100644
index 00000000..062629cc
--- /dev/null
+++ b/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 <>
+
+ {/* 背景蒙版 */}
+
+
+}
+export default PageNavDrawer
diff --git a/themes/gitbook/components/PaginationSimple.js b/themes/gitbook/components/PaginationSimple.js
new file mode 100644
index 00000000..b48259ea
--- /dev/null
+++ b/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 (
+
+
+ ←{locale.PAGINATION.PREV}
+
+
+
+
+ {locale.PAGINATION.NEXT}→
+
+
+ )
+}
+
+export default PaginationSimple
diff --git a/themes/gitbook/components/Progress.js b/themes/gitbook/components/Progress.js
new file mode 100644
index 00000000..48ba8e14
--- /dev/null
+++ b/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 (
+
+
+ {showPercent && (
+
{percent}%
+ )}
+
+
+
updateSearchKey(e.target.value)}
+ defaultValue={currentSearch}
+ />
+
+
+
+
+
+ {(showClean &&
+
+
+
+ )}
+
+ {BLOG.CONTACT_GITHUB &&
+
+ }
+ {BLOG.CONTACT_TWITTER &&
+
+ }
+ {BLOG.CONTACT_TELEGRAM &&
+
+ }
+ {BLOG.CONTACT_LINKEDIN &&
+
+ }
+ {BLOG.CONTACT_WEIBO &&
+
+ }
+ {BLOG.CONTACT_INSTAGRAM &&
+
+ }
+ {BLOG.CONTACT_EMAIL &&
+
+ }
+ {BLOG.ENABLE_RSS &&
+
+ }
+
{selected && } {tag.name + (tag.count ? `(${tag.count})` : '')}
+
+
+ )
+}
+
+export default TagItemMini
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
new file mode 100644
index 00000000..b58adb44
--- /dev/null
+++ b/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 <>
+
+ {/* 侧边菜单 */}
+
+ {post && <>
+
+
+
+ }
+
+
+
+ {/* 移动端折叠菜单 */}
+
+
+ collapseRef.current?.updateCollapseHeight(param)} />
+
+
+
+ {/* 导航栏菜单 */}
+
+
+ {/* 左侧图标Logo */}
+
+
+ {/* 折叠按钮、仅移动端显示 */}
+
+
+
+
+ {isOpen ? : }
+
+
+
+ {/* 桌面端顶部菜单 */}
+
+ {links && links?.map(link => )}
+
+
+
+
+
{/* 顶部导航栏 */}
@@ -78,6 +79,7 @@ const LayoutBase = props => {
{CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && }
+