Giteement 评论系统是基于 Gitment 的源码开发和扩展的

Giteement 作者项目地址：https://gitee.com/eillott/giteement

目前实现以下功能：

  1. 基于码云的 issues 来进行评论的，所以需要有码云账号

  2. 实现了类似码云 issues 的回复功能，评论开头用@符号选择你要回复的人，回复完毕，如果你要回复的人登录码云，会有消息提示

博主我已为本主题实现码云评论，如果你也想让你的主题实现，那么不妨看下去

配置码云评论

使用码云的issues作为评论系统，就要使用码云来登录评论，所以需要在码云上配置第三方应用

创建一个新的第三方应用

https://gitee.com/oauth/applications/new

  • 应用名称(根据实际来填写)
  • 应用描述(根据实际来填写)
  • 应用主页(博客的域名)
  • 应用回调地址(博客的域名)
  • 权限请选择issues、notes

创建完成后，得到 Client ID 和 Client Secret，记下来后面需要用到

主题引入码云评论教程

已本主题 indigo-card 为例子，其它主题同理

修改 themes/indigo-card/layout/index.ejs 文件

顶部插入以下代码

1
2
3
4
5
6
7
8
9
10
<% if (theme.giteement && theme.giteement.enable){ %>
    <% if (theme.giteement && theme.giteement.remote){ %>
        <script src="https://giteement.oss-cn-beijing.aliyuncs.com/oauthcallback.browser.js"></script>
        <% } else { %>
        <script src="<%- url_for('js/oauthcallback.browser.js') %>"></script>
        <% } %>
    <script>
        Oauthcallback();
    </script>
<% } %>

修改 themes/indigo-card/layout/_partial/post/comment.ejs 文件

在 <%- partial('../plugins/gitalk') %> 后面插入 <%- partial('../plugins/gitee') %>

新建 themes/indigo-card/layout/_partial/plugins/gitee.ejs 文件

复制以下代码

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
<% if (theme.giteement && theme.giteement.enable){ %>
    <section class="comments" id="comments">
    <div id="giteement-ctn"></div>
    <% if (theme.giteement && theme.giteement.remote){ %>
        <link rel="stylesheet" href="https://giteement.oss-cn-beijing.aliyuncs.com/default.css">
        <script src="https://giteement.oss-cn-beijing.aliyuncs.com/giteement.browser.js"></script>
    <% } else { %>
        <link rel="stylesheet" href="/css/gitee.css">
        <script src="<%- url_for('js/gitee.js') %>"></script>
    <% } %>
    
    <script>
    var giteement = new Giteement({
        id: id,
        owner: '<%=theme.giteement.giteeID%>',
        repo: '<%=theme.giteement.repo%>',
        backcall_uri: '<%=theme.giteement.redirect_uri%>',
        oauth_uri: '<%=theme.giteement.oauth_uri%>',
        oauth: {
        client_id: '<%=theme.giteement.gitment_oauth.client_id%>',
        client_secret: '<%=theme.giteement.gitment_oauth.client_secret%>'
    },
    })
    giteement.render('giteement-ctn')
    </script>
    </section>
<% } %>

修改 themes/indigo-card/_config.yml 文件

末尾插入以下代码

1
2
3
4
5
6
7
8
9
10
giteement:
  enable: true	# 是否启用码云评论系统
  remote: false	# 是否使用官方js(false可以提升访问速度)
  redirect_uri: https://abbw.ml	# 应用回调地址(请和配置的第三方应用保持一致)
  oauth_uri: https://cors-anywhere.herokuapp.com/https://gitee.com/oauth/token	# 不能更改(网上开源项目https://github.com/Rob--W/cors-anywhere作者提供的专门用来跨域服务器的配置)
  giteeID: abbw	# 码云账号英文名
  repo: Hexo-blog-issues	# 存储评论的 repo
  gitment_oauth:
    client_id: '*********'	#client ID
    client_secret: '*********'	#client secret

重新运行即可查看效果

1
hexo clean && hexo s