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


Disqus的跨站点交流功能非常吸引我,于是花了点时间给自己的博客装上。

过程实际上只有几步,关键是在于如何确定margin的大小,以此调节Disqus模块位置,使其与现用的主题(官方默认的Twenty Fifteen)融合。

安装完Disqus插件并且导入原有的评论,看上去是这样的:

QQ截图20160114222144

比较难看 ,要是不能调我宁愿不装了。

看了下官方的说明,似乎需要自己动手调整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');
})

完成后的模样:

QQ截图20160114223026

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

One thought on “加入Disqus社区 分享一下集成方法”

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

w

Connecting to %s