Github pages 博客添加评论功能

2016-01-03 demon7452 更多博文 » 博客 » GitHub »

git

原文链接 https://demon7452.github.io/2016/01/03/Github-pages-%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E5%8A%9F%E8%83%BD.html
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


Github pages 博客添加评论功能

由于被墙的原因,所以国内一般推荐使用类似 DISQUS 的 ”多说“ 评论插件

注册多说用户

在使用多说评论插件之前,需要先前往多说官网注册一个帐号, 将自己的博客网站与多说帐号绑定,并获得一个短域名(short_name)。

添加评论框的标签

 <div class="ds-thread" data-thread-key="文章在原站点中的id或其他唯一标识" data-title="您的文章标题" ></div>
 #例如:
 <div class="ds-thread" data-thread-key="{{ page.title }}" data-title="{{ page.title }}" data-url="{{ page.url }}"></div>

添加多说的js

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    var duoshuoQuery = {short_name:"填写你的短域名"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = false;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>
<!-- 多说公共JS代码 end -->

自己修改评论框样式(可选)

添加css样式,将评论头像修改为圆形,并添加旋转效果。

#ds-reset .ds-avatar img {
  width: 54px !important;
  height: 54px !important;
  -webkit-border-radius: 27px !important;
  -moz-border-radius: 27px !important;
  border-radius: 27px !important;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
#ds-reset .ds-powered-by {
  display: none;
}

参考文档

1.多说官网 2.DISQUS官网 3.为 Jekyll 添加多说评论系统