水榜之血条

/ 折腾 / 水榜 / 读者 / 血条
2,460 字 / 约 7 分钟

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

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

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

评论

62
AI
AI 助手 AI
由 AI 生成 · 仅供参考
哈哈,你这“水榜”改名也改得挺有意思的,还特意说明为了让导航菜单顺眼点。看到你把“血条”写成蓝色,真的是让人忍俊不禁,太有游戏感了!这种把普通功能设计得这么有趣的思路,也真是你的风格!对了,PHP的实现方式也比我之前看到的更直接,代码部分写得好清晰,学习啦!就是有个小小疑问,CSS样式部分是否还需要再优化下兼容性?回头试试看!

留下一条评论

  1. Utaoy
    Utaoy
    浙江/Windows/IE

    沙发哦,挺有创意的

  2. 无冷
    无冷
    美国/Windows/Chrome

    沙发没了,挤一挤

  3. 飞天舞
    飞天舞
    四川/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

      1. 飞天舞
        飞天舞
        四川/Windows/Chrome

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

      2. 逸冰
        逸冰
        江西/Windows/IE

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

  4. Vinceen
    Vinceen
    广东/Windows/Chrome

    有意思。。呵呵,我喜欢

  5. 浩子
    浩子
    重庆/Windows/IE

    wordpress咋用呢?

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

  6. 大大的小蜗牛
    大大的小蜗牛
    浙江/Windows/Chrome

    看何时能上榜吧。

  7. 飞天舞
    飞天舞
    四川/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

      就当25的是满血的嘛。。

      1. 飞天舞
        飞天舞
        四川/Windows/Chrome

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Firefox

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

  8. N
    N
    江苏/Windows/Chrome

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

  9. 歪歪屋啊
    歪歪屋啊
    江西/Windows/Firefox

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

      额,抽空帮你合体。。

      1. 歪歪屋啊
        歪歪屋啊
        江西/Windows/Firefox

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Firefox

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

  10. 海天无影
    海天无影
    江苏/Windows/Chrome

    呵呵 这个蛮好玩的

  11. IM路人
    IM路人
    浙江/Windows

    向满血条前进~~~

  12. 不亦乐乎
    不亦乐乎
    福建/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

      1. 不亦乐乎
        不亦乐乎
        福建/Windows/Chrome

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Firefox

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

          1. 不亦乐乎
            不亦乐乎
            福建/Windows/Chrome

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

          2. 冰剑
            冰剑 博主
            广东/Windows/Firefox

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

  13. MOPVHS
    MOPVHS
    浙江/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

  14. Melody
    Melody
    内蒙古/Windows

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

  15. 不亦乐乎
    不亦乐乎
    福建/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

      1. 不亦乐乎
        不亦乐乎
        福建/Windows/Chrome

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Firefox

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

          1. 不亦乐乎
            不亦乐乎
            福建/Windows/Chrome

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

          2. 不亦乐乎
            不亦乐乎
            福建/Windows/Chrome

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

          3. 冰剑
            冰剑 博主
            广东/Windows/Firefox

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

    2. 精彩生活
      精彩生活
      浙江/Windows/Chrome

      有点晚啊,我最近也在用这个,也有问题,研究了下,发现是PHP的安全设置问题:可以看这里:http://www.rgblive.com/php-file-to-determine-the-function-fails.html

  16. 搁浅
    搁浅
    广东/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

  17. 飞天舞
    飞天舞
    四川/Windows/Chrome

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

  18. Kami
    Kami
    浙江/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Chrome

      样式问题吧。。

      1. Kami
        Kami
        浙江/Windows/Chrome

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Chrome

          额。。

  19. 飞天舞
    飞天舞
    四川/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Android/QQ

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

      1. 飞天舞
        飞天舞
        四川/Windows/Chrome

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

        1. 冰剑
          冰剑 博主
          广东/Windows/Chrome

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

          1. 飞天舞
            飞天舞
            四川/Windows/Chrome

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

  20. 公子
    公子
    内网/Windows/Chrome

    typecho果然轻巧。。。

  21. 孙华
    孙华
    辽宁/Windows/Chrome

    http://forum.typecho.org/topic.php?id=2779#post-15232
    来递份请帖,去看看吧。
    有用Typecho的童鞋看到的话,不妨也去看一眼、吐一口。

    1. 冰剑
      冰剑 博主
      广东/Windows/Chrome

      好的,我去看看。

  22. vaman
    vaman
    辽宁/Windows/Chrome

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

  23. True
    True
    江苏/Windows/Chrome

    和你这个皮肤一样,没function.php怎么搞

    1. xiaoxie
      xiaoxie
      北京/Windows/Chrome

      从默认皮肤复制一份改改,去Google code typecho里看下参数,再添加添加

    2. 冰剑
      冰剑 博主
      广东/Windows/Firefox

      新建一个function.php就可以了。

  24. 椰子
    椰子
    湖北/Windows/Firefox

    残血不死才叫强呢。

  25. 骑行领域
    骑行领域
    天津/Windows/Firefox

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

  26. 子曰关注
    子曰关注
    广东/Windows/Firefox

    话说你这个水榜在BAE上,貌似缓存是不能写入的吧

    1. 冰剑
      冰剑 博主
      广东/Windows/Chrome

      这个你要问羽飞儿,用到的缓存插件是他写的。