水榜之血条

什么是水榜呢？水榜就是以前的读者墙啦，因为读者墙是三个字，感觉在导航菜单里很不河蟹，所以改名叫水墙。血条是什么呢？这个这个，我也不知道怎么描述，大家看下图就明白什么是血条了。

血条怎么是蓝色的？也对哦，用网游的用于应该是魔法值。管他呢，血条、魔法值随便啦，你们懂就行了。最初看到这个创意是在@无冷的博客里，请点击这里进行围观，他是用JS实现的，而我的是PHP实现。（@无冷的博客还好多好玩的，主题新颖、ajax翻页、下一页预加载，好多好多，到时候发现喜欢的就copy过来，哇哈哈。）

首先把下面这段代码函数加入到你主题下的function.php文件中。

function get_most_active_friends()
{
    $db = Typecho_Db::get();
    $sql = $db->select('COUNT(author) AS cnt','author', 'url', 'mail')
        ->from('table.comments')
        ->where('status = ?', 'approved')
        ->where('type = ?', 'comment')
        ->where('authorId = ?', '0')
        ->where('mail != ?', 'icesword28@qq.com')
        ->group('author')
        ->order('cnt', Typecho_Db::SORT_DESC)
        ->limit('');//这里面填写读取前几位用户
    $result = $db->fetchAll($sql);
    $mostactive = "";
    $option = Typecho_Widget::widget('Widget_Options')->plugin('GravatarCache');
    $maxNum = $result[0]['cnt'];
    foreach ($result as $one)
    {
        $width = round(36 / ($maxNum / $one['cnt']),2);//这里是血条长度的计算公式
        $mostactive .= '<li title="'.$one['author'].'＠'.$one['cnt'].'">
  ';
          $mostactive .= '<div class="imgactive">
    <img class="avatar" src="/usr/cache/avatar/';
        if(file_exists($option->dir.'/'.md5(strtolower($one['mail'])).'.jpg')) { 
            $mostactive .= md5(strtolower($one['mail']));
        } else {
            $mostactive .= 'default';
        }
        $mostactive .= '.jpg" />
  </div>';
          $mostactive .= '
  
  <div class="bgactive">
    <div class="degreeactive" style="width:'.$width.'px">
      
    </div>
  </div>
</li>';
    }
    echo $mostactive;
}

值得注意的是我用到了@羽飞的Gravatar头像缓存插件，没有用到这个插件的你们就把img标签这一段的代码修改为其他的获取方式吧。

血条计算公式方面，我当前所用的公式是，以评论数最多的人为满血状态，当然，你们也可以改成100为满血，这个随意啦。下面是CSS样式部分。

#content .mostactive li{
    border:1px solid #DFDFDF;
    border-radius:2px 2px 2px 2px;
    float:left;
    height:42px;
    list-style:none outside none;
    margin:0 11px 11px 0;
    padding:5px;
    width:36px
}
#content .mostactive .imgactive,#content .mostactive .imgactive img{
    display:block;
    width:36px;
    height:36px
}
#content .mostactive .bgactive{
    background:none repeat scroll 0 0 #DFDFDF;
    height:2px;
    margin-top:5px;
    width:36px
}
#content .mostactive .degreeactive{
    background:none repeat scroll 0 0 #1E5494;
    height:2px;
    width:36px
}

最后大家在把这段代码<?php get_most_active_friends();?>找地方贴入调用就行了。

至此，大功告成，如有问题，请留言，技术有限，能帮尽量帮。

THE-END

PREVIOUS 获得腾讯微博的信息

NEXT 分享下我的杀个花

水榜，一个有趣的名字，从读者墙变身而来，寓意着博友活跃度的象征。血条，一个游戏术语，在这里却巧妙地体现了博友们的贡献度。结合Gravatar头像缓存插件，让博友头像生动形象地跃然眼前。CSS样式的加入，更是为水榜增添了一丝活力与美感。这个创意真是妙啊，不仅展示了博友们的活跃情况，也让博客更具趣味性和互动性。赞一个！

已有 62 条评论

Utaoy

浙江 2011-04-15 17:02

回复

沙发哦，挺有创意的

无冷

美国 2011-04-15 17:26

回复

沙发没了，挤一挤

飞天舞

四川 2011-04-15 17:36

回复

这个有新意，我一会也来折腾下。
我发觉你不喜欢以插件的方式搞哈，这样我喜欢。
- 冰剑 MOD
  
  广东 2011-04-15 18:22
  
  回复
  
  能不用插件就尽量不用，用wordpress的时候养成的习惯，呵呵。
  
  飞天舞
  
  四川 2011-04-15 18:27
  
  回复
  
  很好很好，直接给集成到主题中了。
  
  逸冰
  
  江西 2011-04-16 23:13
  
  回复
  
  这个喜欢啊，集成很合你我的习惯啊，哇哈哈

