Giscus 算是个人博客网站最简单的评论插件了,但是 Hexo Butterfly 默认的 Giscus 没有中文评论区,而 Giscus 官方脚本又有这个参数,因此我觉得是 Butterfly 的问题。

在仓库根目录执行 grep -r giscus | grep pug 命令:

我们可以找到一个路径为 ./node_modules/hexo-theme-butterfly/layout/includes/third-party/comments/giscus.pug 的文件;如果你是通过 Git 安装的 Butterfly,应该在 ./themes/butterfly/layout/includes/third-party/comments/giscus.pug 这里。

这个文件里装着 Butterfly 主题的 Giscus 实现方法,修改为下面这样:

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
@@ -1,83 +1,85 @@
-- const { use, lazyload } = theme.comments
-- const { repo, repo_id, category_id, light_theme, dark_theme, js, option } = theme.giscus
-- const giscusUrl = js || 'https://giscus.app/client.js'
-- const giscusOriginUrl = new URL(giscusUrl).origin
-
-script.
- (() => {
- const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
- const option = !{JSON.stringify(option)}
-
- const getGiscusTheme = theme => theme === 'dark' ? '!{dark_theme}' : '!{light_theme}'
-
- const createScriptElement = config => {
- const ele = document.createElement('script')
- Object.entries(config).forEach(([key, value]) => {
- ele.setAttribute(key, value)
- })
- return ele
- }
-
- const loadGiscus = (el = document, key) => {
- const mappingConfig = isShuoshuo
- ? { 'data-mapping': 'specific', 'data-term': key }
- : { 'data-mapping': (option && option['data-mapping']) || 'pathname' }
-
- const giscusConfig = {
- src: '!{giscusUrl}',
- 'data-repo': '!{repo}',
- 'data-repo-id': '!{repo_id}',
- 'data-category-id': '!{category_id}',
- 'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
- 'data-reactions-enabled': '1',
- crossorigin: 'anonymous',
- async: true,
- ...option,
- ...mappingConfig
- }
-
- const scriptElement = createScriptElement(giscusConfig)
-
- el.querySelector('#giscus-wrap').appendChild(scriptElement)
-
- if (isShuoshuo) {
- window.shuoshuoComment.destroyGiscus = () => {
- if (el.children.length) {
- el.innerHTML = ''
- el.classList.add('no-comment')
- }
- }
- }
- }
-
- const changeGiscusTheme = theme => {
- const iframe = document.querySelector('#giscus-wrap iframe')
- if (iframe) {
- const message = {
- giscus: {
- setConfig: {
- theme: getGiscusTheme(theme)
- }
- }
- }
- iframe.contentWindow.postMessage(message, '!{giscusOriginUrl}')
- }
- }
-
- btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
-
- if (isShuoshuo) {
- '!{use[0]}' === 'Giscus'
- ? window.shuoshuoComment = { loadComment: loadGiscus }
- : window.loadOtherComment = loadGiscus
- return
- }
-
- if ('!{use[0]}' === 'Giscus' || !!{lazyload}) {
- if (!{lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
- else loadGiscus()
- } else {
- window.loadOtherComment = loadGiscus
- }
- })()
-
+- const { use, lazyload } = theme.comments
+- const { repo, repo_id, category_id, light_theme, dark_theme, js, option } = theme.giscus
+- const giscusUrl = js || 'https://giscus.app/client.js'
+- const giscusOriginUrl = new URL(giscusUrl).origin
+
+script.
+ (() => {
+ const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+ const option = !{JSON.stringify(option)}
+
+ const getGiscusTheme = theme => theme === 'dark' ? '!{dark_theme}' : '!{light_theme}'
+
+ const createScriptElement = config => {
+ const ele = document.createElement('script')
+ Object.entries(config).forEach(([key, value]) => {
+ ele.setAttribute(key, value)
+ })
+ return ele
+ }
+
+ const loadGiscus = (el = document, key) => {
+ const mappingConfig = isShuoshuo
+ ? { 'data-mapping': 'specific', 'data-term': key }
+ : { 'data-mapping': (option && option['data-mapping']) || 'pathname' }
+
+ const giscusConfig = {
+ src: '!{giscusUrl}',
+ 'data-repo': '!{repo}',
+ 'data-repo-id': '!{repo_id}',
+ 'data-category-id': '!{category_id}',
+ 'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
+ 'data-reactions-enabled': '1',
+ 'data-emit-metadata': '1',
+ 'data-input-position': 'top',
+ 'data-lang': 'zh-CN',
+ crossorigin: 'anonymous',
+ async: true,
+ ...option,
+ ...mappingConfig
+ }
+
+ const scriptElement = createScriptElement(giscusConfig)
+
+ el.querySelector('#giscus-wrap').appendChild(scriptElement)
+
+ if (isShuoshuo) {
+ window.shuoshuoComment.destroyGiscus = () => {
+ if (el.children.length) {
+ el.innerHTML = ''
+ el.classList.add('no-comment')
+ }
+ }
+ }
+ }
+
+ const changeGiscusTheme = theme => {
+ const iframe = document.querySelector('#giscus-wrap iframe')
+ if (iframe) {
+ const message = {
+ giscus: {
+ setConfig: {
+ theme: getGiscusTheme(theme)
+ }
+ }
+ }
+ iframe.contentWindow.postMessage(message, '!{giscusOriginUrl}')
+ }
+ }
+
+ btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
+
+ if (isShuoshuo) {
+ '!{use[0]}' === 'Giscus'
+ ? window.shuoshuoComment = { loadComment: loadGiscus }
+ : window.loadOtherComment = loadGiscus
+ return
+ }
+
+ if ('!{use[0]}' === 'Giscus' || !!{lazyload}) {
+ if (!{lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
+ else loadGiscus()
+ } else {
+ window.loadOtherComment = loadGiscus
+ }
+ })()

不知道为什么生成的补丁是这样,直接划重点吧:

1
2
3
+        'data-emit-metadata': '1',
+ 'data-input-position': 'top',
+ 'data-lang': 'zh-CN',

在函数里把这三行加上后,重新生成网页部署就是中文评论区了。如果你和我一样是提交源码由 Actions 部署的,可以提前把修改好的文件放在根目录,部署的时候复制并替换过去:

1
2
3
4
5
6
7
8
9
10
@@ -33,6 +33,9 @@ jobs:
- name: Install dependencies
run: npm ci # 使用 ci 而不是 install,更稳定

+ - name: Use patch
+ run: cp -rf ./giscus.xiashuangjv123.pug ./node_modules/hexo-theme-butterfly/layout/includes/third-party/comments/giscus.pug # 中文评论区补丁
+
- name: Build with Hexo
run: |
npm run build

提交上去以后,网站就是中文评论区了: