水榜之血条

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

血条怎么是蓝色的?也对哦,用网游的用于应该是魔法值。管他呢,血条、魔法值随便啦,你们懂就行了。最初看到这个创意是在@无冷的博客里,请点击这里进行围观,他是用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
水榜读者血条
获得腾讯微博的信息
分享下我的杀个花

添加评论

已有 62 条评论

由 Google AI Gemini Pro 生成

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

Utaoy
Utaoy 2011-04-15 17:02 回复
浙江 Windows 7 Internet Explorer

沙发哦,挺有创意的

无冷
无冷 2011-04-15 17:26 回复
美国 Windows 7 Chrome

沙发没了,挤一挤

飞天舞
飞天舞 2011-04-15 17:36 回复
四川 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-15 18:22 回复
广东 Windows 7 Firefox

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

飞天舞
飞天舞 2011-04-15 18:27 回复
四川 Windows XP Chrome

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

逸冰
逸冰 2011-04-16 23:13 回复
江西 Windows XP Internet Explorer

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

Vinceen
Vinceen 2011-04-15 19:09 回复
广东 Windows XP Chrome

有意思。。呵呵,我喜欢

浩子
浩子 2011-04-15 20:01 回复
重庆 Windows 7 Internet Explorer

wordpress咋用呢?

冰剑
冰剑 MOD 2011-04-15 21:37 回复
广东 Windows 7 Firefox

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

大大的小蜗牛
大大的小蜗牛 2011-04-16 08:35 回复
浙江 Windows 2003 Chrome

看何时能上榜吧。

飞天舞
飞天舞 2011-04-16 12:56 回复
四川 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-16 13:51 回复
广东 Windows 7 Firefox

就当25的是满血的嘛。。

飞天舞
飞天舞 2011-04-16 15:22 回复
四川 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-16 16:06 回复
广东 Windows 7 Firefox

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

N
N 2011-04-16 14:13 回复
江苏 Windows XP Chrome

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

yywr
yywr 2011-04-16 16:35 回复
江西 Windows 7 Firefox

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

冰剑
冰剑 MOD 2011-04-16 16:43 回复
广东 Windows 7 Firefox

额,抽空帮你合体。。

yywr
yywr 2011-04-16 23:15 回复
江西 Windows 7 Firefox

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

冰剑
冰剑 MOD 2011-04-17 12:18 回复
广东 Windows 7 Firefox

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

海天无影
海天无影 2011-04-18 12:48 回复
江苏 Windows XP Chrome

呵呵 这个蛮好玩的

IM路人
IM路人 2011-04-19 13:35 回复
浙江 Windows XP Safari

向满血条前进~~~

LMS
LMS 2011-04-22 17:28 回复
福建 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-22 18:18 回复
广东 Windows 7 Firefox

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

LMS
LMS 2011-04-22 18:19 回复
福建 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-22 18:23 回复
广东 Windows 7 Firefox

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

LMS
LMS 2011-04-22 18:24 回复
福建 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-04-22 18:29 回复
广东 Windows 7 Firefox

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

mopvhs
mopvhs 2011-04-23 23:11 回复
浙江 Windows 7 Chrome

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

冰剑
冰剑 MOD 2011-04-24 11:33 回复
广东 Windows 7 Firefox

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

Melody
Melody 2011-04-24 13:40 回复
内蒙古 Windows XP Safari

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

冰剑
冰剑 MOD 2011-04-24 20:44 回复
广东 Windows 7 Firefox

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

LMS
LMS 2011-05-23 10:43 回复
福建 Windows XP Chrome

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

binjoo
binjoo MOD 2011-05-23 21:01 回复
广东 Windows 7 Firefox

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

LMS
LMS 2011-05-24 08:40 回复
福建 Windows XP Chrome

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

binjoo
binjoo MOD 2011-05-24 21:02 回复
广东 Windows 7 Firefox

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

LMS
LMS 2011-05-25 08:30 回复
福建 Windows XP Chrome

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

LMS
LMS 2011-05-25 08:32 回复
福建 Windows XP Chrome

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

binjoo
binjoo MOD 2011-05-25 21:08 回复
广东 Windows 7 Firefox

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

精彩生活
精彩生活 2012-06-27 16:49 回复
浙江 Windows 7 Chrome

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

搁浅
搁浅 2011-07-07 16:55 回复
广东 Windows 7 Chrome

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

冰剑
冰剑 MOD 2011-07-07 23:54 回复
广东 Windows 7 Firefox

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

飞天舞
飞天舞 2011-07-09 18:39 回复
四川 Windows XP Chrome

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

Kami
Kami 2011-12-07 20:05 回复
浙江 Windows 7 Chrome

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

冰剑
冰剑 MOD 2011-12-07 20:38 回复
广东 Windows XP Chrome

样式问题吧。。

Kami
Kami 2011-12-07 21:02 回复
浙江 Windows 7 Chrome

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

冰剑
冰剑 MOD 2011-12-07 21:18 回复
广东 Windows XP Chrome

额。。

飞天舞
飞天舞 2011-12-13 10:27 回复
四川 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-12-13 12:00 回复
广东 Android Safari

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

飞天舞
飞天舞 2011-12-13 12:01 回复
四川 Windows XP Chrome

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

冰剑
冰剑 MOD 2011-12-13 21:45 回复
广东 Windows XP Chrome

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

飞天舞
飞天舞 2011-12-13 21:50 回复
四川 Windows XP Chrome

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

公子
公子 2012-03-13 17:51 回复
内网 Windows XP Chrome

typecho果然轻巧。。。

丁臣
丁臣 2012-06-15 23:10 回复
辽宁 Windows 7 Chrome

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

冰剑
冰剑 MOD 2012-06-16 04:18 回复
广东 Windows 7 Chrome

好的,我去看看。

vaman
vaman 2012-07-02 17:41 回复
辽宁 Windows 7 Chrome

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

True
True 2012-07-04 20:59 回复
江苏 Windows 7 Chrome

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

xiaoxie
xiaoxie 2012-07-04 21:22 回复
北京 Windows 7 Chrome

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

冰剑
冰剑 MOD 2012-07-05 06:26 回复
广东 Windows 7 Firefox

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

椰子
椰子 2012-08-11 16:49 回复
湖北 Windows 7 Firefox

残血不死才叫强呢。

骑行领域
骑行领域 2012-11-06 22:14 回复
天津 Windows 7 Firefox

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

子曰关注
子曰关注 2013-01-14 23:39 回复
广东 Windows 7 Firefox

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

冰剑
冰剑 MOD 2013-01-17 00:07 回复
广东 Windows XP Chrome

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

    目录
    移动设备上继续阅读