Fork me on GitHub

hexo-next配置gitalk评论

   在hexo 博客结束更新之前使用的是来必力,感觉还行,但总归不踏实。后面发现有 gitment,用github的issue作为评论载体,感觉靠谱许多。但是他的UI 感觉太low了,后来发现gitalk 这个和gitment 有异曲同工之妙的这个插件。接下来我将为大家介绍一下这个插件

原理

Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件,在 Gitalk 之前还有一个gitment插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。详情Demo可见:https://gitalk.github.io/

gittalk 评论

issue 详情

可以看到在 gitalk 的评论框进行评论时,其实就是在对应的 issue 上提问题。

 集成Gitalk

注册 Application

在GitHub上注册新应用,链接为:https://github.com/settings/applications/new

注册

1
2
3
4
5
参数说明:
Application name: # 应用名称,随意
Homepage URL: # 网站URL,如 https://gclm.github.io
Application description # 描述,随意
Authorization callback URL:# 网站URL,https://gclm.github.io 如果你打算使用自定义域名,这个填写自己的域名

点击注册后,页面跳转如下,其中Client IDClient Secret在后面的配置中需要用到,到时复制粘贴即可:

应用详情

配置gitalk

  1. 新建 ~/blog/theme/next/layout/_third-party/comments/gitalk.swig文件,并添加内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="/lib/gitalk/gitalk.css">

    <script src="/lib/gitalk/gitalk.min.js"></script>
    <script src="/lib/gitalk/md5.js"></script>
    <script type="text/javascript">
    const gitalk = new Gitalk({
    clientID: '{{ theme.gitalk.ClientID }}',
    clientSecret: '{{ theme.gitalk.ClientSecret }}',
    repo: '{{ theme.gitalk.repo }}',
    owner: '{{ theme.gitalk.githubID }}',
    admin: ['{{ theme.gitalk.adminUser }}'],
    id: md5(window.location.pathname),
    distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
    </script>
    {% endif %}
  2. 修改/layout/_partials/comments.swig,添加内容如下,与前面的elseif同一级别上:

    1
    2
    {% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>
  3. 修改layout/_third-party/comments/index.swig,在最后一行添加内容:

    1
    {% include 'gitalk.swig' %}
  4. 新建/source/css/_common/components/third-party/gitalk.styl文件,添加内容:

    1
    2
    3
    4
    .gt-header a, .gt-comments a, .gt-popup a
    border-bottom: none;
    .gt-container .gt-popup .gt-action.is--active:before
    top: 0.7em;
  5. 修改/source/css/_common/components/third-party/third-party.styl,在最后一行上添加内容,引入样式:

    1
    @import "gitalk";
  6. 在主题配置文件next/_config.yml中添加如下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    gitalk:
    enable: true
    githubID: GitHub账号 # 例: gclm
    repo: 仓库名称 # 例:gclm.github.io
    ClientID: ClientID
    ClientSecret: ClientSecret
    adminUser: GitHub账号 #指定可初始化评论账户
    distractionFreeMode: true
  7. next/source/lib下新建 gitalk 文件夹,里面放置gitalk.css和gitalk.min.js文件

    1
    2
    /lib/gitalk/gitalk.css
    /lib/gitalk/gitalk.min.js

效果显示

gittalk 评论

Gitalk常见问题总结

  • 页面提示ERROR NOT FOUND

    解决: 可能是仓库未创建或者仓库名填写错误。

  • 每篇文章都需要初始化

    解决: next主题版本过低,建议更新到5.1.1及以上版本.

  • 在上面说到的路径找不到对应文件时,建议使用find 命令查找,因为next主题的目录结构可能会变化。

  • 在本地查看时,建议打开浏览器的调试模式,可以查看控制台是否有错

  • 提示Error: Cannot read property ‘avatarUrl’ of null

    解决:因为评论中的github用户已经被注销了,需要到你的评论仓库删除该用户的评论。 :

本文标题:hexo-next配置gitalk评论

文章作者:孤城落寞

发布时间:2018年10月29日 - 22:02:52

最后更新:2019年02月21日 - 22:02:17

原始链接:https://blog.gclmit.club/archives/7b9770b6.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。



-------------本文结束 感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!