Hexo 的 cactus 主题集成 Gitalk 评论

·  阅读 894

迁移自简书 2019.04.27 08:41:30

为什么使用 Gitalk 做评论组件

博客网站都需要支持评论系统,方便与他人交流文章细节。Gitalk 就是一款易用,易集成,支持 Markdown,使用 github 账号登录的评论组件,非常适合技术博客使用。

GItalk 评论界面如下:

Gitalk 界面

Gitalk 的集成方法

Gitalk 的集成很简单,查看 Gitalk 项目的 readme,简单概述就是下面几步。

准备工作

  1. github 账号
  2. 一个仓库 repo 用于保存评论,可以用 xxx.github.io,如:al-liu.github.io
  3. 注册一个新的 OAuth application,点击这里注册。

集成步骤

  1. 引用 gitalk 的 js,css,有两种方式
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
复制代码

或使用 npm 安装,npm install

  1. 添加一个 container 到页面,<div id="gitalk-container"></div>
  2. 生成 Gitalk 插件,const gitalk = new Gitalk({…}) 其中 Client ID, Client Secret 来自 Github OAuth application。

查看 Client ID, Client Secret

登录 github 后:

第一步

第二步

第三步

在 Hexo 的 cactus 主题中集成 Gitalk

themes/cactus/_config.yml 配置文件中,配置 Gitalk。

disqus:
    enabled: false # 确定 disqus 评论是关闭的
    shortname: cactus-1
gitalk:
    enabled: true # 开关开启
    owner: al-liu # 你的 github 用户名
    repo: al-liu.github.io # 保存评论的 repo 库
    admin: ['al-liu'] # 管理员,你的 github 用户名
    clientID: xxx
    clientSecret: xxx
复制代码

cactus 主题默认集成了 disqus 评论系统,将它关闭 enabled 设置成 false

themes/cactus/layout/_partial/comments.ejs 中,

// disqus 评论系统部分
<% if(page.comments && theme.disqus.enabled){ %>
    <div class="blog-post-comments">
        <div id="disqus_thread">
            <noscript><%= __('comments.no_js') %></noscript>
        </div>
    </div>
<% } %>
// 下面添加 Gitalk 部分
<% if(page.comments && theme.gitalk.enabled){ %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <div id="gitalk-container"></div>
    <script type="text/javascript">
        var gitalk = new Gitalk({
            clientID: '<%= theme.gitalk.clientID %>',
            clientSecret: '<%= theme.gitalk.clientSecret %>',
            id: md5(window.location.pathname),
            repo: '<%= theme.gitalk.repo %>',
            owner: '<%= theme.gitalk.owner %>',
            admin: '<%= theme.gitalk.admin %>',
            distractionFreeMode: '<%= theme.gitalk.on %>'
        })
        gitalk.render('gitalk-container')
    </script>
<% } %>
复制代码

<%= theme.gitalk.clientID %> 这些类似标签,对应的是 _config.yml 中的各种配置项,参考前面说到的 Gitalk 项目 readme 的集成方法,代码中先引入 Gitalk 的 js 和 css,还引入了一个 md5 的 js 库,这个后面会用到。下面是添加 container 页 <div id="gitalk-container"></div>, 添加 Gitalk 脚本 var gitalk = new Gitalk ...。需要注意的是 id: md5(window.location.pathname) 这里,是为了防止文章标题过长,导致 Error: Validation Failed. 的错误,详情请见这个issue#102

themes/cactus/layout/post.ejs 中查看最后一行是不是 <%- partial('_partial/comments') %> 确认将 comments.ejs 引入进来。

如果hexo s 访问本地服务不能用,部署到 Github 上再试,hexo clean,hexo g, hexo d

到此 Hexo 的 cactus 主题集成 Gitalk 评论就完成了。其他主题集成 Gitalk 的方法都一样,可能就是在哪个文件引入的区别,照猫画虎就可以。

分类:
阅读
标签: