加入Disqus社区 分享一下集成方法

Disqus的跨站点交流功能非常吸引我,于是花了点时间给自己的博客装上。
过程实际上只有几步,关键是在于如何确定margin的大小,以此调节Disqus模块位置,使其与现用的主题(官方默认的Twenty Fifteen)融合。
安装完Disqus插件并且导入原有的评论,看上去是这样的:

比较难看 ,要是不能调我宁愿不装了。
看了下官方的说明,似乎需要自己动手调整CSS,Disqus的div id为’disqus_thread’。
我也尝试过用Wordpress自带的CSS编辑功能,但不太熟悉CSS,没有找到对应主题样式调节margin, padding的方法,将主题样式表中的media部分照搬过来似乎不管用。于是转投JavaScript,安装插件Custom CSS and Javascript
简单地分析后发现,只需要获取<article>的两边margin并为Disqus的div赋上并调节背景色即可,通过以下代码完成。

jQuery(document).ready(function () {
  var $article = jQuery('article').first();
  var $disqus = jQuery('#disqus_thread');
  $disqus.css('margin-left', $inner.css('margin-left')).css('margin-right', $inner.css('margin-right')).css('background-color', 'white').css('padding', '30px');
})

完成后的模样:

只是非常简单的一个小修改,希望能给不知如何整合Disqus的朋友一点思路。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注