feat: implement comprehensive reading analytics system with bot detection
Features: - Add article view tracking with automatic deduplication (per user/IP) - Implement intelligent bot detection (35+ patterns: Google, Bing, Baidu, GPTBot, etc) - Create admin analytics dashboard with statistics and filtering - Display view count and comment count on article cards - Add search-based article filter (replaced dropdown for scalability) Analytics Dashboard: - Global stats: total views, human/bot views, unique IPs/users - Top 20 articles ranking with detailed metrics - Detailed view records with time, article, user, IP, user-agent - Filters: article title search, IP search, show/hide bots - Pagination support (50 records per page) Technical Implementation: - Async view recording (non-blocking) - Dual deduplication (application + database layer) - Database indexes for performance optimization - Batch query for comment counts - Full i18n support (Chinese/English) Files Added: - models/article_view.go: View tracking model - models/bot_detector.go: Bot detection logic - handlers/admin_analytics.go: Analytics page handler - templates/admin/analytics_views.html: Analytics UI - test_analytics.sh: Testing script - Documentation: implementation guide, usage guide, changelog Files Modified: - handlers/home.go: Add view recording and comment count queries - models/db.go: Add ArticleView to auto-migration - main.go: Add analytics routes - i18n/i18n.go: Add 35+ translation keys - templates/admin/dashboard.html: Add analytics entry link - templates/pages/home.html: Display view/comment counts on cards Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,145 @@
|
||||
# 主页文章卡片功能更新
|
||||
|
||||
## 新增功能：显示阅读量和评论数
|
||||
|
||||
### 效果展示
|
||||
|
||||
每篇文章卡片底部现在显示：
|
||||
- 👁️ **阅读量**：显示该文章被访问的次数
|
||||
- 💬 **评论数**：显示已通过审核的评论数量
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 文章标题 [置顶] │
|
||||
│ 文章摘要内容... │
|
||||
│ │
|
||||
│ 阅读全文 → 👁️ 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）
|
||||
- 🔥 热度标记（高阅读量文章）
|
||||
- ⭐ 点赞功能
|
||||
- 📈 阅读趋势指示器
|
||||
|
||||
---
|
||||
|
||||
**效果**：让用户在浏览文章列表时就能看到每篇文章的热度和互动情况！📊
|
||||
Reference in New Issue
Block a user