main
xgkblog/sidebar-right.php
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>