Skip to content

Commit 5f5b260

Browse files
author
robin
committed
Enhance comment system with Giscus support and update package manager version
- Added Giscus comment provider configuration in blog.config.js - Updated Comments component to support Giscus alongside existing providers - Introduced Giscus component for rendering comments - Updated package manager version in package.json to pnpm@9.15.9
1 parent c0f4d46 commit 5f5b260

6 files changed

Lines changed: 122 additions & 13 deletions

File tree

‎blog.config.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,27 @@ const BLOG = {
6666
}
6767
},
6868
comment: {
69-
// support provider: utterances, supacomments
70-
provider: '', // leave it empty if you don't need any comment plugin
69+
// support provider: utterances, supacomments, giscus
70+
provider: 'utterances', // 'utterances' | 'supacomments' | 'giscus' | '' (empty to disable)
7171
supaCommentsConfig: {
7272
supabaseUrl: '', // The url of your Supabase instance
7373
supabaseAnonKey: '' // The anonymous key of your Supabase instance
7474
},
7575
utterancesConfig: {
76-
repo: ''
76+
repo: 'robinv8/blog' // GitHub repository in format 'owner/repo', e.g. 'robinv8/blog'
77+
},
78+
giscusConfig: {
79+
repo: 'robinv8/blog', // GitHub repository in format 'owner/repo'
80+
repoId: '', // Repository ID from Giscus (get from https://giscus.app)
81+
category: 'Announcements', // Discussion category name
82+
categoryId: '', // Category ID from Giscus
83+
mapping: 'pathname', // 'pathname' | 'url' | 'title' | 'og:title'
84+
reactionsEnabled: '1', // '1' to enable reactions, '0' to disable
85+
emitMetadata: '0', // '1' to emit discussion metadata, '0' to disable
86+
inputPosition: 'bottom', // 'top' | 'bottom'
87+
theme: 'preferred_color_scheme', // Theme mode
88+
lang: 'zh-CN', // Language code
89+
crossorigin: 'anonymous'
7790
}
7891
},
7992
isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)

