diff --git a/pages/[prefix]/[slug]/[...suffix].js b/pages/[prefix]/[slug]/[...suffix].js index d9567c4c..90ca5a15 100644 --- a/pages/[prefix]/[slug]/[...suffix].js +++ b/pages/[prefix]/[slug]/[...suffix].js @@ -1,6 +1,7 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' +import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' import { checkSlugHasMorThanTwoSlash, getRecommendPost } from '@/lib/utils/post' import { idToUuid } from 'notion-utils' @@ -97,6 +98,15 @@ export async function getStaticProps({ if (!props?.post?.blockMap) { props.post.blockMap = await getPostBlocks(props.post.id, from) } + + // 目录默认加载 + if (props.post?.blockMap?.block) { + props.post.content = Object.keys(props.post.blockMap.block).filter( + key => props.post.blockMap.block[key]?.value?.parent_id === props.post.id + ) + props.post.toc = getPageTableOfContents(props.post, props.post.blockMap) + } + // 生成全文索引 && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA) if (BLOG.ALGOLIA_APP_ID) { uploadDataToAlgolia(props?.post) diff --git a/pages/[prefix]/[slug]/index.js b/pages/[prefix]/[slug]/index.js index 6b50c206..cdf99afc 100644 --- a/pages/[prefix]/[slug]/index.js +++ b/pages/[prefix]/[slug]/index.js @@ -1,6 +1,7 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' +import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' import { checkSlugHasOneSlash, getRecommendPost } from '@/lib/utils/post' import { idToUuid } from 'notion-utils' @@ -86,6 +87,15 @@ export async function getStaticProps({ params: { prefix, slug }, locale }) { if (!props?.post?.blockMap) { props.post.blockMap = await getPostBlocks(props.post.id, from) } + + // 目录默认加载 + if (props.post?.blockMap?.block) { + props.post.content = Object.keys(props.post.blockMap.block).filter( + key => props.post.blockMap.block[key]?.value?.parent_id === props.post.id + ) + props.post.toc = getPageTableOfContents(props.post, props.post.blockMap) + } + // 生成全文索引 && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA) if (BLOG.ALGOLIA_APP_ID) { uploadDataToAlgolia(props?.post) diff --git a/pages/[prefix]/index.js b/pages/[prefix]/index.js index 2bb175b6..bcb4fb03 100644 --- a/pages/[prefix]/index.js +++ b/pages/[prefix]/index.js @@ -55,12 +55,6 @@ const Slug = props => { 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) - } } // 读取上次记录 自动提交密码 @@ -171,6 +165,14 @@ export async function getStaticProps({ params: { prefix }, locale }) { props.post.blockMap = await getPostBlocks(props.post.id, from) } + // 目录默认加载 + if (props.post?.blockMap?.block) { + props.post.content = Object.keys(props.post.blockMap.block).filter( + key => props.post.blockMap.block[key]?.value?.parent_id === props.post.id + ) + props.post.toc = getPageTableOfContents(props.post, props.post.blockMap) + } + // 生成全文索引 && process.env.npm_lifecycle_event === 'build' && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA) if (BLOG.ALGOLIA_APP_ID) { uploadDataToAlgolia(props?.post) diff --git a/themes/magzine/components/Catalog.js b/themes/magzine/components/Catalog.js index a03e1d80..5383d740 100644 --- a/themes/magzine/components/Catalog.js +++ b/themes/magzine/components/Catalog.js @@ -1,6 +1,6 @@ import throttle from 'lodash.throttle' import { uuidToId } from 'notion-utils' -import { useCallback, useEffect, useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import Progress from './Progress' /** @@ -9,7 +9,7 @@ import Progress from './Progress' * @returns {JSX.Element} * @constructor */ -const Catalog = ({ toc, className }) => { +const Catalog = ({ post, toc, className }) => { const tocIds = [] // 目录自动滚动 @@ -19,43 +19,45 @@ const Catalog = ({ toc, className }) => { // 监听滚动事件 useEffect(() => { - window.addEventListener('scroll', actionSectionScrollSpy) - actionSectionScrollSpy() + if (toc && toc.length > 1) { + actionSectionScrollSpy() + window.addEventListener('scroll', actionSectionScrollSpy) + } + setTimeout(() => { + console.log('目录', post, toc) + }, 1000) 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 + const actionSectionScrollSpy = 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') } - setActiveSection(currentSectionId) - const index = tocIds.indexOf(currentSectionId) || 0 - tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' }) - console.log(tRef?.current) - }, throttleMs) - ) + 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) { @@ -68,10 +70,10 @@ const Catalog = ({ toc, className }) => {