添加OAuth
New OAuth
Homepage URL和Authorization callback URL都填写博客的地址
创建成功后，记下Client ID和Client Secret
添加仓库
gitalk是以Issue的形式存放评论，这里，创建一个新的仓库gitalk，用于存放Issue
添加配置
_config.yml加入如下配置
1
2
3
4
5
6
7
8
9
10
11
| gitalk:
enable: true
ClientID: xxx
ClientSecret: xxxx
repo: gitalk
owner: shlinym
adminUser: ["shlinym"]
ID: location.pathname
labels: ["gitalk"]
perPage: 15
pagerDirection: last
|
详细的参数参考gitalk文档
这里ClientID和ClientSecret分别填写上文中申请OAuth里的信息
repo即上文创建的仓库名
修改ejs
在layout/_partial下创建gitalk.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css" />
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<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%>".split(",").filter((l) => l),
id: decodeURIComponent(location.pathname),
labels: "<%=theme.gitalk.labels%>".split(",").filter((l) => l),
perPage: parseInt("<%=theme.gitalk.perPage%>"),
pagerDirection: "<%=theme.gitalk.pagerDirection%>",
});
gitalk.render("gitalk-container");
</script>
|
修改article页面的组件(我这里article位于page.ejs文件中)
1
2
3
4
| <!-- Comment -->
<% if (theme.gitalk.enable) { %>
<div id="gitalk-container"></div>
<%- partial('_partial/gitalk') %> <% } %>
|
部署
然后hexo d
hexo s无法测试github登录等功能
gitalk会在以admin登录后，自动创建Issue，最终效果如下
这种方式需要手动点到每一个blog里，然后等待gitalk自动创建
如果博客文章过多，可以参考如下方式: 自动初始化 Gitalk 和 Gitment 评论
参考
Hexo中Gitalk配置使用教程
https://github.com/skyFi/gitment-comments/issues/7
https://draveness.me/git-comments-initialize/
