博主 阿呆生活志
阿呆生活志 记录自已点滴,编织岁月故事。
菜单

typecho 调用自定义评论数实现读者墙的效果

懒惰行动得如此缓慢,贫穷很快就能超过它。——富兰克林
生活 共 1192 字 计 14 次阅读 需要 1 分钟

逛鲁鲁和非人类博客看到好看的读者墙,把他的文章转过来分享。效果截图如下2025-06-28T15:05:40.webp

实现代码如下

<style>
.comment-row {
        display: flex;
        flex-wrap: wrap;  
        justify-content: flex-start;  
        margin-bottom: 10px;  /* 添加这行代码实现上下行间隔 10px,您可以根据需求调整数值 */
    }

.recent-comment img:hover {
        opacity: 1;
    }

.recent-comment img {
    opacity: 0.8;
    transition: opacity 0.3s ease;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 0;
    }
</style>

<?php
$this->widget('Widget_Comments_Recent', 'pageSize=518')->to($comments);
echo '<div class="comment-row">';
while ($comments->next()) {
    echo '<div class="recent-comment">';
    $randomNumber = rand(1, 526);
    echo '<a href="'. $comments->permalink. '" target="_blank" title="'. $comments->text. '"><img src="https://www.jian27.com/img/avatar/'. $randomNumber. '.png" width="25" height="25" alt="'. $comments->text. '" /></a>';
    echo '</div>';
}
echo '</div>';
?>

演示地址

https://www.jian27.com/html/guestbook.html

头像图片地址你们要自己修改成自己的地址。否则用不了

转自:https://www.myhelen.cn/helen/261.htm

昵称
邮箱
站点
填写信息
返回
发表
返回留言
😎 此页面还没有评论呢,欢迎留下第一个脚印