💡 参考文章见Ref，感谢提供思路！
🗺️当前这篇博文地址：https://myoontyee.github.io/article/b1784561.html
⚠️警告：博客文章禁止一切形式的非授权非法转载！
⚠️Attention: All forms of unauthorized illegal reposts are prohibited !

创建时间：2022年3月30日20:11:22
最新更新：2022年3月30日20:11:30

添加js

  • 在themes\Chic\layout\_plugins\中新建gitalk.ejs文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css">  
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>  
<div id="gitalk-container"></div>  
<script type="text/javascript">  
 var gitalk = new Gitalk({  
 clientID: '<%= theme.gitalk.ClientID %>',  
 clientSecret: '<%= theme.gitalk.ClientSecret %>',  
 repo: '<%= theme.gitalk.repo %>',  
 owner: '<%= theme.gitalk.owner %>',  
 admin: '<%= theme.gitalk.adminUser %>',  
 id: <%= theme.gitalk.ID %>,  
 labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),  
 perPage: <%= theme.gitalk.perPage %>,  
 pagerDirection: '<%= theme.gitalk.pagerDirection %>',  
 createIssueManually: <%= theme.gitalk.createIssueManually %>,  
 distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>  
 })  
 gitalk.render('gitalk-container')  
</script>

启动Gitalk的js

  • 在themes\Chic\layout\post.ejs文件中添加：
1
2
3
4
5
6

<% if (theme.gitalk.enable) { %>  
 <div id="gitalk-container"></div>  
 <%- partial('_plugins/gitalk') %>  
<% } %>

配置_config.yml

  • 获取client_id 和 client_secret，首先需要在OAuth application页面内创建一个新应用，头两个填写无要求，最后一个要求必须填写正确的blog地址，点击Register application→点击Generate a new client secret
  • 在themes\Chic\_config.yml中添加配置，如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

gitalk:  
 enable: true  
 ClientID: xxxxx #Client ID,填入上一步获取的ID  
 ClientSecret: xxxxxxxxxx #Client Secret，填入上一步获取的ID  
 repo: blog #你要存放的项目名,如果博客部署在github可以放一起  
 owner: Myoontyee #这个项目名的拥有者（GitHub账号或组织）  
 adminUser: ['Myoontyee'] #管理员用户  
 ID: location.pathname #页面ID  
 labels: ['Gitalk'] #GitHub issues的标签  
 perPage: 10 #每页多少个评论  
 pagerDirection: last #排序方式是从旧到新（first），还是从新到旧（last）  
 createIssueManually: true #是否自动创建isssue，自动创建需要当前登录的用户为adminuser  
 distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论

调整Gitalk样式

  • 在themes\Chic\source\css\custom.styl内添加样式
1
2
3
4
5
6
7

// Gitalk评论样式  
.gt-container {  
 max-width: 780px;  
 margin: auto;  
}

更多设置

在page页面引入gitalk

  • 在themes\Chic\layout\page.ejs文件中添加：
1
2
3
4
5
6

<% if (theme.gitalk.enable) { %>  
 <div id="gitalk-container"></div>  
 <%- partial('_plugins/gitalk') %>  
<% } %>

解决labels的50个字符长度限制的问题

  • 前面提到中文路径的页面ID会在issues中将中文转换成url编码，那么长度就会超过50个字符

将中文ID转换成MD5值

修改gitalk.ejs

  • 在themes\Chic\layout\_plugins\gitalk.ejs中开头部分添加对md5.js的引用

修改前

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css">

<script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>

<script type="text/javascript">

 var gitalk = new Gitalk({

 clientID: '<%= theme.gitalk.ClientID %>',

 clientSecret: '<%= theme.gitalk.ClientSecret %>',

 repo: '<%= theme.gitalk.repo %>',

 owner: '<%= theme.gitalk.owner %>',

 admin: '<%= theme.gitalk.adminUser %>',

 id: <%= theme.gitalk.ID %>,

 labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),

 perPage: <%= theme.gitalk.perPage %>,

 pagerDirection: '<%= theme.gitalk.pagerDirection %>',

 createIssueManually: <%= theme.gitalk.createIssueManually %>,

 distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>

 })

 gitalk.render('gitalk-container')

</script>


修改后

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

<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">

<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>

<script src="//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<div id="gitalk-container"></div>

<script type="text/javascript">

 var gitalk = new Gitalk({

 clientID: '<%= theme.gitalk.ClientID %>',

 clientSecret: '<%= theme.gitalk.ClientSecret %>',

 repo: '<%= theme.gitalk.repo %>',

 owner: '<%= theme.gitalk.owner %>',

 admin: '<%= theme.gitalk.adminUser %>',

 id: md5(<%= theme.gitalk.ID %>), 

 labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),

 perPage: <%= theme.gitalk.perPage %>,

 pagerDirection: '<%= theme.gitalk.pagerDirection %>',

 createIssueManually: <%= theme.gitalk.createIssueManually %>,

 distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>

 })

 gitalk.render('gitalk-container')

</script>


Ref