数据驱动：我是如何构建我的网站内容分析页面的

长久以来，我一直希望能够以更直观、数据驱动的方式来审视自己网站的内容。我想知道每年的创作频率、热门的分类和标签、以及中英文内容的覆盖情况。为了实现这个目标，我利用周末时间为网站开发了一个全新的页面：内容分析仪表盘。

本文将分享这个页面的主要功能、构建流程和技术实现，希望能为你提供一些有趣的思路。

主要功能

这个分析页面是一个完全在客户端渲染的单页应用，提供了丰富的交互式图表和数据筛选功能：

• 多维度统计：展示了总内容数、语言分布、年均发布量等核心指标。
• 交互式图表：使用 Chart.js 生成了年度发布趋势、月度分布、分类和标签占比等多种图表。
• 发布热力图：直观地展示了过去几年里每个月的创作活跃度。
• 数据筛选：支持按语言、内容类型、年份范围和分类进行动态筛选，所有图表和数据都会实时更新。
• 双语内容分析：自动检测并统计中英文内容的对应关系和覆盖率。
• 标签云和内容列表：方便快速浏览热门主题和最新发布的内容。

架构与构建流程

考虑到网站内容的数量，直接在 Hugo 中使用 jsonify 处理所有数据会导致构建过程非常缓慢，甚至可能因内存不足而失败。因此，我设计了一套前后端分离的自动化数据处理流程。

这个流程可以分解为以下几个关键步骤：

1. 数据提取：我编写了一个 Node.js 脚本 (scripts/generate-analysis-data.js)，它会在网站构建时运行。该脚本使用 glob 扫描 content/ 目录下的所有 Markdown 文件，并利用 gray-matter 解析每个文件的 Front Matter，提取出标题、日期、分类、标签等元数据。

2. 数据压缩：脚本将所有内容元数据整合成一个大型 JSON 文件。为了优化加载速度，build.js 脚本会调用 pako 库将这个 JSON 文件压缩成 Gzip 格式（content_analysis_data.json.gz），文件体积可以减少约 70-80%。

3. 前端加载与渲染：分析页面 (/analysis) 加载时，其 JavaScript (assets/js/content-analysis-upload.js) 会异步请求这个 .gz 数据文件。在浏览器端，它再次使用 pako 库对数据进行解压，然后将解析后的 JSON 数据交给 Chart.js 来动态渲染出各种图表。

这个流程巧妙地绕开了 Hugo 的构建限制，将数据处理的压力从构建时转移到了客户端，同时通过数据压缩保证了良好的加载性能。

结语

这个内容分析页面不仅满足了我深入了解自己创作内容的好奇心，也成为了一个有趣的技术实践。通过数据可视化，我可以更清晰地规划未来的创作方向。欢迎你访问 我的内容分析页面 进行体验，也希望这个项目的实现过程能给你带来一些启发。