水榜之血条

51 Comments

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



血条怎么是蓝色的?也对哦,用网游的用于应该是魔法值。管他呢,血条、魔法值随便啦,你们懂就行了。最初看到这个创意是在 @无冷 的博客里,请点击这里进行围观,他是用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();?>

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

已有 51 条评论 »

  1. Utaoy
    Utaoy 2011-04-15 17:02:11

    沙发哦,挺有创意的

  2. 无冷
    无冷 2011-04-15 17:26:40

    沙发没了,挤一挤

  3. mybg
    mybg 2011-04-15 17:36:10

    这个有新意,我一会也来折腾下。
    我发觉你不喜欢以插件的方式搞哈,这样我喜欢。

    1. 冰剑
      冰剑 2011-04-15 18:22:41

      能不用插件就尽量不用,用wordpress的时候养成的习惯,呵呵。

      1. mybg
        mybg 2011-04-15 18:27:19

        很好很好,直接给集成到主题中了。

      2. 逸冰
        逸冰 2011-04-16 23:13:02

        这个喜欢啊,集成很合你我的习惯啊,哇哈哈

  4. Vinceen
    Vinceen 2011-04-15 19:09:25

    有意思。。呵呵,我喜欢

  5. 浩子
    浩子 2011-04-15 20:01:24

    wordpress咋用呢?

    1. 冰剑
      冰剑 2011-04-15 21:37:02

      在读者墙代码的循环中进行操作咯,基本就和TE循环里面的一样。

  6. 大大的小蜗牛
    大大的小蜗牛 2011-04-16 08:35:01

    看何时能上榜吧。

  7. mybg
    mybg 2011-04-16 12:56:09

    我试了下,最多的评论才25个,暂时不加这个了。囧

    1. 冰剑
      冰剑 2011-04-16 13:51:01

      就当25的是满血的嘛。。

      1. mybg
        mybg 2011-04-16 15:22:51

        算了,评论多起来后再搞这个。少了不好看

        1. 冰剑
          冰剑 2011-04-16 16:06:28

          少了一样的,按血少的算。。
          就用我现在的计算公式。。
          第一名的话就是满血状态。。

  8. N
    N 2011-04-16 14:13:30

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

  9. yywr
    yywr 2011-04-16 16:35:51

    发现我竟然还有一个分身~~

    1. 冰剑
      冰剑 2011-04-16 16:43:15

      额,抽空帮你合体。。

      1. yywr
        yywr 2011-04-16 23:15:26

        合体后,威力有木有增加??

        1. 冰剑
          冰剑 2011-04-17 12:18:03

          你会升级,血量增加,离完全体更加近一些。

  10. 海天
    海天 2011-04-18 12:48:21

    呵呵 这个蛮好玩的

  11. IM路人
    IM路人 2011-04-19 13:35:40

    向满血条前进~~~

  12. LMS
    LMS 2011-04-22 17:28:11

    哈哈,我刚刚在另外一个私人博客里加了无冷的这个功能,这个要研究研究,到底js版和php版区别在哪里!!

    1. 冰剑
      冰剑 2011-04-22 18:18:29

      JS版的交给访客的电脑处理,PHP版的交给服务器处理。。
      就这个区别,不过还是交给服务器好一些。。

      1. LMS
        LMS 2011-04-22 18:19:34

        为啥交给服务器处理好一些呢?

        1. 冰剑
          冰剑 2011-04-22 18:23:22

          服务器的执行效率肯定比家用机的快啊。
          再一个,进入这个页面,会先到服务器中执行后,然后返回过来,最后再执行JS。
          如果是放在服务器中执行的话,返回来的时候就已经处理好了,如果是JS的话,最后才会执行。

          1. LMS
            LMS 2011-04-22 18:24:53

            谢谢你的解释,终于明白了,我还以为访客电脑处理会减轻服务器负担呢。
            另外,Wordpress的php版我搞出来了,哈哈。非常感谢你给的参考。

            1. 冰剑
              冰剑 2011-04-22 18:29:50

              是可以减轻负担,但是这个负担完全可以忽略的。。
              不客气,博客在于折腾,哈哈。

  13. mopvhs
    mopvhs 2011-04-23 23:11:25

    明白了,我需要加血!!!

    1. 冰剑
      冰剑 2011-04-24 11:33:55

      想快速满血吗?想站在第一位吗?
      试试本博客提供的收费道具“超级太阳水”,此道具可以让你瞬间满血。
      只要998,你就可以拥有。

  14. Melody
    Melody 2011-04-24 13:40:42

    额..试了下。。。放在页面貌似会纯文本输出

    1. 冰剑
      冰剑 2011-04-24 20:44:40

      额,不是吧。。
      我的是typecho,可能和wordpress的做法有些不同吧。
      wordpress的你可以看下这个:http://www.happyet.org/621.html

  15. LMS
    LMS 2011-05-23 10:43:34

    我也换tp了,可是为啥这个cache没作用呢,头像都是默认的。

    1. binjoo
      binjoo 2011-05-23 21:01:15

      什么cache没作用?头像的吗??
      我用的是byends的头像插件。
      地址在这:http://www.byends.com/study/GravatarCache_V2-0-0.html

      1. LMS
        LMS 2011-05-24 08:40:26

        我用的就是这个插件,不知道你里面的代码是不是有改过呢?我用你的代码不会显示缓存的头像,都是default.jpg。lms.im侧边栏,你帮我看看?

        1. binjoo
          binjoo 2011-05-24 21:02:53

          额,不知道了,你去问问byends吧。

          1. LMS
            LMS 2011-05-25 08:30:50

            文中的代码你自己使用的没有改过么?

          2. LMS
            LMS 2011-05-25 08:32:20

            好像你的这个插件根本没升级啊,新版本的头像缓存插件目录已经不是原来那个了。

            1. binjoo
              binjoo 2011-05-25 21:08:14

              我的是没升级啊,我用的之前的版本。
              新版的只是加了个可以让别人调用的方法而已,没什么区别的。
              具体你去问他吧,这插件是他弄得,我也不清楚你什么情况。
              我能告诉你的是,我这插件没做过任何修改。

  16. 搁浅
    搁浅 2011-07-07 16:55:49

    要放在侧边栏,怎么弄呢??

    1. 冰剑
      冰剑 2011-07-07 23:54:51

      没任何区别,改样式就行了。

  17. mybg
    mybg 2011-07-09 18:39:28

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

  18. Kami
    Kami 2011-12-07 20:05:41

    为什么我出来的是排版混乱的叉烧包。。。ORZ。。。。

    1. 冰剑
      冰剑 2011-12-07 20:38:36

      样式问题吧。。

      1. Kami
        Kami 2011-12-07 21:02:50

        ORZ。。。不知道怎么改。。。改了几次还是叉骚包~~~

        1. 冰剑
          冰剑 2011-12-07 21:18:44

          额。。

  19. 飞天舞
    飞天舞 2011-12-13 10:27:30

    光是上墙,也应该给个链接吧。。。只是头像。。。

    1. 冰剑
      冰剑 2011-12-13 12:00:01

      一直就木有链接,以后也不考虑加,哇哈哈。
      上次想到个想法,再加个蓝条,统计最近30天的评论次数。
      但是木有时间折腾悲催。

      1. 飞天舞
        飞天舞 2011-12-13 12:01:57

        其实还可以加点功能,比如:
        单篇文章获取评论者的头像、信息等
        弄个沙发王这种。
        再加个蓝条,统计最近30天的评论次数。
        我是有想法,但做不出来呀!

        1. 冰剑
          冰剑 2011-12-13 21:45:02

          我想整个工具箱,就是没时间。
          过年回家可以折腾一下。

          1. 飞天舞
            飞天舞 2011-12-13 21:50:02

            工具箱啊,插件版的多好呢,就像你以前那样定制,菜鸟也可以使用的。

  20. 加密软件
    加密软件 2012-02-20 15:57:47

    挺不错的啊!支持一下!