Vinceen

广东 2011-04-15 19:09

回复

有意思。。呵呵，我喜欢

浩子

重庆 2011-04-15 20:01

回复

wordpress咋用呢？
- 冰剑 MOD
  
  广东 2011-04-15 21:37
  
  回复
  
  在读者墙代码的循环中进行操作咯，基本就和TE循环里面的一样。

大大的小蜗牛

浙江 2011-04-16 08:35

回复

看何时能上榜吧。

飞天舞

四川 2011-04-16 12:56

回复

我试了下，最多的评论才25个，暂时不加这个了。囧
- 冰剑 MOD
  
  广东 2011-04-16 13:51
  
  回复
  
  就当25的是满血的嘛。。
  
  飞天舞
  
  四川 2011-04-16 15:22
  
  回复
  
  算了，评论多起来后再搞这个。少了不好看
  
  冰剑 MOD
  
  广东 2011-04-16 16:06
  
  回复
  
  少了一样的，按血少的算。。
  就用我现在的计算公式。。
  第一名的话就是满血状态。。

N

江苏 2011-04-16 14:13

回复

创意不错，我也要自己弄一个~~

歪歪屋啊

江西 2011-04-16 16:35

回复

发现我竟然还有一个分身~~
- 冰剑 MOD
  
  广东 2011-04-16 16:43
  
  回复
  
  额，抽空帮你合体。。
  
  歪歪屋啊
  
  江西 2011-04-16 23:15
  
  回复
  
  合体后，威力有木有增加？？
  
  冰剑 MOD
  
  广东 2011-04-17 12:18
  
  回复
  
  你会升级，血量增加，离完全体更加近一些。

海天无影

江苏 2011-04-18 12:48

回复

呵呵这个蛮好玩的

IM路人

浙江 2011-04-19 13:35

回复

向满血条前进~~~

不亦乐乎

福建 2011-04-22 17:28

回复

哈哈，我刚刚在另外一个私人博客里加了无冷的这个功能，这个要研究研究，到底js版和php版区别在哪里！！
- 冰剑 MOD
  
  广东 2011-04-22 18:18
  
  回复
  
  JS版的交给访客的电脑处理，PHP版的交给服务器处理。。
  就这个区别，不过还是交给服务器好一些。。
  
  不亦乐乎
  
  福建 2011-04-22 18:19
  
  回复
  
  为啥交给服务器处理好一些呢？
  
  冰剑 MOD
  
  广东 2011-04-22 18:23
  
  回复
  
  服务器的执行效率肯定比家用机的快啊。
  再一个，进入这个页面，会先到服务器中执行后，然后返回过来，最后再执行JS。
  如果是放在服务器中执行的话，返回来的时候就已经处理好了，如果是JS的话，最后才会执行。
  
  不亦乐乎
  
  福建 2011-04-22 18:24
  
  回复
  
  谢谢你的解释，终于明白了，我还以为访客电脑处理会减轻服务器负担呢。
  另外，Wordpress的php版我搞出来了，哈哈。非常感谢你给的参考。
  
  冰剑 MOD
  
  广东 2011-04-22 18:29
  
  回复
  
  是可以减轻负担，但是这个负担完全可以忽略的。。
  不客气，博客在于折腾，哈哈。

MOPVHS

浙江 2011-04-23 23:11

回复

明白了，我需要加血！！！
- 冰剑 MOD
  
  广东 2011-04-24 11:33
  
  回复
  
  想快速满血吗？想站在第一位吗？
  试试本博客提供的收费道具“超级太阳水”，此道具可以让你瞬间满血。
  只要998，你就可以拥有。

Melody

内蒙古 2011-04-24 13:40

回复

额..试了下。。。放在页面貌似会纯文本输出
- 冰剑 MOD
  
  广东 2011-04-24 20:44
  
  回复
  
  额，不是吧。。
  我的是typecho，可能和wordpress的做法有些不同吧。
  wordpress的你可以看下这个：http://www.happyet.org/621.html

不亦乐乎

福建 2011-05-23 10:43

回复

