水榜之血条

博客 hack
移动设备上继续阅读

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

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

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