Gitalk

Gitalk 是一款基于GitHub使用的评论插件,使用起来非常方便。最近Valine出了一些问题,无法正常使用,虽然官网给了修复的方法,但是我不想再使用Valine,于是便安装了Gitalk这款插件,下面给大家带来 Hexo-Sakura 安装Gitalk 的教程 。

不想折腾直接下载:

  1. 修改好的主题: 点击下载

这只是主题文件,解压以后放到博客根目录下的themes下面即可 (前提是你已经正常安装了Sakura主题,然后把themes下面的Sakura主题文件删除),然后修改主题文件下的config.yml,最下方找到gitalk相关配置件,修改成下面你自己申请的信息。这个合适刚下载主题,没有太多修改的情况使用,如果你已经自定义了很多主题样式,请勿使用这个方法。

step1: Apply OAuth Apps

首先登Github主页,点击你的头像依次点击 Settings->Developer settings->OAuth Apps-> new OAuth Apps将会到下面的界面:

里面几个参数介绍如下:

1. Application name:应用名称,这个你自己随便写,合法就行

2. Homepage URL:这个填写你的博客地址例如:https://yremp.github.io

3. Application description:应用描述随便填

4. Authorization callback URL:如果你绑定了个性域名一定要填写个性域名,例如:https://yremp.club

申请完成以后有两个重要参数Client IDClient Secret后面会使用 , 如下所示:

step2:修改配置文件

做完上面的准备工作接下来就是修改配置文件:在 \themes\Sakura 下找到_config.yml。打开,在最下方加入如下代码:

gitalk:
    # 是否自动展开评论框
    autoExpand: true
    # 应用编号
    clientID: '8972e4300aeaabe97cc0'
    # 应用秘钥
    clientSecret: '988d6142b09dd52db79a2b832ba8f068df13a99a'
    # issue仓库名
    repo: 'yremp.github.io'
    # Github名
    owner: 'yremp'
    # Github名
    admin: ['yremp']
    # Ensure uniqueness and length less than 50
    id: location.pathname
    # Facebook-like distraction free mode
    distractionFreeMode: false

对照注释修改:

  • clientID: 申请的应用ID
  • clientSecret: 申请的应用密匙
  • repo: issue仓库名
  • owner: 你的github用户名
  • admin: 你的github用户名

step3:修改布局文件

\themes\Sakura\layout\_partial 下找到comment.ejs将里面的代码替换为如下代码:

<% if ( post.comments) { %>
  <script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.1/gitalk.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yremp/yremp-css@1.3/gitalk.css">
  <div id="gitalk-container"></div>
  <script type="text/javascript">
      var gitalk = new Gitalk({
          clientID: '<%= theme.gitalk.clientID %>',
          clientSecret: '<%= theme.gitalk.clientSecret %>',
          id: window.location.pathname,
          repo: '<%= theme.gitalk.repo %>',
          owner: '<%= theme.gitalk.owner %>',
          admin: '<%= theme.gitalk.admin %>'
      })
      gitalk.render('gitalk-container')
    </script>
<% } %>

里面的js以及css文件是我从官方找的并且放在我的github上面,你可以去找官方的链接下载放到自己github上面,也可以直接用我的。然后,在\themes\Sakura\layout\_partial 下找到 footer.ejs 在里面加入评论区容器:

<div id="gitalk-container"></div>

继续在这个文件里添加JS链接:

<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.1/gitalk.js"></script>

最后,在 \themes\Sakura\layout\_partial 下找到 head.ejs 加入如下代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yremp/yremp-css@1.3/gitalk.css">

完成

接下来就是:

 hexo clean
 hexo g
 hexo d

大功告成 , 如果还有什么问题,可以参考我之前另一篇博客 ,有什么问题请到评论区留言。这是之前的博客地址: 点击访问,里面有较为详细的图片示例。

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理

Hexo-Sakura 安装Gitalk
Hexo-Sakura 安装Gitalk