# 主页文章卡片功能更新

## 新增功能：显示阅读量和评论数

### 效果展示

每篇文章卡片底部现在显示：
- 👁️ **阅读量**：显示该文章被访问的次数
- 💬 **评论数**：显示已通过审核的评论数量

```
┌─────────────────────────────────────┐
│ 文章标题                   [置顶]   │
│ 文章摘要内容...                     │
│                                     │
│ 阅读全文 →    👁️ 123  💬 5        │
└─────────────────────────────────────┘
```

### 技术实现

#### 1. 后端改动

**HomePage Handler** - 加载初始文章的评论数：
```go
// 查询评论数
db.Model(&models.Comment{}).
    Select("article_id, COUNT(*) as count").
    Where("article_id IN ?", articleIDs).
    Where("status = ?", models.CommentApproved).
    Group("article_id").
    Scan(&commentCounts)

// 传递给模板
data["CommentCounts"] = commentCountMap
```

**HomeArticlesAPI Handler** - 返回JSON格式的文章列表：
```go
type ArticleResponse struct {
    models.Article
    CommentCount int64 `json:"comment_count"`
}
```

#### 2. 前端改动

**模板 (home.html)**：
```html
<div class="flex items-center gap-4 text-sm text-gray-500">
    <!-- 阅读量 -->
    <span class="flex items-center gap-1">
        <svg>眼睛图标</svg>
        {{.ViewCount}}
    </span>
    
    <!-- 评论数 -->
    <span class="flex items-center gap-1">
        <svg>对话图标</svg>
        <span class="comment-count">{{index $.CommentCounts .ID}}</span>
    </span>
</div>
```

**JavaScript 动态加载**：
```javascript
const commentCount = article.comment_count || 0;
const viewCount = article.view_count || 0;
```

### 数据来源

- **阅读量 (view_count)**：来自 `articles.view_count` 字段
  - 每次访问文章时自动增加
  - 显示所有访问次数（包括刷新）

- **评论数 (comment_count)**：来自 `comments` 表统计
  - 只统计已通过审核的评论 (`status = 1`)
  - 实时查询，保证准确性

### 性能优化

1. **批量查询**：使用 `IN` 查询一次性获取所有文章的评论数
2. **索引支持**：`article_id` 和 `status` 字段都有索引
3. **缓存友好**：评论数在前端渲染，无需额外请求

### 样式细节

- 使用 Heroicons SVG 图标
- 灰色文字 (`text-gray-500`) 不抢眼
- 与"阅读全文"按钮对齐
- 响应式设计，移动端友好

### API 响应示例

```json
{
    "articles": [
        {
            "id": 5,
            "title": "文章标题",
            "view_count": 123,
            "comment_count": 5,
            ...
        }
    ],
    "hasMore": true
}
```

### 文件变更

- ✅ `handlers/home.go` - 添加评论数查询逻辑
- ✅ `templates/pages/home.html` - 显示阅读量和评论数UI
- ✅ JavaScript - 动态加载时包含统计信息

### 兼容性

- ✅ 向后兼容：如果没有评论，显示 0
- ✅ 支持无限滚动：新加载的文章也显示统计
- ✅ 支持SQLite和MySQL

### 用户体验

**优势**：
1. 用户可以快速看到文章的热度
2. 评论数激发互动兴趣
3. 不需要点开文章就能了解活跃度

**显示规则**：
- 阅读量始终显示（即使是0）
- 评论数始终显示（即使是0）
- 数字简洁明了，不带单位

### 未来增强

可以考虑的改进：
- 📊 阅读量格式化（如 1.2k）
- 🔥 热度标记（高阅读量文章）
- ⭐ 点赞功能
- 📈 阅读趋势指示器

---

**效果**：让用户在浏览文章列表时就能看到每篇文章的热度和互动情况！📊