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的朋友一点思路。