From 6e6d8eef507714153445bc2f81ee46ce638e30f9 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 26 Sep 2024 16:59:50 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E9=94=81bug=EF=BC=8Ccatalog-?= =?UTF-8?q?item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/OpenWrite.js | 4 +- themes/commerce/components/Catalog.js | 120 ++++++++++++++------------ themes/example/components/Catalog.js | 2 +- themes/fukasawa/components/Catalog.js | 2 +- themes/gitbook/components/Catalog.js | 2 +- themes/heo/components/Catalog.js | 114 +++++++++++++----------- themes/hexo/components/Catalog.js | 2 +- themes/magzine/components/Catalog.js | 2 +- themes/matery/components/Catalog.js | 120 ++++++++++++++------------ themes/medium/components/Catalog.js | 112 +++++++++++++----------- themes/nav/components/Catalog.js | 118 +++++++++++++------------ themes/next/components/Toc.js | 2 +- themes/nobelium/components/Catalog.js | 2 +- themes/simple/components/Catalog.js | 2 +- 14 files changed, 326 insertions(+), 278 deletions(-) diff --git a/components/OpenWrite.js b/components/OpenWrite.js index ab0d9a2a..a219830d 100644 --- a/components/OpenWrite.js +++ b/components/OpenWrite.js @@ -101,14 +101,14 @@ const OpenWrite = () => { } }, [isLoaded, router]) - // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .notion-table-of-contents-item 对象都禁止点击 + // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .catalog-item 对象都禁止点击 return <> } // 定义禁用和恢复目录项点击的函数 const toggleTocItems = disable => { - const tocItems = document.querySelectorAll('a.notion-table-of-contents-item') + const tocItems = document.querySelectorAll('a.catalog-item') tocItems.forEach(item => { if (disable) { item.style.pointerEvents = 'none' diff --git a/themes/commerce/components/Catalog.js b/themes/commerce/components/Catalog.js index 049c55b9..1608f5fc 100644 --- a/themes/commerce/components/Catalog.js +++ b/themes/commerce/components/Catalog.js @@ -1,8 +1,8 @@ -import { useCallback, useEffect, useRef, useState } from 'react' +import { useGlobal } from '@/lib/global' import throttle from 'lodash.throttle' import { uuidToId } from 'notion-utils' +import { useCallback, useEffect, useRef, useState } from 'react' import Progress from './Progress' -import { useGlobal } from '@/lib/global' /** * 目录导航组件 @@ -29,67 +29,77 @@ const Catalog = ({ 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
-
{locale.COMMON.TABLE_OF_CONTENTS}
-
- + return ( +
+
+ + {locale.COMMON.TABLE_OF_CONTENTS} +
+
+ +
+
+ +
-
- - -
-
+ ) } export default Catalog diff --git a/themes/example/components/Catalog.js b/themes/example/components/Catalog.js index 161a6cae..5f546b89 100644 --- a/themes/example/components/Catalog.js +++ b/themes/example/components/Catalog.js @@ -73,7 +73,7 @@ const Catalog = ({ toc }) => { key={id} href={`#${id}`} className={`notion-table-of-contents-item duration-300 transform font-light - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { key={id} href={`#${id}`} className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { href={`#${id}`} // notion-table-of-contents-item className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { // 同步选中目录事件 const [activeSection, setActiveSection] = useState(null) - 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' }) - }, 200)) + setActiveSection(currentSectionId) + const index = tocIds.indexOf(currentSectionId) || 0 + tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' }) + }, 200) + ) // 无目录就直接返回空 if (!toc || toc.length < 1) { return <> } - return
-
{locale.COMMON.TABLE_OF_CONTENTS}
-
- - + return ( +
+
+ + {locale.COMMON.TABLE_OF_CONTENTS} +
+
+ +
-
+ ) } export default Catalog diff --git a/themes/hexo/components/Catalog.js b/themes/hexo/components/Catalog.js index 33111801..b6dc0b9f 100644 --- a/themes/hexo/components/Catalog.js +++ b/themes/hexo/components/Catalog.js @@ -84,7 +84,7 @@ const Catalog = ({ toc }) => { key={id} href={`#${id}`} className={`${activeSection === id && 'dark:border-white border-indigo-800 text-indigo-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-indigo-800 border-lduration-300 transform dark:text-indigo-400 dark:border-indigo-400 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { key={id} href={`#${id}`} className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { // 同步选中目录事件 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
-
{locale.COMMON.TABLE_OF_CONTENTS}
-
- + return ( +
+
+ + {locale.COMMON.TABLE_OF_CONTENTS} +
+
+ +
+
+ +
-
- - -
-
+ ) } export default Catalog diff --git a/themes/medium/components/Catalog.js b/themes/medium/components/Catalog.js index cdb65fe4..cb19ae91 100644 --- a/themes/medium/components/Catalog.js +++ b/themes/medium/components/Catalog.js @@ -1,6 +1,6 @@ -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' /** @@ -27,65 +27,73 @@ const Catalog = ({ toc }) => { }, []) 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 Catalog diff --git a/themes/nav/components/Catalog.js b/themes/nav/components/Catalog.js index cf8e606f..70f6f771 100755 --- a/themes/nav/components/Catalog.js +++ b/themes/nav/components/Catalog.js @@ -1,7 +1,7 @@ -import { useCallback, useEffect, useState } from 'react' +import { isBrowser } from '@/lib/utils' import throttle from 'lodash.throttle' import { uuidToId } from 'notion-utils' -import { isBrowser } from '@/lib/utils' +import { useCallback, useEffect, useState } from 'react' /** * 目录导航组件 @@ -24,66 +24,76 @@ const Catalog = ({ post }) => { }, [post]) const throttleMs = 200 - const actionSectionScrollSpy = useCallback(throttle(() => { - const sections = document.getElementsByClassName('notion-h') - let prevBBox = null - let currentSectionId = null - 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 = null + 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 + setActiveSection(currentSectionId) + const tocIds = post?.toc?.map(t => uuidToId(t.id)) || [] + const index = tocIds.indexOf(currentSectionId) || 0 + if (isBrowser && tocIds?.length > 0) { + for (const tocWrapper of document?.getElementsByClassName( + 'toc-wrapper' + )) { + tocWrapper?.scrollTo({ top: 28 * index, behavior: 'smooth' }) + } } - // No need to continue loop, if last element has been detected - break - } - setActiveSection(currentSectionId) - const tocIds = post?.toc?.map((t) => uuidToId(t.id)) || [] - const index = tocIds.indexOf(currentSectionId) || 0 - if (isBrowser && tocIds?.length > 0) { - for (const tocWrapper of document?.getElementsByClassName('toc-wrapper')) { - tocWrapper?.scrollTo({ top: 28 * index, behavior: 'smooth' }) - } - } - }, throttleMs)) + }, throttleMs) + ) // 无目录就直接返回空 if (!toc || toc.length < 1) { return null } - return <> -
- -
- + return ( + <> +
+ +
+ + ) } export default Catalog diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js index 388d3fa1..4316a25e 100644 --- a/themes/next/components/Toc.js +++ b/themes/next/components/Toc.js @@ -77,7 +77,7 @@ const Toc = ({ toc }) => { key={id} href={`#${id}`} className={`notion-table-of-contents-item duration-300 transform font-light - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { key={id} href={`#${id}`} className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}> { key={id} href={`#${id}`} className={`${activeSection === id && 'dark:border-white border-red-700 text-red-700 font-bold'} hover:font-semibold border-l pl-4 block hover:text-red-600 border-lduration-300 transform dark:text-red-400 dark:border-red-400 - notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> + notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>