Hexo博客集成码云评论系统

喜欢ヅ旅行 2021-11-23 06:32 369阅读 0赞

Tips:前导必备

*  [博主博客地址][Link 1]
 *  博主使用的是**[hexo-theme-yilia-plus][]**主题

## 简介 ##

> giteement系统是基于[gitment][]的源码开发和扩展的 ➡️ [https://gitee.com/zhousiwei/giteement][https_gitee.com_zhousiwei_giteement]  
> [giteement][https_gitee.com_zhousiwei_giteement]还在继续维护优化中…欢迎小伙伴们加入一起维护

目前实现以下功能：

1.  基于[码云][Link 2]的issues来进行评论的,所以需要有码云账号。
2.  实现了类似码云issues的回复功能，评论开头用@符号选择你要回复的人，回复完毕，如果你要回复的人登录码云，会有消息提示。

> 效果展示 ➡️ [https://zhousiwei.gitee.io/][Link 1]

--------------------

### 1、配置第三方应用 ###

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

> 注册一个新的第三方应用 ➡️ [https://gitee.com/oauth/applications/new][https_gitee.com_oauth_applications_new]

*  应用名称(根据实际来填写)
 *  应用描述(根据实际来填写)
 *  应用主页(应用程序主页的完整URL)
 *  应用回调地址(一般是博客的域名)
 *  **权限请选择`issues`、`notes`**

![2743275-7a58969acdd07ef4.png][]

### 2、配置[hexo-theme-yilia-plus][]主题 ###

注册完成后得到Client ID和Client Secret

![2743275-fa10cedf90482f2f.png][]

修改[hexo-theme-yilia-plus][]主题的配置文件`_config.yml`

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

### 3、重新编译运行即可查看效果 ###

hexo s -g

> 针对不同文章的date属性生成id，只要保证每篇文章有date属性并且不重复即可

> **hexo-theme-yilia-plus配置Demo ➡️ [https://gitee.com/zhousiwei/yilia-plus-demo][https_gitee.com_zhousiwei_yilia-plus-demo]**

### 4、待解决问题 ###

1.  giteement的UI是直接使用gitment的UI，不是很好看，后期准备优化。
2.  新增文章的时候需要登录自己的gitee账号，点击评论初始化按钮。(后面考虑实现自动初始化 Gitment 评论脚本)

![2743275-e96101fc56ce6182.png][]

![2743275-d966b9a3f1fcd776.png][]

### 效果图 ###

1、整体UI

![2743275-f139337ae5992f82.png][]

2、@回复功能

![2743275-6b437e4be899016a.png][]

### 其他主题例子 ###

1、主题[landscape][]中使用

修改`themes/landscape/layout/index.ejs`文件

![2743275-6896ffbdbf941c3a.png][]

修改`themes/landscape/layout/_partial/article.ejs`文件

![2743275-b5bc10f5b793da13.png][]

增加themes/landscape/layout/\_partial/comment.ejs

<% if (!index && post.comments && theme.giteement && theme.giteement.enable){ %>
      <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="<%=config.root%>assets/default.css">
        <script src="<%=config.root%>assets/giteement.browser.js"></script>
      <% } %>
      <script>
      var giteement = new Giteement({
        id: '<%=page.date.format('YYYYMMDDHHmmss')%>',
        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>
    <% } %>

2、主题[next][]中使用

修改`themes/next/layout/index.swig`文件

![2743275-8d0e237f78f50a61.png][]

修改`themes/next/layout/_partials/comments.swig`文件

> 把`theme.giteement.ClientID`和`theme.giteement.ClientSecret`改为`theme.giteement.gitment_oauth.client_id`和`theme.giteement.gitment_oauth.client_secret`

![2743275-01b6301e3e5947c0.png][]

> 转载自原作者[eillott][]的文章，进行修改了一部分，并且集成了**[hexo-theme-yilia-plus][]**主题

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fzhousiwei.gitee.io%2F
[hexo-theme-yilia-plus]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FJoeyBling%2Fhexo-theme-yilia-plus
[gitment]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fimsun%2Fgitment
[https_gitee.com_zhousiwei_giteement]: https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Fzhousiwei%2Fgiteement
[Link 2]: https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Fzhousiwei
[https_gitee.com_oauth_applications_new]: https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Foauth%2Fapplications%2Fnew
[2743275-7a58969acdd07ef4.png]: /images/20211122/adf4656cc1834464b69845fadee5d3c1.png
[2743275-fa10cedf90482f2f.png]: /images/20211122/65bc4c265a6144c5b1468a184bd48796.png
[https_gitee.com_zhousiwei_yilia-plus-demo]: https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Fzhousiwei%2Fyilia-plus-demo
[2743275-e96101fc56ce6182.png]: /images/20211122/b496ef875fdc41528f94da182763e7a0.png
[2743275-d966b9a3f1fcd776.png]: /images/20211122/f55012a36e9f45959cc00e42bb2217a8.png
[2743275-f139337ae5992f82.png]: /images/20211122/e73088b7846b4156b83fec2fa2d51094.png
[2743275-6b437e4be899016a.png]: /images/20211122/3e225910ed444f72ad62f91d79e7826b.png
[landscape]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fhexojs%2Fhexo-theme-landscape
[2743275-6896ffbdbf941c3a.png]: /images/20211122/10fb191687774e4e808243899d04a296.png
[2743275-b5bc10f5b793da13.png]: /images/20211122/30e540a99cb04219a4cf704c1f920f8c.png
[next]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ftheme-next%2Fhexo-theme-next
[2743275-8d0e237f78f50a61.png]: /images/20211122/a3c062f249424bccaa164439fe9e4c7c.png
[2743275-01b6301e3e5947c0.png]: /images/20211122/1df50e46b426406680249d879ea626df.png
[eillott]: https://links.jianshu.com/go?to=https%3A%2F%2Feillott.gitee.io%2F2018%2F08%2F29%2FHexo%25E6%258E%25A5%25E5%2585%25A5%25E7%25A0%2581%25E4%25BA%2591%25E8%25AF%2584%25E8%25AE%25BA%25E7%25B3%25BB%25E7%25BB%259F%2F