我也换tp了，可是为啥这个cache没作用呢，头像都是默认的。
- 冰剑 MOD
  
  广东 2011-05-23 21:01
  
  回复
  
  什么cache没作用？头像的吗？？
  我用的是byends的头像插件。
  地址在这：http://www.byends.com/study/GravatarCache_V2-0-0.html
  
  不亦乐乎
  
  福建 2011-05-24 08:40
  
  回复
  
  我用的就是这个插件，不知道你里面的代码是不是有改过呢？我用你的代码不会显示缓存的头像，都是default.jpg。lms.im侧边栏，你帮我看看?
  
  冰剑 MOD
  
  广东 2011-05-24 21:02
  
  回复
  
  额，不知道了，你去问问byends吧。
  
  不亦乐乎
  
  福建 2011-05-25 08:30
  
  回复
  
  文中的代码你自己使用的没有改过么？
  
  不亦乐乎
  
  福建 2011-05-25 08:32
  
  回复
  
  好像你的这个插件根本没升级啊，新版本的头像缓存插件目录已经不是原来那个了。
  
  冰剑 MOD
  
  广东 2011-05-25 21:08
  
  回复
  
  我的是没升级啊，我用的之前的版本。
  新版的只是加了个可以让别人调用的方法而已，没什么区别的。
  具体你去问他吧，这插件是他弄得，我也不清楚你什么情况。
  我能告诉你的是，我这插件没做过任何修改。
- 精彩生活
  
  浙江 2012-06-27 16:49
  
  回复
  
  有点晚啊，我最近也在用这个，也有问题，研究了下，发现是PHP的安全设置问题：可以看这里：http://www.rgblive.com/php-file-to-determine-the-function-fails.html

搁浅

广东 2011-07-07 16:55

回复

要放在侧边栏，怎么弄呢？？
- 冰剑 MOD
  
  广东 2011-07-07 23:54
  
  回复
  
  没任何区别，改样式就行了。

飞天舞

四川 2011-07-09 18:39

回复

我也加上去了，不过评论数还是有点少

Kami

浙江 2011-12-07 20:05

回复

为什么我出来的是排版混乱的叉烧包。。。ORZ。。。。
- 冰剑 MOD
  
  广东 2011-12-07 20:38
  
  回复
  
  样式问题吧。。
  
  Kami
  
  浙江 2011-12-07 21:02
  
  回复
  
  ORZ。。。不知道怎么改。。。改了几次还是叉骚包~~~
  
  冰剑 MOD
  
  广东 2011-12-07 21:18
  
  回复
  
  额。。

飞天舞

四川 2011-12-13 10:27

回复

光是上墙，也应该给个链接吧。。。只是头像。。。
- 冰剑 MOD
  
  广东 2011-12-13 12:00
  
  回复
  
  一直就木有链接，以后也不考虑加，哇哈哈。
  上次想到个想法，再加个蓝条，统计最近30天的评论次数。
  但是木有时间折腾悲催。
  
  飞天舞
  
  四川 2011-12-13 12:01
  
  回复
  
  其实还可以加点功能，比如：
  单篇文章获取评论者的头像、信息等
  弄个沙发王这种。
  再加个蓝条，统计最近30天的评论次数。
  我是有想法，但做不出来呀！
  
  冰剑 MOD
  
  广东 2011-12-13 21:45
  
  回复
  
  我想整个工具箱，就是没时间。
  过年回家可以折腾一下。
  
  飞天舞
  
  四川 2011-12-13 21:50
  
  回复
  
  工具箱啊，插件版的多好呢，就像你以前那样定制，菜鸟也可以使用的。

公子

内网 2012-03-13 17:51

回复

typecho果然轻巧。。。

孙华

辽宁 2012-06-15 23:10

回复

http://forum.typecho.org/topic.php?id=2779#post-15232
来递份请帖，去看看吧。
有用Typecho的童鞋看到的话，不妨也去看一眼、吐一口。
- 冰剑 MOD
  
  广东 2012-06-16 04:18
  
  回复
  
  好的，我去看看。

vaman

辽宁 2012-07-02 17:41

回复

关键是不会css啊郁闷用各种吐槽榜都变形

True

江苏 2012-07-04 20:59

回复

和你这个皮肤一样，没function.php怎么搞
- xiaoxie
  
  北京 2012-07-04 21:22
  
  回复
  
  从默认皮肤复制一份改改，去Google code typecho里看下参数，再添加添加
- 冰剑 MOD
  
  广东 2012-07-05 06:26
  
  回复
  
  新建一个function.php就可以了。

椰子

湖北 2012-08-11 16:49

回复

残血不死才叫强呢。

骑行领域

天津 2012-11-06 22:14

回复

我这样的模版要咋修改啊，不好修改啊。求破在操作！

子曰关注

广东 2013-01-14 23:39

回复

话说你这个水榜在BAE上，貌似缓存是不能写入的吧
- 冰剑 MOD
  
  广东 2013-01-17 00:07
  
  回复
  
  这个你要问羽飞儿，用到的缓存插件是他写的。

AI 评论

添加评论

已有 62 条评论