Hexo博客集成码云评论系统

Tips:前导必备

博主博客地址
博主使用的是hexo-theme-yilia-plus主题

简介

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

目前实现以下功能：

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

效果展示 ➡️ https://zhousiwei.gitee.io/

1、配置第三方应用

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

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

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

2、配置hexo-theme-yilia-plus主题

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

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

giteement:enable: true  # 是否启用码云评论系统# 是否使用官方js(false可以提升访问速度)remote: falseredirect_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/tokengiteeID: zhousiwei  # 你的码云账号英文名# 存储评论的 reporepo: yilia-plus-demogitment_oauth:client_id: '*********'           #client IDclient_secret: '*********'       #client secret

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

hexo s -g

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

hexo-theme-yilia-plus配置Demo ➡️ https://gitee.com/zhousiwei/yilia-plus-demo

4、待解决问题

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

效果图

1、整体UI

2、@回复功能

其他主题例子

1、主题landscape中使用

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

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

增加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/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中使用

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

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

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

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

Hexo博客集成码云评论系统相关推荐

Hexo接入码云评论系统
简介 giteement系统是基于gitment的源码开发和扩展的.目前实现以下功能: 1. 基于码云的issues来进行评论的,所以需要有码云账号. 2. 实现了类似码云issues的回复功能,评论 ...
hexo 博客小功能添加-评论、相册、字数统计...
前言前段时间个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客我的博客,基础的功能已经实现了,想着既然有了自己的博客就要好好的维护(折腾)一下,于是便参考着别人的博 ...
hexo 博客小功能添加-评论、萌妹纸、相册、字数统计...
前言前段时间个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客我的博客,基础的功能已经实现了,想着既然有了自己的博客就要好好的维护(折腾)一下,于是便参考着别人的博 ...
将Hexo博客部署到云主机
摘要: 在云主机上搭建一个git裸仓库,然后使用nginx作为网页服务器,就可以轻松将Hexo博客通过git部署到云主机上. 这是一个忧伤的故事我的博客KiwenLau之前部署在Coding Pag ...
部署Hexo博客到阿里云centOS7
参考文档: https://blog.csdn.net/moyanxiaoq/article/details/85221262 https://segmentfault.com/a/119000000 ...
部署hexo博客到阿里云服务器
一:域名购买.服务器ECS购买购买域名,服务器ECS,并将域名解析到服务器的公网ip 通常域名的实名认证需要花一段时间,建议提早准备好. 二:本地博客搭建首先建立一个博客,本地能访问就行三:云服 ...
hexo博客配置阿里云oss对象存储
直接上步骤,做一个简单的记录! 配置阿里云oss 找到对应的oss 如果没有bucket,则新建一个新建之后,进入到对应的bucket,然后进行相关设置以上就是oss的基本设置,接下来是域名相关设 ...
hexo博客系统搭建(本地，github，阿里云)
hexo 前言准备工作 1.安装node.js 2.安装git客户端 1.安装及初始化Hexo 1.1因为网络问题需要设置代理发布到github上个人服务器部署hexo 2. Hexo博客的阿里 ...
hexo博客yilia-plus主题更换Beaudar评论插件
文章目录 hexo博客yilia-plus主题更换Beaudar评论插件一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置三. 一些问题 hexo博客 ...