logo of Shuibaco

Disqus 小工具代码

2013. / 920字 / 1,274阅 / 0评

给 Blogger 装上 Disqus 后也再无其他念想,既来之则安之,还不如好好想想如何最大限度利用这个强大的第三方评论系统。由于种种原因(你们懂的),我废了 Google 的 js 文件,于是后台一些小工具就失去了作用。加之 Disqus 同步得也不咋地,所以我打算直接从 Disqus 下手调用最新评论。然而在对 Disqus 后台进行了一轮彻底的扫荡之后,我失望而返。好在谷哥给脸,我找到这样一篇文章:Disqus Various Widget Code for Blogger & Wordpress Blog(链接失效)。

几年前,Disqus 的后台有个叫做 Widget 的藏宝地,里面有官方提供的合计四种的评论小工具。然后不知道什么原因,Disqus 把它们给撤了,所以现在后台找不到。即便如此,之前安装的小工具仍在正常运作。于是当时看来只是抄了一遍官方文件以骗取流量的号称囊括建站技巧的网站,在这种时候突然开始为了 Blogger 事业发光发热。于是我在改变了价值观的同时,也厚面皮地抄了一遍,截个效果图,权当 Blogger 技巧的一分子。

Disqus 官方提供的小工具(Widget)一共有四种:评论最多的人(Top Commenters)、近期评论(Recent Comments)、热门文章(Popular Treads)和三合一(Combination)。下面我把每种的代码和效果图贴出来,并说明修改样式的方法。注意:your-websites-shortname 需要替换为对应网站 shortname。

评论最多的人(Top Commenters)

评论最多的人(Top Commenters)
评论最多的人(Top Commenters)
<div id="topcommenters" class="dsq-widget">
<h2 class="dsq-widget-title">Top Commenters</h2>
<script type="text/javascript" src="http://your-websites-shortname.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32"></script>
</div>

近期评论(Recent Comments)

近期评论(Recent Comments)
近期评论(Recent Comments)
<div id="recentcomments" class="dsq-widget">
<h2 class="dsq-widget-title">Recent Comments</h2>
<script type="text/javascript" src="http://your-websites-shortname.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200&hide_mods=0"></script>
</div>

热门文章(Popular Treads)

热门文章(Popular Treads)
热门文章(Popular Treads)
<div id="popularthreads" class="dsq-widget">
<h2 class="dsq-widget-title">Popular Threads</h2>
<script type="text/javascript" src="http://your-websites-shortname.disqus.com/popular_threads_widget.js?num_items=5"></script>
</div>

三合一(Combination)

三合一(Combination)
三合一(Combination)
<div class="heading blue">
<h2>Community</h2>
<script type="text/javascript" src="http://your-websites-shortname.disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=grey&default_tab=recent&excerpt_length=30"></script>
</div>

修改样式

首先,先把 your-websites-shortname 换成自己网站的 shortname(请在 Disqus 后台找)。然后可以直接在以上代码中插入 css,用 <style type="text/css"></style> 包起来。注意:在这其中的 css 为了覆盖 Disqus 的默认样式,需要加上 !important;比如我的代码是:

<div id="recentcomments" class="dsq-widget">
<style type="text/css">
li.dsq-widget-item {
margin: 0 0 -1px!important;
padding: 3px 0;
border-bottom: 1px dashed #eee;
}
</style>
<script type="text/javascript" src="http://ccyannblogger.disqus.com/recent_comments_widget.js?num_items=3&hide_avatars=1&avatar_size=32&excerpt_length=100&hide_mods=1"></script>
</div>

如果你想知道 Disqus 提供的可供修改的 css 有哪些,推荐使用谷歌浏览器 Chrome,右键就能找到各个项目对应的 css,在浏览器上更改并预览样式之后,复制 css 按照上述方法添加。

677°
入手 Kindle Paperwhite
Comments
Write a Comment
点击加载Disqus