‎components/Hero/Home.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Hero = ({ blockMap }) => {
3838
<Social />
3939
<div className='flex flex-col sm:flex-row sm:justify-center gap-4 mt-6'>
4040
<Link passHref href='/contact' scroll={false}>
41-
<button className='w-full cursor-pointer bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center'>
41+
<button type='button' className='w-full cursor-pointer bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center'>
4242
<EnvelopeIcon className='inline-block text-gray-600 dark:text-day h-7 w-7 mt-1' />
4343
<span className='ml-4 flex items-start flex-col leading-none'>
4444
<span className='text-xs text-gray-600 dark:text-day mb-1'>
@@ -50,6 +50,7 @@ const Hero = ({ blockMap }) => {
5050
</Link>
5151
{showCopied ? (
5252
<button
53+
type='button'
5354
disabled
5455
className='bg-gray-200 dark:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center'
5556
>
@@ -65,6 +66,7 @@ const Hero = ({ blockMap }) => {
6566
</button>
6667
) : (
6768
<button
69+
type='button'
6870
onClick={() => clickCopy()}
6971
className='cursor-pointer bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center'
7072
>

‎components/Post/Comments.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import BLOG from '@/blog.config'
22
import dynamic from 'next/dynamic'
3+
import { useRouter } from 'next/router'
4+
import { lang } from '@/lib/lang'
35

46
const UtterancesComponent = dynamic(
57
() => {
@@ -13,16 +15,36 @@ const SupaCommentsComponent = dynamic(
1315
},
1416
{ ssr: false }
1517
)
18+
const GiscusComponent = dynamic(
19+
() => {
20+
return import('@/components/Post/Giscus')
21+
},
22+
{ ssr: false }
23+
)
1624

1725
const Comments = ({ frontMatter }) => {
26+
const router = useRouter()
27+
const { locale } = router
28+
const t = lang[locale] || lang.zh
29+
30+
if (!BLOG.comment || !BLOG.comment.provider) {
31+
return null
32+
}
33+
1834
return (
19-
<div>
20-
{BLOG.comment && BLOG.comment.provider === 'utterances' && (
35+
<div className='mt-12 pt-8 border-t border-gray-200 dark:border-gray-700'>
36+
<h2 className='text-xl font-semibold mb-6 text-gray-800 dark:text-gray-200'>
37+
{t.LAYOUT.COMMENT_TITLE || '评论区'}
38+
</h2>
39+
{BLOG.comment.provider === 'utterances' && (
2140
<UtterancesComponent issueTerm={frontMatter.id} />
2241
)}
23-
{BLOG.comment && BLOG.comment.provider === 'supacomments' && (
42+
{BLOG.comment.provider === 'supacomments' && (
2443
<SupaCommentsComponent />
2544
)}
45+
{BLOG.comment.provider === 'giscus' && (
46+
<GiscusComponent />
47+
)}
2648
</div>
2749
)
2850
}

‎components/Post/Giscus.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import BLOG from '@/blog.config'
2+
import { useEffect } from 'react'
3+
import { useRouter } from 'next/router'
4+
5+
const Giscus = () => {
6+
const router = useRouter()
7+
const { asPath } = router
8+
9+
useEffect(() => {
10+
const theme =
11+
BLOG.appearance === 'auto'
12+
? 'preferred_color_scheme'
13+
: BLOG.appearance === 'light'
14+
? 'light'
15+
: 'dark'
16+
17+
const script = document.createElement('script')
18+
script.src = 'https://giscus.app/client.js'
19+
script.setAttribute('data-repo', BLOG.comment.giscusConfig.repo)
20+
script.setAttribute('data-repo-id', BLOG.comment.giscusConfig.repoId)
21+
script.setAttribute('data-category', BLOG.comment.giscusConfig.category)
22+
script.setAttribute('data-category-id', BLOG.comment.giscusConfig.categoryId)
23+
script.setAttribute('data-mapping', BLOG.comment.giscusConfig.mapping)
24+
script.setAttribute('data-strict', '0')
25+
script.setAttribute('data-reactions-enabled', BLOG.comment.giscusConfig.reactionsEnabled)
26+
script.setAttribute('data-emit-metadata', BLOG.comment.giscusConfig.emitMetadata)
27+
script.setAttribute('data-input-position', BLOG.comment.giscusConfig.inputPosition)
28+
script.setAttribute('data-theme', theme)
29+
script.setAttribute('data-lang', BLOG.comment.giscusConfig.lang)
30+
script.setAttribute('crossorigin', BLOG.comment.giscusConfig.crossorigin)
31+
script.setAttribute('async', true)
32+
33+
const anchor = document.getElementById('comments')
34+
if (anchor) {
35+
anchor.innerHTML = ''
36+
anchor.appendChild(script)
37+
}
38+
39+
return () => {
40+
if (anchor) {
41+
anchor.innerHTML = ''
42+
}
43+
}
44+
}, [asPath])
45+
46+
return (
47+
<div
48+
id='comments'
49+
className='mt-10'
50+
/>
51+
)
52+
}
53+
54+
export default Giscus
55+

‎components/Post/Utterances.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,48 @@
11
import BLOG from '@/blog.config'
22
import { useEffect } from 'react'
3+
import { useRouter } from 'next/router'
4+
35
const Utterances = ({ issueTerm, layout }) => {
6+
const router = useRouter()
7+
const { asPath } = router
8+
49
useEffect(() => {
510
const theme =
611
BLOG.appearance === 'auto'
712
? 'preferred-color-scheme'
813
: BLOG.appearance === 'light'
914
? 'github-light'
1015
: 'github-dark'
11-
const script = document.createElement('script')
16+
1217
const anchor = document.getElementById('comments')
18+
if (!anchor) return
19+
20+
// 清除之前的内容
21+
anchor.innerHTML = ''
22+
23+
const script = document.createElement('script')
1324
script.setAttribute('src', 'https://utteranc.es/client.js')
1425
script.setAttribute('crossorigin', 'anonymous')
1526
script.setAttribute('async', true)
1627
script.setAttribute('repo', BLOG.comment.utterancesConfig.repo)
17-
script.setAttribute('issue-term', issueTerm)
28+
// 使用 pathname 作为 issue-term，这样每篇文章对应一个 issue
29+
script.setAttribute('issue-term', issueTerm || asPath)
1830
script.setAttribute('theme', theme)
31+
script.setAttribute('label', 'comment')
32+
1933
anchor.appendChild(script)
34+
2035
return () => {
21-
anchor.innerHTML = ''
36+
if (anchor) {
37+
anchor.innerHTML = ''
38+
}
2239
}
23-
})
40+
}, [asPath, issueTerm])
2441
return (
2542
<>
2643
<div
2744
id='comments'
28-
className={layout && layout === 'fullWidth' ? '' : 'md:-ml-16'}
45+
className={layout && layout === 'fullWidth' ? '' : ''}
2946
>
3047
<div className='utterances-frame'></div>
3148
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,5 @@
6060
"url": "https://github.com/robinv8/blog.git/issues",
6161
"email": "robin@rnode.me"
6262
},
63-
"packageManager": "pnpm@7.12.2+sha512.f10be728034a37e6195c399560623bcd1272b1d2a575923ec370189f1bbd230b672efd71e96bb3ac9af49f131c4deb94013f74f118c3a8afbfe8a241f7036ac4"
63+
"packageManager": "pnpm@9.15.9+sha512.68046141893c66fad01c079231128e9afb89ef87e2691d69e4d40eee228988295fd4682181bae55b58418c3a253bde65a505ec7c5f9403ece5cc3cd37dcf2531"
6464
}

0 commit comments

Comments
 (0)