# giteement

**Repository Path**: zhousiwei/giteement

## Basic Information

- **Project Name**: giteement
- **Description**: 基于码云的评论系统
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://zhousiwei.gitee.io
- **GVP Project**: No

## Statistics

- **Stars**: 30
- **Forks**: 18
- **Created**: 2019-05-09
- **Last Updated**: 2023-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [基于码云的评论系统](https://gitee.com/zhousiwei/giteement)

- 友好支持 ➡️ [hexo-theme-yilia-plus](https://github.com/JoeyBling/hexo-theme-yilia-plus) 主题

> **欢迎使用和Star支持，如使用过程中碰到问题，可以提出Issue，我会尽力完善**

## 项目介绍

- 功能还很少，欢迎各位给我提意见和建议~

- **本项目源于：[https://gitee.com/eillott/giteement](https://gitee.com/eillott/giteement)。向作者表示深深的敬意。**

- 基于码云的评论系统，主要用于Hexo博客系统中接入基于码云Issues的评论系统。

#### 目前实现以下功能：

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

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

## 软件架构
软件是基于[gitment](https://github.com/imsun/gitment)的源码开发的。

开发语言：`nodeJS`

## 使用说明

> [Hexo博客集成码云评论系统](https://www.jianshu.com/p/f5c4633524c7)

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

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

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

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


![](https://images.gitee.com/uploads/images/2019/0725/110249_3f1955a5_1251167.png "")



### 2、配置[hexo-theme-yilia-plus](https://github.com/JoeyBling/hexo-theme-yilia-plus)主题

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

![](https://images.gitee.com/uploads/images/2019/0725/110328_1c342470_1251167.png "")


##### 修改[hexo-theme-yilia-plus](https://github.com/JoeyBling/hexo-theme-yilia-plus)主题的配置文件`_config.yml`

```yaml
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、重新编译运行即可查看效果

```bash
hexo s -g
```

> **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 评论脚本)

![](https://images.gitee.com/uploads/images/2019/0725/110451_8c862e11_1251167.png "")

![](https://images.gitee.com/uploads/images/2019/0725/110501_e63a0720_1251167.png "")

### 效果图

#### 1、整体UI

![](https://images.gitee.com/uploads/images/2019/0725/110507_07397957_1251167.png "")

#### 2、@回复功能

![](https://images.gitee.com/uploads/images/2019/0725/110513_195da784_1251167.png "")

### 其他主题例子
#### 1、主题[landscape](https://github.com/hexojs/hexo-theme-landscape)中使用
###### 修改`themes/landscape/layout/index.ejs`文件

![](https://images.gitee.com/uploads/images/2019/0725/110611_53756cbf_1251167.png "")

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

![](https://images.gitee.com/uploads/images/2019/0725/110616_d0e9561b_1251167.png "")

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

```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/wd-discuss.css"> -->
    <!-- <script src="https://giteement.oss-cn-beijing.aliyuncs.com/discuss_hexo.js"></script> -->
    <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](https://github.com/theme-next/hexo-theme-next)中使用
###### 修改`themes/next/layout/index.swig`文件

![](https://images.gitee.com/uploads/images/2019/0725/110622_c660cbfe_1251167.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`

![](https://images.gitee.com/uploads/images/2019/0725/110625_f4756e50_1251167.png "")

## License

[MIT License](./LICENSE)