d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

自动滚动到评论区

Browse Source
This commit is contained in:
tangly1024
2023-06-27 22:59:01 +08:00
parent 24aa9f910c
commit 7df33cb62a
3 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
components/Comment.js
View File

@@ -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 (
<div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
<Tabs>
<Tabs>
{ BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
<TwikooCompenent/>
</div>)}
{BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
<TwikooCompenent />
</div>)}
{ BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
<WalineComponent/>
</div>) }
{BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
<WalineComponent />
</div>)}
{BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
<ValineComponent path={frontMatter.id}/>
</div>)}
{BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
<ValineComponent path={frontMatter.id} />
</div>)}
{BLOG.COMMENT_GISCUS_REPO && (
<div key="Giscus">
<GiscusComponent className="px-2" />
</div>
)}
{BLOG.COMMENT_GISCUS_REPO && (
<div key="Giscus">
<GiscusComponent className="px-2" />
</div>
)}
{BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
<CusdisComponent frontMatter={frontMatter}/>
</div>)}
{BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
<CusdisComponent frontMatter={frontMatter} />
</div>)}
{BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
<UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
</div>)}
{BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
<UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
</div>)}
{BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
<GitalkComponent frontMatter={frontMatter}/>
</div>)}
{BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
<GitalkComponent frontMatter={frontMatter} />
</div>)}
{BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
<WebMentionComponent frontMatter={frontMatter} className="px-2" />
</div>)}
</Tabs>
{BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
<WebMentionComponent frontMatter={frontMatter} className="px-2" />
</div>)}
</Tabs>
</div>
)
}

26
components/NotionPage.js
View File

@@ -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 }) => {
</div>
}
/**
* 根据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

1
components/PrismMac.js
View File

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