内容分析集成

本文档介绍如何在 Hugo 网站中集成和使用内容分析工具。

🎯 功能概述

网站内容分析工具是一个强大的多语言内容分析系统，可以：

分析网站的发布频率和趋势
生成可视化图表和报告
支持多语言（中文/英文）和多内容类型
提供双语内容对应关系分析
支持交互式数据筛选和浏览

📁 文件结构

analysis-tool/                 # 分析工具目录
├── analyze_blog_frequency.py       # 主要分析脚本
├── print_content_summary.py        # 文本报告生成器
├── generate-for-hugo.sh           # Hugo集成脚本
├── index.html                     # 独立可视化界面
├── css/style.css                  # 独立界面样式
├── js/script.js                   # 独立界面脚本
└── README.md                      # 工具说明文档

layouts/pages/analysis.html         # Hugo分析页面模板
assets/js/content-analysis-upload.js # Hugo页面JavaScript
assets/scss/layouts/_analysis.scss  # Hugo页面样式
content/zh/analysis.md              # 分析页面内容文件

🚀 快速使用

1. 生成分析数据

cd analysis-tool
./generate-for-hugo.sh

2. 访问分析页面

http://localhost:1313/analysis/

3. 上传数据文件

在页面中上传生成的 content_analysis_data.json 文件。

📊 Hugo 网站集成

页面模板结构

分析页面使用专门的页面模板 layouts/pages/analysis.html，包含以下主要区域：

文件上传区域: 支持 JSON 数据文件上传
统计概览: 总体数据指标展示
筛选控件: 多维度数据筛选
可视化图表: 年度趋势、热力图、分类分布等
内容列表: 最新内容展示
双语分析: 双语内容对应关系分析

JavaScript 功能

content-analysis-upload.js 提供：

文件上传和解析功能
数据验证和错误处理
图表渲染和更新
交互式筛选
响应式界面控制

样式设计

_analysis.scss 实现：

现代化卡片布局
响应式设计
图表容器样式
移动端适配
暗色主题支持

🛠️ 技术特性

数据处理

多格式支持: 自动识别 YAML front matter
容错机制: 优雅处理格式异常
路径适配: 自动检测 Hugo 网站结构
编码支持: 完美支持中文内容

可视化技术

Chart.js 4.5: 专业图表库
响应式设计: 支持各种设备
交互式筛选: 实时数据更新
图表销毁: 避免内存泄漏

安全特性

本地处理: 所有数据在本地分析
隐私保护: 不上传敏感信息
静态部署: 无需服务器支持

📈 分析维度

支持的内容类型

类型	目录	描述
blog	`content/{lang}/blog/`	博客文章
book	`content/{lang}/book/`	图书内容
notice	`content/{lang}/notice/`	通知公告
podcast	`content/{lang}/podcast/`	播客节目
trans	`content/{lang}/trans/`	翻译文章
travel	`content/{lang}/travel/`	旅行记录

可视化图表

年度发布趋势: 线形图展示历年发布量变化
月度发布热力图: 热力图显示发布活跃度分布
月度发布趋势: 柱状图显示各月份发布分布
内容分类分布: 饼图显示分类占比
热门标签统计: 水平柱状图显示标签使用频率

双语分析功能

中英文内容对应关系检测
双语覆盖率统计
按内容类型的双语分析
翻译完整性评估
语言分布对比

🔧 自定义配置

扩展内容类型

在 analyze_blog_frequency.py 中修改：

CONTENT_TYPES = {
    'blog': '博客文章',
    'book': '图书内容',
    'notice': '通知公告',
    'podcast': '播客节目',
    'trans': '翻译文章',
    'travel': '旅行记录',
    'custom': '自定义类型'  # 添加新类型
}

添加新语言

LANGUAGES = {
    'zh': '中文',
    'en': '英文',
    'fr': '法文'  # 添加新语言
}

修改图表样式

在 _analysis.scss 中调整颜色和样式：

$primary-color: #6c5ce7;
$secondary-color: #a29bfe;
// 自定义颜色变量

🐛 故障排除

常见问题

Q: 页面显示"未找到分析数据元素" A: 这是正常的，手动上传版本不使用 Hugo 数据绑定，请上传 JSON 文件。

Q: 图表不显示 A: 检查浏览器控制台错误，确保 Chart.js 正确加载。

Q: 数据上传失败 A: 确保上传的是正确的 content_analysis_data.json 文件。

Q: 双语分析为空 A: 检查中英文内容的路径结构是否一致。

调试技巧

打开浏览器开发者工具
查看控制台输出的详细信息
检查网络请求是否正常
验证 JSON 文件格式是否正确

📝 维护建议

定期更新: 建议每月运行一次分析
数据备份: 保存重要的分析报告文件
性能监控: 关注大数据量时的加载性能
浏览器兼容: 测试各主流浏览器的兼容性

🔄 版本历史

v2.0: 手动上传版本，解决 Hugo jsonify 大数据处理问题
v1.0: Hugo 数据绑定版本（已废弃）

📞 技术支持

如遇问题，请：

查看本文档的故障排除部分
检查浏览器控制台错误信息
提交 Issue 描述具体问题
提供错误截图和环境信息

享受数据分析的乐趣！ 📊✨