什么是水榜呢?水榜就是以前的读者墙啦,因为读者墙是三个字,感觉在导航菜单里很不河蟹,所以改名叫水墙。血条是什么呢?这个这个,我也不知道怎么描述,大家看下图就明白什么是血条了。
血条怎么是蓝色的?也对哦,用网游的用于应该是魔法值。管他呢,血条、魔法值随便啦,你们懂就行了。最初看到这个创意是在@无冷的博客里,请点击这里进行围观,他是用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();?>
找地方贴入调用就行了。
至此,大功告成,如有问题,请留言,技术有限,能帮尽量帮。