diff --git a/components/Comment.js b/components/Comment.js index 20e1b119..d362e047 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -3,6 +3,7 @@ import dynamic from 'next/dynamic' import Tabs from '@/components/Tabs' import { useGlobal } from '@/lib/global' import React from 'react' +import { useRouter } from 'next/router' const WalineComponent = dynamic( () => { @@ -46,11 +47,14 @@ const Comment = ({ frontMatter }) => { return <>Loading... } const { isDarkMode } = useGlobal() + const router = useRouter() - // 需要跳转到评论区域 React.useEffect(() => { + // 跳转到评论区 setTimeout(() => { - if (window.location.hash) { + 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' }) } diff --git a/components/NotionPage.js b/components/NotionPage.js index a0db74fe..61b7fc56 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -37,24 +37,34 @@ const NotionPage = ({ post }) => { const zoomRef = React.useRef(zoom ? zoom.clone() : null) React.useEffect(() => { - addWatch4Dom() - }, []) - setTimeout(() => { - if (isBrowser()) { - // 将相册gallery下的图片加入放大功能 - const imgList = document.querySelectorAll('.notion-collection-card-cover img') - if (imgList && zoomRef.current) { - for (let i = 0; i < imgList.length; i++) { - (zoomRef.current).attach(imgList[i]) + 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) - const cards = document.getElementsByClassName('notion-collection-card') - for (const e of cards) { - e.removeAttribute('href') + setTimeout(() => { + if (isBrowser()) { + // 将相册gallery下的图片加入放大功能 + const imgList = document.querySelectorAll('.notion-collection-card-cover img') + if (imgList && zoomRef.current) { + for (let i = 0; i < imgList.length; i++) { + (zoomRef.current).attach(imgList[i]) + } + } + + const cards = document.getElementsByClassName('notion-collection-card') + for (const e of cards) { + e.removeAttribute('href') + } } - } - }, 800) + }, 800) + + addWatch4Dom() + }, []) return
{ const type = mutation.type if (type === 'childList') { const anchorElement = document.getElementById(anchor.substring(1)) - if (anchorElement) { + if (anchorElement && anchorElement.className === 'wl-item') { anchorElement.scrollIntoView({ block: 'end', behavior: 'smooth' }) setTimeout(() => { anchorElement.classList.add('animate__animated') - anchorElement.classList.add('animate__bounceIn') + anchorElement.classList.add('animate__bounceInRight') observer.disconnect() }, 300) } diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js index 5447b7cc..10db5cd8 100644 --- a/themes/example/components/ExampleRecentComments.js +++ b/themes/example/components/ExampleRecentComments.js @@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => { {!onLoading && comments && comments.length === 0 &&
No Comments
} {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
-
-- {comment.nick}
+
-- {comment.nick}
)} diff --git a/themes/hexo/components/WalineRecentsComments.js b/themes/hexo/components/HexoRecentComments.js similarity index 86% rename from themes/hexo/components/WalineRecentsComments.js rename to themes/hexo/components/HexoRecentComments.js index f31fdb75..b0313907 100644 --- a/themes/hexo/components/WalineRecentsComments.js +++ b/themes/hexo/components/HexoRecentComments.js @@ -10,7 +10,7 @@ import Link from 'next/link' * @param {*} props * @returns */ -const WalineRecentComment = (props) => { +const HexoRecentComments = (props) => { const [comments, updateComments] = React.useState([]) const { locale } = useGlobal() const [onLoading, changeLoading] = React.useState(true) @@ -34,10 +34,10 @@ const WalineRecentComment = (props) => { {!onLoading && comments && comments.length === 0 &&
No Comments
} {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
- +
)} } -export default WalineRecentComment +export default HexoRecentComments diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js index aea16cb3..d04d6915 100644 --- a/themes/hexo/components/SideRight.js +++ b/themes/hexo/components/SideRight.js @@ -6,7 +6,7 @@ import Catalog from './Catalog' import { InfoCard } from './InfoCard' import { AnalyticsCard } from './AnalyticsCard' import CONFIG_HEXO from '../config_hexo' -import WalineRecentComment from './WalineRecentsComments' +import HexoRecentComments from './HexoRecentComments' import BLOG from '@/blog.config' /** @@ -45,7 +45,7 @@ export default function SideRight(props) { } - {BLOG.COMMENT_WALINE_SERVER_URL && } + {BLOG.COMMENT_WALINE_SERVER_URL && }
{post && post.toc && post.toc.length > 1 && diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js index caa84ef2..ab101db4 100644 --- a/themes/next/components/NextRecentComments.js +++ b/themes/next/components/NextRecentComments.js @@ -26,7 +26,7 @@ const NextRecentComments = (props) => { {!onLoading && comments && comments.length === 0 &&
No Comments
} {!onLoading && comments && comments.length > 0 && comments.map((comment) =>