鲁鲁和非人类

老感觉我的下载站，互动交流不够，为了显得更热闹一点，我就调用了一些随机的留言评论 并输出

演示地址  页面右侧那一列图标就是

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

实现步骤如下

新建一个php文件 比如pinglun.php

<div class="icon-container">
<?php
function get_random_comments2($limit) {
    $comments = [];
    $db = Typecho_Db::get();
    $result = $db->fetchAll($db->select()->from('table.comments')
                  ->where('status = ?', 'approved')->order('RAND()')->limit($limit));
    
    foreach ($result as $row) {
        $post = $db->fetchRow($db->select('title', 'slug')->from('table.contents')->where('cid = ?', $row['cid']));
        $permalink = '/html/' . $row['cid'] . '.html';

        $comments[] = [
            'coid' => $row['coid'],
            'permalink' => $permalink,
            'gravatar' => Typecho_Common::gravatarUrl($row['mail'], 50),
            'author' => $row['author'],
            'text' => $row['text'],
            'excerpt' => Typecho_Common::subStr(strip_tags($row['text']), 0, 35, '...')
        ];
    }
    
    return $comments;
} 

// 定义缓存文件路径和有效时间
$cacheFile = __DIR__ . '/cache/comments_cache_random.html';
$cacheTime = 43200; // 12小时，单位为秒

// 检查是否存在缓存文件以及最后修改时间
if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $cacheTime)) {
    // 如果缓存文件存在且在有效时间内，则直接读取缓存文件内容
    readfile($cacheFile);
} else {
    ob_start(); // 开始输出缓冲区
    
    // 获取随机评论
    $comments = get_random_comments2(12);
    
    if (!empty($comments)) {
        foreach ($comments as $comment) {
            // 输出评论的HTML代码
            echo '',
                '<a href="', $comment['permalink'], '/comment-page-1#comment-', $comment['coid'], '" title="', $comment['author'], ' 发表评论 ', $comment['text'], '"target="_blank">',
                local_random_avatar($comments->author),
                '</a>',
                '';
        }
    }
    
    // 将输出的内容保存到缓存文件中
    file_put_contents($cacheFile, ob_get_flush());
}
?>
</div>

在需要的页面调用这个<?php $this->need('pinglun.php'); ?>

然后就是css样式定义下

如下

/*右侧固定位置的留言头像*/
.icon-container {
    position: fixed;
    top: 50%;
    right: 150px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-container img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    transition: transform 0.2s; /* 添加过渡效果 */
}
.icon-container img:hover {
    transform: scale(1.2); /* 鼠标滑过时放大到1.2倍 */
}

这样就可以了