美文网首页Hexo工具癖已收录(2017-8-15)
Gitment评论功能接入踩坑教程

Gitment评论功能接入踩坑教程

作者: iHTCboy | 来源:发表于2018-02-25 13:26 被阅读1238次

    前言

    之前接入的评论功能,都因为各种原因被放弃了,今天从新计划接入评论功能,所以就在了今天这篇文章。

    评论模块

    • 多说 - 最多用户使用的评论,但遗憾2017年6月将暂定服务;不建议新用户使用,但为旧用户保留,也感谢多说一路的陪伴;
    • 网易云跟帖 - 网易提供的评论组件,功能比较简单,性能优秀;管理后台在查询上还不算特别智能,但足够普通用户使用;
    • 畅言 - 搜狐提供的评论组件,功能丰富,体验优异;但必须进行域名备案。只要域名备过案就可以通过审核。
    • Disqus - 国外使用较多的评论组件。万里长城永不倒,一枝红杏出墙来,你懂的。

    以上评论模块应该大家都知道,多说和网易云跟帖没有了,畅言要备案,对于对于挂靠在GitHub的博客非常的不友好,放弃!Disqus,不希望自己的博客,可以不分国界!也放弃!

    所以,将是我们要介绍的Gitment!

    Gitment评论模块

    Gitment is a comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.

    Gitment 基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

    想了解具体示例,可以点击查看官方Demo Page:Gitment Demo

    具体的接入我就不在这里说了,本文末有参考链接大家可以去了解学习,主要是说一下其中的坑点。

    Gitment坑点小结

    1、owner: 'Your GitHub ID'

    owner: '你的 GitHub ID',
    可以是你的GitHub用户名,也可以是github id,建议直接用GitHub用户名就可以。

    2、repo: 'The repo to store comments

    repo: '存储评论的 github repo'
    这个是你要存储评论内容的仓库名,可以与博客下的仓库,也可以新建一个仓库专门存储评论内容的。

    3、Error: Not Found问题

    owner或者repo配置错误了,注意名字和仓库名字的大小写。

    4、Error: Comments Not Initialized
    • 在注册OAuth Application这个步骤中,给Authorization callback URL指定的地址错了
    • 还没有在该页面的Gitment评论区登陆GitHub账号

    如果还是不行,可以参考另一个情况 Error: Comments Not Initialized · Issue #95 · imsun/gitment

    5、Error:validation failed

    issue的标签label有长度限制!labels的最大长度限制是50个字符。

    id: '页面 ID', // 可选。默认为 location.href

    这个id的作用,就是针对一个文章有唯一的标识来判断这篇本章。

    在issues里面,可以发现是根据网页标题来新建issues的,然后每个issues有两个labels(标签),一个是gitment,另一个就是id。

    所以明白了原理后,就是因为id太长,导致初始化失败,现在就是要让id保证在50个字符内。

    对应配置的id为:

    id: '<%= page.title %>'
    

    如果用网页标题也不能保证在50个字符!

    最后,我用文章的时间,这样长度是保证在50个字符内,完美解决!(避免了文章每次更新标题或路径时,会重新创建一个issue评论的问题。)

    id: '<%= page.date %>'
    
    6、gitment的汉化

    只需到模板里将原来定义CSS和JS的那两行改成:

    <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
    <script src="https://billts.site/js/gitment.js"></script>
    

    即可。来源:https://github.com/imsun/gitment/issues/104

    7、所有文章一键初始化评论

    配置正确的文章,第一次显示,提示还没有初始化:


    0225-Error Comments Not Initialized.png

    文章作者需要登陆GitHub授权后,会显示初始化按钮(注意,不要多点按钮,否则issues出现多条一样的):


    0225-Initialize Comments.png

    点击初始化按钮后,如果正常就会出现:


    0225-No Comment Yet.png

    关于自动初始化所有文章的功能,到本文编写时,还没有一个完善的解决方法,就是用脚本来执行自动化,有需要的可以详细了解:https://github.com/imsun/gitment/issues/5

    8、请保持克制,切勿滥用。

    作者提醒使用本项目的用户,请保持克制,切勿滥用。详见 Gitment:使用 GitHub Issues 搭建评论系统

    9、订阅issue

    issue订阅,有新评论时就可以通过邮件提醒,这个功能是把双刃剑,因为有些垃圾订阅邮件骚扰,大家看着用吧。

    总结

    Gitment目前来说,已经解决了一个博客简单的评论功能,点赞 / 有完整的 Markdown / GFM 和代码高亮支持!

    通过Gitment至少可以证明一点,生产力的发展有无限可能,环境的限制,会有的各种奇异的想法,或者奇异的东西出现,Gitment就是一个完美的证明,充分解决了一个简单博客的评论功能。另一方面,与国内的生活要求希望大家能够遵守规则,让GitHub和Gitment在我们生活中快乐成长!

    参考引用

    注:本文首发于 iHTCboy's blog,如若转载,请注明来源。

    相关文章

      网友评论

      • ceb626dcf2d0:多谢博主。折腾了我一上午的问题完美解决
      • 月肃生:Error: Not Found,
        用户名应该是没写错的,但是repo填的是什么地址,github仓库https全称吗??另外这个仓库需要配置什么吗??
        月肃生:@iHTCboy 谢了,已经配好了
        iHTCboy:@月肃生 没https,就名字,不用配置
      • nice_o:我的next 自带 gitment 但是没 id: '<%= page.title %>' 在主题配置里面
        nice_o:@mwan 可以的 已经解决了
        iHTCboy:@nice_o mwan说的对,你看看行不行啊!
        mwan:在 themes\next\layout_third-party\comments 目录下修改gitments.swig,找到以下代码修改

        function renderGitment(){
        var gitment = new {{CommentsClass}}({
        - id: window.location.pathname,
        + id: '{{ page.date }}',
        owner: '{{ theme.gitment.github_user }}',
        repo: '{{ theme.gitment.github_repo }}',
        {% if theme.gitment.mint %}
        lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,
        {% endif %}

        之后重新hexo g -d就ok了,请保证没有浏览器缓存。

        https://github.com/imsun/gitment/issues/112
      • nice_o:id: '<%= page.title %>' 这个在哪里配置的 真心找不到啊
      • cadb4a69b221:<%= page.date %>不能获取文档开头的date值
        iHTCboy:@调侃挺远的 感谢分享!url反编码后也是50个字符限制,虽然绝大多数情况下可以满足,但是还是有缺陷:joy:
        gb_QA_log:多谢博主
        Hexo+Next+gitment的Error:validation failed 我的方法:
        https://www.jianshu.com/p/d873394f12ce
        iHTCboy:@梦想天空分外蓝_b0db 你用的是什么hexo主题?

      本文标题:Gitment评论功能接入踩坑教程

      本文链接:https://www.haomeiwen.com/subject/udlrxftx.html