本教程主要教你如何不用插件给你的 Typecho 博客blog侧边或者留言板添加一个带读者留言次数气泡的读者墙。
具体效果看下图：
模板代码，放入你typecho模板
<div id="reader">
<h2 class="module-title"><strong>读者风云榜</strong></h2>
<ul class="fno">
<?php
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
->select('COUNT(author) AS cnt','author', 'url', 'mail')
->from('table.comments')
->where('created > ?', $period )
->where('status = ?', 'approved')
->where('type = ?', 'comment')
->where('authorId = ?', '0')
->group('author')
->order('cnt', Typecho_Db::SORT_DESC)
->limit('25')
);
$mostactive = '';
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
foreach ($counts as $count) {
$avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=60';
$c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
$mostactive .= "<li><a href='" . $c_url . "' title='" . $count['author'] . " (参与" . $count['cnt'] . "次探讨)' rel='nofollow' target='_blank'><img src='" . $avatar . "' alt='" . $count['author'] . "的照片' class='avatar' /><small>" . $count['author'] . "</small><i>" . $count['cnt'] . "</i></a></li>\n";
}
echo $mostactive; ?></ul>
<!--end/.reader/--></div>
CSS样式部分 放入.css文件中
#reader {}
#reader ul {list-style: none;}
#reader li {padding: 1px 1px 0 0;float: left;height: auto;}
#reader a {position: relative;float: left;display: block;text-align: center;text-decoration: none;}
#reader a img{ width: 60px; height:60px;z-index: 0;border: 0;margin: 0;display: block;}
#reader a small {line-height: 60px; font-size: 12px;padding: 8px 0 ; display: none; position: absolute;bottom: 0px;top:0px; left: 0px;right: 0px;z-index: 1;
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72); *background:#fff; *filter:alpha(opacity=72);color: #111;}
#reader a:hover small {display: block;}
#reader a i {font-size: 10px;font-style: normal; width: 18px; height: 18px;line-height: 18px; background-color: red;color: #fff;position: absolute;top: 1px;right: 1px;border: 2px #fff solid; border-radius: 18px;}
.float-no{zoom: 1; }
.float-no:after{content: "\20"; display: block; height: 0; clear: both; visibility: hidden; }
模板二 typecho读者墙页面单栏版 1000px宽
效果截图
模板代码，放入你typecho模板
<div id="reader">
<h2 class="module-title"><strong>读者风云榜</strong></h2>
<ul class="fno">
<?php
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
->select('COUNT(author) AS cnt','author', 'url', 'mail')
->from('table.comments')
->where('created > ?', $period )
->where('status = ?', 'approved')
->where('type = ?', 'comment')
->where('authorId = ?', '0')
->group('author')
->order('cnt', Typecho_Db::SORT_DESC)
->limit('35')
);
$mostactive = '';
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
foreach ($counts as $count) {
$avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=125';
$c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
$mostactive .= "<li><a href='" . $c_url . "' title='" . $count['author'] . " (参与" . $count['cnt'] . "次探讨)' rel='nofollow' target='_blank'><img src='" . $avatar . "' alt='" . $count['author'] . "的照片' class='avatar' /><small>" . $count['author'] . "</small><i>" . $count['cnt'] . "</i></a></li>\n";
}
echo $mostactive; ?></ul>
<!--end/.reader/--></div>
CSS样式部分 放入.css文件中
#reader {}
#reader ul {list-style: none; margin: 0 -9px;}
#reader li {padding: 1px 1px 0 0; float: left; }
#reader a {position: relative; display: block; margin: 9px; text-align: center; text-decoration: none;}
#reader a img{ width: 125px; height:125px;z-index: 0;border: 0;margin: 0;display: block;}
#reader a small {line-height: 125px; font-size: 12px;padding: 8px 0 ; display: none; position: absolute;bottom: 0px;top:0px; left: 0px;right: 0px;z-index: 1;
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72); *background:#fff; *filter:alpha(opacity=72);color: #111;}
#reader a:hover small {display: block;}
#reader a i {font-size: 10px; font-style: normal; width: 38px; height: 18px; line-height: 18px; background-color: #F56763; color: #fff; position: absolute;
如果你不会代码，或者怕代码出错，你也可以选择本站之前分享过得两个读者墙插件：Typecho 读者墙头像缓存插件 Avatars和Typecho 读者墙插件 Viewers。