File size: 4,035 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
import dynamic from 'next/dynamic'
import Tabs from '@/components/Tabs'
import { isBrowser, isSearchEngineBot } from '@/lib/utils'
import { useRouter } from 'next/router'
import Artalk from './Artalk'
import { siteConfig } from '@/lib/config'
const WalineComponent = dynamic(
() => {
return import('@/components/WalineComponent')
},
{ ssr: false }
)
const CusdisComponent = dynamic(
() => {
return import('@/components/CusdisComponent')
},
{ ssr: false }
)
const TwikooCompenent = dynamic(
() => {
return import('@/components/Twikoo')
},
{ ssr: false }
)
const GitalkComponent = dynamic(
() => {
return import('@/components/Gitalk')
},
{ ssr: false }
)
const UtterancesComponent = dynamic(
() => {
return import('@/components/Utterances')
},
{ ssr: false }
)
const GiscusComponent = dynamic(
() => {
return import('@/components/Giscus')
},
{ ssr: false }
)
const WebMentionComponent = dynamic(
() => {
return import('@/components/WebMention')
},
{ ssr: false }
)
const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
ssr: false
})
/**
* 评论组件
* @param {*} param0
* @returns
*/
const Comment = ({ siteInfo, frontMatter, className }) => {
const router = useRouter()
const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
const COMMENT_WALINE_SERVER_URL = siteConfig('COMMENT_WALINE_SERVER_URL')
const COMMENT_VALINE_APP_ID = siteConfig('COMMENT_VALINE_APP_ID')
const COMMENT_GISCUS_REPO = siteConfig('COMMENT_GISCUS_REPO')
const COMMENT_CUSDIS_APP_ID = siteConfig('COMMENT_CUSDIS_APP_ID')
const COMMENT_UTTERRANCES_REPO = siteConfig('COMMENT_UTTERRANCES_REPO')
const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
if (isSearchEngineBot()) {
return null
}
// 当连接中有特殊参数时跳转到评论区
if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
setTimeout(() => {
const url = router.asPath.replace('?target=comment', '')
history.replaceState({}, '', url)
document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
}, 1000)
}
if (!frontMatter) {
return <>Loading...</>
}
return (
<div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
<Tabs>
{COMMENT_ARTALK_SERVER && (<div key='Artalk'>
<Artalk />
</div>)}
{COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
<TwikooCompenent />
</div>)}
{COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
<WalineComponent />
</div>)}
{COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
<ValineComponent path={frontMatter.id} />
</div>)}
{COMMENT_GISCUS_REPO && (
<div key="Giscus">
<GiscusComponent className="px-2" />
</div>
)}
{COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
<CusdisComponent frontMatter={frontMatter} />
</div>)}
{COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
<UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
</div>)}
{COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
<GitalkComponent frontMatter={frontMatter} />
</div>)}
{COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
<WebMentionComponent frontMatter={frontMatter} className="px-2" />
</div>)}
</Tabs>
</div>
)
}
export default Comment
|