Gittalk

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 Hexo IDEA JavaScript jsDeliver JS樱花特效 Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运

转载请标明作者和原文地址