前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo博客集成码云评论系统

Hexo博客集成码云评论系统

作者头像
試毅-思伟
发布2019-07-26 11:17:15
8480
发布2019-07-26 11:17:15
举报
文章被收录于专栏:Java开发Java开发
Tips:前导必备

简介

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

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

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


1、配置第三方应用

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

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

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

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

注册完成后得到Client ID和Client Secret
修改hexo-theme-yilia-plus主题的配置文件_config.yml
代码语言:javascript
复制
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、重新编译运行即可查看效果

代码语言:javascript
复制
hexo s -g

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

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

4、待解决问题

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

效果图

1、整体UI
2、@回复功能

其他主题例子

1、主题landscape中使用
修改themes/landscape/layout/index.ejs文件
修改themes/landscape/layout/_partial/article.ejs文件
增加themes/landscape/layout/_partial/comment.ejs
代码语言:javascript
复制
<% 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.ClientIDtheme.giteement.ClientSecret改为theme.giteement.gitment_oauth.client_idtheme.giteement.gitment_oauth.client_secret

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.07.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
    • 1、配置第三方应用
      • 2、配置hexo-theme-yilia-plus主题
        • 3、重新编译运行即可查看效果
          • 4、待解决问题
            • 效果图
              • 1、整体UI
              • 2、@回复功能
            • 其他主题例子
              • 1、主题landscape中使用
              • 2、主题next中使用
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档