go_blog/FEATURE_ARTICLE_STATS.md

主页文章卡片功能更新

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

效果展示

每篇文章卡片底部现在显示：

• 👁️ 阅读量：显示该文章被访问的次数
• 💬 评论数：显示已通过审核的评论数量

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

技术实现

1. 后端改动

HomePage Handler - 加载初始文章的评论数：

// 查询评论数
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格式的文章列表：

type ArticleResponse struct {
    models.Article
    CommentCount int64 `json:"comment_count"`
}

2. 前端改动

模板 (home.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 动态加载：

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 响应示例

{
    "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）
• 🔥 热度标记（高阅读量文章）
• ⭐ 点赞功能
• 📈 阅读趋势指示器

---

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