× 920字 × 9阅

Disqus 小工具代码

给 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>
  • num_items 显示数量
  • hide_mods 是否隐藏博主评论:0不隐藏,1隐藏
  • hide_avatars 是否隐藏博主头像:0不隐藏,1隐藏
  • avatar_size 头像尺寸:32px/48px

近期评论(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>
  • excerpt_length 评论长度(字符)

热门文章(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 按照上述方法添加。

第一次知道 Kindle Paperwhite 还是因为豆哥阿姨的同事想托我们在日本买一台,但那时候日本也没有,所以给婉言拒绝了。很久以后的前一个月,为了买导师出的新书,我上亚马逊瞅了瞅,结果主页大大的 Paperwhite 的广告以及便宜得令人发指的价格震惊了我。我迅速发扬“有便宜不占就是吃亏”的精神,网搜了一堆堆的评价,发现从来都是艳羡美帝的人民这次倒是更加心水日亚的产品。我到美亚上一看,咦,这么贵,掐指一算,整整差了一百多块人民币。这更坚定了我要入手 Paperwhite 的信念。我又迅速找到导师的书,发现有 Kindle 版,于是我就放心地下单了。连夜我又在乐天上选了个皮套,比官方的便宜还是一百多块人民币,虽然肯定没有官方的质量那么好,但是够用就行嘛。 kindle paperwhite 很激动地开箱拍照,盒子背后大大的“中国制造”让我非常自豪。有图有真相,我就不多话了。请从左上角开始顺时针浏览。 快递出了些小问题,辗转着终于到的时候我激动得呀。......
点击加载Disqus评论