diff --git a/components/Comment.js b/components/Comment.js index 42b69f9e..411ad58a 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -1,7 +1,7 @@ import BLOG from '@/blog.config' import dynamic from 'next/dynamic' import Tabs from '@/components/Tabs' -import { useEffect } from 'react' +import { isBrowser } from '@/lib/utils' import { useRouter } from 'next/router' const WalineComponent = dynamic( @@ -57,17 +57,13 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), { const Comment = ({ frontMatter }) => { const router = useRouter() - useEffect(() => { - // 跳转到评论区 + if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) { setTimeout(() => { - if (window.location.href.indexOf('target=comment') > -1) { - const url = router.asPath.replace('?target=comment', '') - history.replaceState({}, '', url) - const commentNode = document.getElementById('comment') - commentNode.scrollIntoView({ block: 'start', behavior: 'smooth' }) - } - }, 200) - }, []) + const url = router.asPath.replace('?target=comment', '') + history.replaceState({}, '', url) + document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' }) + }, 1000) + } if (!frontMatter) { return <>Loading... @@ -75,42 +71,42 @@ const Comment = ({ frontMatter }) => { return (
- + - { BLOG.COMMENT_TWIKOO_ENV_ID && (
- -
)} + {BLOG.COMMENT_TWIKOO_ENV_ID && (
+ +
)} - { BLOG.COMMENT_WALINE_SERVER_URL && (
- -
) } + {BLOG.COMMENT_WALINE_SERVER_URL && (
+ +
)} - {BLOG.COMMENT_VALINE_APP_ID && (
- -
)} + {BLOG.COMMENT_VALINE_APP_ID && (
+ +
)} - {BLOG.COMMENT_GISCUS_REPO && ( -
- -
- )} + {BLOG.COMMENT_GISCUS_REPO && ( +
+ +
+ )} - {BLOG.COMMENT_CUSDIS_APP_ID && (
- -
)} + {BLOG.COMMENT_CUSDIS_APP_ID && (
+ +
)} - {BLOG.COMMENT_UTTERRANCES_REPO && (
- -
)} + {BLOG.COMMENT_UTTERRANCES_REPO && (
+ +
)} - {BLOG.COMMENT_GITALK_CLIENT_ID && (
- -
)} + {BLOG.COMMENT_GITALK_CLIENT_ID && (
+ +
)} - {BLOG.COMMENT_WEBMENTION.ENABLE && (
- -
)} -
+ {BLOG.COMMENT_WEBMENTION.ENABLE && (
+ +
)} +
) } diff --git a/components/NotionPage.js b/components/NotionPage.js index 07e62f4f..e389468f 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -47,16 +47,8 @@ const Tweet = ({ id }) => { } const NotionPage = ({ post, className }) => { - // 滚动到评论区 useEffect(() => { - setTimeout(() => { - if (window.location.hash) { - const tocNode = document.getElementById(window.location.hash.substring(1)) - if (tocNode && tocNode?.className?.indexOf('notion') > -1) { - tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' }) - } - } - }, 180) + autoScrollToTarget() }, []) if (!post || !post.blockMap) { @@ -82,6 +74,22 @@ const NotionPage = ({ post, className }) => { } +/** + * 根据url参数自动滚动到指定区域 + */ +const autoScrollToTarget = () => { + setTimeout(() => { + // 跳转到指定标题 + const needToJumpToTitle = window.location.hash + if (needToJumpToTitle) { + const tocNode = document.getElementById(window.location.hash.substring(1)) + if (tocNode && tocNode?.className?.indexOf('notion') > -1) { + tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' }) + } + } + }, 180) +} + /** * 将id映射成博文内部链接。 * @param {*} id diff --git a/components/PrismMac.js b/components/PrismMac.js index ee531070..1d2cddc3 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -21,7 +21,6 @@ import { useRouter } from 'next/navigation' const PrismMac = () => { const router = useRouter() useEffect(() => { - console.log('渲染Code') if (BLOG.CODE_MAC_BAR) { loadExternalResource('/css/prism-mac-style.css', 'css') }