TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

typecho个性读者墙

老狮博主
2021-03-12
/
3 评论
/
234 阅读
/
113 个字
/
百度已收录
03/12
本文最后更新于2021年03月12日,已超过32天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

这篇文章主要介绍了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;
}
Typecho美化代码
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2568.html(转载时请注明本文出处及文章链接)

评论 (3)
  1. 热搜榜 闲逛
    Windows 7 · Google Chrome

    文章不错支持一下吧

    2021-03-16 回复
  2. leelond 闲逛
    Windows 10 · Google Chrome

    是ben-lab吗?

    2021-03-15 回复
  3. 夏目贵志 闲逛
    Windows 10 · Google Chrome

    不错 不错~ mark

    2021-03-12 回复

互动读者

  • 老狮博主

    评论 9 次 | 文章 335 篇

  • 最后闲逛

    评论 5 次 | 文章 0 篇

  • 白嫖爱好者闲逛

    评论 4 次 | 文章 0 篇

  • 独乐乐闲逛

    评论 3 次 | 文章 0 篇

标签云

最新回复

  1. JamesQ闲逛
    2021-04-12
  2. eee闲逛
    2021-04-12
  3. lksani闲逛
    2021-04-12
  4. 拉克丝闲逛
    2021-04-12
  5. lksain闲逛
    2021-04-12