{showPercent && (
{percent}%
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index 435679fd..388d3fa1 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
import Progress from './Progress'
/**
- * 目录导航组件
+ * 目录导航组件 Table of Contents
* @param toc
* @returns {JSX.Element}
* @constructor
@@ -26,63 +26,73 @@ const Toc = ({ toc }) => {
// 同步选中目录事件
const [activeSection, setActiveSection] = useState(null)
const throttleMs = 200
- const actionSectionScrollSpy = useCallback(throttle(() => {
- const sections = document.getElementsByClassName('notion-h')
- let prevBBox = null
- let currentSectionId = activeSection
- for (let i = 0; i < sections.length; ++i) {
- const section = sections[i]
- if (!section || !(section instanceof Element)) continue
- if (!currentSectionId) {
- currentSectionId = section.getAttribute('data-id')
+ const actionSectionScrollSpy = useCallback(
+ throttle(() => {
+ const sections = document.getElementsByClassName('notion-h')
+ let prevBBox = null
+ let currentSectionId = activeSection
+ for (let i = 0; i < sections.length; ++i) {
+ const section = sections[i]
+ if (!section || !(section instanceof Element)) continue
+ if (!currentSectionId) {
+ currentSectionId = section.getAttribute('data-id')
+ }
+ const bbox = section.getBoundingClientRect()
+ const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+ const offset = Math.max(150, prevHeight / 4)
+ // GetBoundingClientRect returns values relative to viewport
+ if (bbox.top - offset < 0) {
+ currentSectionId = section.getAttribute('data-id')
+ prevBBox = bbox
+ continue
+ }
+ // No need to continue loop, if last element has been detected
+ break
}
- const bbox = section.getBoundingClientRect()
- const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
- const offset = Math.max(150, prevHeight / 4)
- // GetBoundingClientRect returns values relative to viewport
- if (bbox.top - offset < 0) {
- currentSectionId = section.getAttribute('data-id')
- prevBBox = bbox
- continue
- }
- // No need to continue loop, if last element has been detected
- break
- }
- setActiveSection(currentSectionId)
- const index = tocIds.indexOf(currentSectionId) || 0
- tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
- }, throttleMs))
+ setActiveSection(currentSectionId)
+ const index = tocIds.indexOf(currentSectionId) || 0
+ tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+ }, throttleMs)
+ )
// 无目录就直接返回空
if (!toc || toc.length < 1) {
return <>
}
- return
-
-
+ return (
+
+
+
+
+
-
-
-
-
+ )
}
export default Toc
diff --git a/themes/nobelium/components/Catalog.js b/themes/nobelium/components/Catalog.js
new file mode 100644
index 00000000..db881e93
--- /dev/null
+++ b/themes/nobelium/components/Catalog.js
@@ -0,0 +1,96 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+ // 监听滚动事件
+ useEffect(() => {
+ window.addEventListener('scroll', actionSectionScrollSpy)
+ actionSectionScrollSpy()
+ return () => {
+ window.removeEventListener('scroll', actionSectionScrollSpy)
+ }
+ }, [])
+
+ // 目录自动滚动
+ const tRef = useRef(null)
+ const tocIds = []
+
+ // 同步选中目录事件
+ const [activeSection, setActiveSection] = useState(null)
+ const throttleMs = 200
+ const actionSectionScrollSpy = useCallback(
+ throttle(() => {
+ const sections = document.getElementsByClassName('notion-h')
+ let prevBBox = null
+ let currentSectionId = activeSection
+ for (let i = 0; i < sections.length; ++i) {
+ const section = sections[i]
+ if (!section || !(section instanceof Element)) continue
+ if (!currentSectionId) {
+ currentSectionId = section.getAttribute('data-id')
+ }
+ const 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 (
+
+
+
+
+
+
+
+ )
+}
+
+export default Catalog
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index 015c899a..112b8f1a 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -167,7 +167,7 @@ const NavBar = props => {
{siteConfig('NOBELIUM_MENU_DARKMODE_BUTTON') && (
-
+
)}
{siteConfig('NOBELIUM_MENU_RANDOM_POST') && (
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
index 08186a47..ed2b6ea6 100644
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -19,6 +19,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
import BlogListBar from './components/BlogListBar'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
+import Catalog from './components/Catalog'
import { Footer } from './components/Footer'
import JumpToTopButton from './components/JumpToTopButton'
import Nav from './components/Nav'
@@ -78,6 +79,7 @@ const LayoutBase = props => {
{/* 顶部插槽 */}
{topSlot}
{children}
+ {post &&
}
diff --git a/themes/simple/components/Catalog.js b/themes/simple/components/Catalog.js
index 928c3af8..0c4a04fe 100644
--- a/themes/simple/components/Catalog.js
+++ b/themes/simple/components/Catalog.js
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useEffect, useRef, useState } from 'react'
/**
* 目录导航组件
@@ -40,7 +40,9 @@ const Catalog = ({ post }) => {
break
}
setActiveSection(currentSectionId)
- const index = post?.toc?.findIndex(obj => uuidToId(obj.id) === currentSectionId)
+ const index = post?.toc?.findIndex(
+ obj => uuidToId(obj.id) === currentSectionId
+ )
tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
}, throttleMs)
@@ -56,34 +58,40 @@ const Catalog = ({ post }) => {
return <>
}
- return
-
- {locale.COMMON.TABLE_OF_CONTENTS}
-
+ return (
+
+
+
+ {locale.COMMON.TABLE_OF_CONTENTS}
+
-
-
-
-
+
+
+
+ )
}
export default Catalog