首页 归档 标签 关于

水榜之血条


644 2 167.5k

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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样式部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#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();?>找地方贴入调用就行了。

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