typecho个性读者墙

chen'mo
2021-03-13 / 7 评论 / 3,000 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年03月13日,已超过1111天没有更新,若内容或图片失效,请留言反馈。

这篇文章主要介绍了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;
}
CommentApprove for Typecho
« 上一篇 03-12
无插件实现Typecho 独立友链页面
下一篇 » 03-14

评论 (7)

插入图片
  1. 头像
    曼亚灿 Lv.1   安徽省合肥市
    Windows 10 · Google Chrome
    沙发

    感谢老哥的分享,我也搞出来了:https://blog.manyacan.com/friends.html,多多交流以后~

    回复
  2. 头像
    林尽欢 Lv.1   天津市天津市
    Windows 10 · Google Chrome
    板凳

    在哪调用啊

    回复
  3. 头像
    QQ Lv.1   辽宁省大连市
    Windows 10 · Google Chrome
    地毯

    太难了... 503表情

    回复
  4. 头像
    七栀 Lv.1   福建省福州市
    Android · Google Chrome
    第4楼

    这个报错,怎么弄

    回复
    1. 头像
      chen'mo 作者 Lv.5   湖南省娄底市
      Windows 10 · Google Chrome
      @ 七栀

      报什么错?

      回复
      1. 头像
        七栀 Lv.1   福建省福州市
        Android · Google Chrome
        @ chen'mo

        这个
        datadast query error

        回复
        1. 头像
          chen'mo 作者 Lv.5   湖南省娄底市
          Windows 10 · Google Chrome
          @ 七栀

          按教程我是成功了的,你看看是哪一步错了。

          回复