typecho个性读者墙

这篇文章主要介绍了Typecho CSS3个性留言板读者墙页面的添加方法,需要的朋友可以参考下。

首先、把下面代码粘贴到当前主题的functions.php页面（Joe主题放在core/core.php）：

//获得读者墙
function getFriendWall()
{
    $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 != ?', 'admin@ben-lab.com')   //排除自己上墙
              ->group('author')
              ->order('cnt', Typecho_Db::SORT_DESC)
              ->limit('15');    //读取几位用户的信息
    $result = $db->fetchAll($sql);

    if (count($result) > 0) {
        $maxNum = $result[0]['cnt'];
        foreach ($result as $value) {
            $mostactive .= '<li><a target="_blank" rel="nofollow" href="' . $value['url'] . '"><span class="pic" style="background: url(http://1.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=36&d=&r=G) no-repeat; "></span><em>' . $value['author'] . '</em><strong>+' . $value['cnt'] . '</strong><br />' . $value['url'] . '</a></li>';
        }
        echo $mostactive;
    }
}

然后在想要显示的位置调用以下代码：

<?php getFriendWall(); ?>

最后再美化一下：

<div id="list-post">
<ul class='readers-list'>
<?php getFriendWall(); ?>
</ul></div>

在CSS文件（Joe主题在assets/css/joe.min.css）放入以下代码：

/*读者墙*/
.readers-list {
    line-height: 16px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readers-list li {
    width: 180px;
    float: left;
    list-style: none;
}

.readers-list a,.readers-list a:hover strong {
    background-color: #f2f2f2;
    background-image: -webkit-linear-gradient(#f8f8f8,#f2f2f2);
    background-image: -moz-linear-gradient(#f8f8f8,#f2f2f2);
    background-image: linear-gradient(#f8f8f8,#f2f2f2);
}

.readers-list a {
    position: relative;
    display: block;
    height: 30px;
    margin: 4px;
    padding: 2px 4px 2px 44px;
    color: #999;
    overflow: hidden;
    border: #ccc 1px solid;
    border-radius: 2px;
    box-shadow: #eee 0 0 2px;
    font-size: 10px;
    line-height: 14px;
}

.readers-list .pic,.readers-list em,.readers-list strong {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.readers-list .pic {
    width: 30px;
    height: 30px;
    float: left;
    margin: 0 8px 0 -40px;
    border-radius: 2px;
}

.readers-list em {
    color: #666;
    font-style: normal;
    margin-right: 10px;
    font: bold 12px/16px microsoft yahei;
}

.readers-list strong {
    color: #ddd;
    width: 34px;
    text-align: right;
    position: absolute;
    right: 6px;
    top: 4px;
    font: bold 14px/16px microsoft yahei;
}

.readers-list a:hover {
    border-color: #bbb;
    box-shadow: #ccc 0 0 2px;
    background-color: #fff;
    background-image: none;
}

.readers-list a:hover .pic {
    opacity: .6;
    margin-left: 0;
}

.readers-list a:hover em {
    color: #EE8B17;
    font: bold 12px/36px microsoft yahei;
}

.readers-list a:hover strong {
    color: #EE8B17;
    right: 134px;
    top: 0;
    text-align: center;
    border-right: #ccc 1px solid;
    height: 34px;
    line-height: 34px;
}