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 (
)
}
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')
}