sidebar-right.php6.5 KB
<?php
// 假设 $pdo 已经在 config.php 中定义并连接成功
// --- 1. 统计数据 ---
$stats = [
'posts' => $pdo->query("SELECT COUNT(*) FROM posts")->fetchColumn(),
'comments' => $pdo->query("SELECT COUNT(*) FROM comments WHERE status='approved'")->fetchColumn(),
'links' => $pdo->query("SELECT COUNT(*) FROM links")->fetchColumn(),
'tags' => $pdo->query("SELECT COUNT(*) FROM tags")->fetchColumn()
];
// 获取最新评论 (限制 10 条)
// 注意:这里使用了 LEFT JOIN users 来处理游客评论(user_id 为 NULL 的情况)
$recent_comments = $pdo->query("
SELECT
c.id,
c.content,
c.created_at,
c.post_id,
u.username,
c.guest_name
FROM comments c
LEFT JOIN users u ON c.user_id = u.id
WHERE c.status = 'approved'
ORDER BY c.created_at DESC
LIMIT 10
")->fetchAll(PDO::FETCH_ASSOC);
?>
<aside class="sidebar">
<div class="card stats-card">
<div class="sidebar-title">统计</div>
<ul class="stats-list">
<li><span>文章总数</span><b><?php echo $stats['posts']; ?></b></li>
<li><span>评论总数</span><b><?php echo $stats['comments']; ?></b></li>
<li><span>标签总数</span><b><?php echo $stats['tags']; ?></b></li>
<li><span>友链总数</span><b><?php echo $stats['links']; ?></b></li>
</ul>
</div>
<div class="card">
<div class="sidebar-title">搜索文章</div>
<nav>
<!-- 【新增】全局搜索框 -->
<form action="search.php" method="GET" class="header-search">
<input type="text" name="q" placeholder="搜索文章..." value="<?php echo htmlspecialchars($keyword); ?>">
<button type="submit">搜索</button>
</form>
</nav>
</div>
<div class="card">
<div class="sidebar-title">最新评论</div>
<div class="comment-list">
<?php if (!empty($recent_comments)): ?>
<?php foreach ($recent_comments as $comment): ?>
<a href="/post/<?php echo $comment['post_id']; ?>#comment-<?php echo $comment['id']; ?>" class="cb-comment-item">
<div class="comment-content">
<!-- 截取过长的评论内容 -->
<?php echo mb_substr(strip_tags($comment['content']), 0, 30) . '...'; ?>
</div>
<div class="comment-meta">
<span class="comment-author">
<!-- 优先显示用户名,如果是游客则显示 guest_name -->
<?php echo htmlspecialchars($comment['username'] ?: $comment['guest_name']); ?>
</span>
<span class="comment-time">
<?php echo date('m-d', strtotime($comment['created_at'])); ?>
</span>
</div>
</a>
<?php endforeach; ?>
<?php else: ?>
<p style="padding: 10px; color: #999;">暂无评论...</p>
<?php endif; ?>
</div>
</div>
<!-- 建议添加到你的 style.css 中的样式 -->
<style>
/* 重置列表默认样式 */
.stats-list {
list-style: none;
margin: 0;
padding: 0;
}
/* 每一行 */
.stats-list li {
display: flex;
justify-content: space-between; /* 左右两端对齐 */
align-items: center;
padding: 10px 0; /* 垂直间距 */
border-bottom: 1px dashed #eee; /* 极淡的虚线分隔符 */
font-size: 14px;
color: #666;
}
/* 去掉最后一行的线 */
.stats-list li:last-child {
border-bottom: none;
}
/* 数字样式 */
.stats-list li b {
font-weight: bold; /* 加粗 */
color: #333; /* 颜色加深突出 */
}
/* 评论列表样式 */
.comment-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.cb-comment-item {
text-decoration: none;
display: block;
padding-bottom: 10px;
border-bottom: 1px dashed #eee;
transition: all 0.2s;
}
.cb-comment-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cb-comment-item:hover .comment-content {
color: #d97757; /* 悬停变色 */
}
.comment-content {
font-size: 14px;
color: #555;
line-height: 1.5;
margin-bottom: 5px;
/* 防止内容过长撑破布局 */
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2; /* 最多显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.comment-meta {
font-size: 12px;
color: #999;
display: flex;
justify-content: space-between;
}
.comment-author {
font-weight: 500;
}
</style>
<div class="doc-item">
<div class="doc-image"><img src=" https://pic.netbian.com/uploads/allimg/161014/160749-147643246974e6.jpg"></div>
<div class="doc-content">
<div class="doc-title">XGK-BLOG程序</div>
<div class="doc-desc">包含简易后台、基础博客功能</div>
</div>
</div>
<div class="doc-item">
<div class="doc-image"><img src=" https://pic.netbian.com/uploads/allimg/161014/185352-14764424325768.jpg"></div>
<div class="doc-content">
<div class="doc-title">XGK-BLOG程序</div>
<div class="doc-desc">包含简易后台、基础博客功能</div>
</div>
</div>
<div class="doc-item">
<div class="doc-image"><img src=" https://pic.netbian.com/uploads/allimg/160903/105011-1472871011c3cc.jpg"></div>
<div class="doc-content">
<div class="doc-title">XGK-BLOG程序</div>
<div class="doc-desc">包含简易后台、基础博客功能</div>
</div>
</div>
</div>
</aside>