極客死亡計劃
·
零 JavaScript 的博客统计图表
💡
原文中文，约7000字，阅读约需17分钟。
📝
内容提要
我为博客添加了统计页面，使用HTML和CSS制作图表，避免使用JavaScript。通过Hugo生成统计数据，展示文章发布时间分布和外部链接排行，提升了网站的优雅性和性能。
🎯
关键要点
- 受到 Jim Nielsen 的启发，决定为博客添加统计页面，展示字数、文章数量和外部链接排行等。
- 使用 Hugo 静态博客生成器，避免引入 JavaScript 图表库，以保持网站的优雅性。
- 通过 HTML 和 CSS 制作图表，利用元素的宽度或高度表现比例，展示统计数据。
- 使用 flex 布局实现条状图，能够轻松调整排列方式和间距。
- 可以通过 CSS 制作饼图和折线图，但作者更倾向于使用条状图展示趋势。
- 使用 Hugo 的模板语法在生成阶段计算统计数据，避免使用 JavaScript。
- 通过遍历网站页面的元数据，统计文章的发布时间分布。
- 外部链接排行无法通过 SSG 直接统计，可以使用外部脚本扫描 Markdown 文件并生成数据。
- Hugo 支持在构建时访问外部数据源，可以通过脚本生成 JSON 文件供 Hugo 使用。
- 通过自动化构建流程，能够快速生成统计数据，提升网站构建效率。
❓
延伸问答
如何使用 HTML 和 CSS 制作博客统计图表？
可以通过设置元素的宽度或高度来表现比例，使用 flex 布局实现条状图，利用 CSS 制作饼图和折线图。
为什么选择不使用 JavaScript 制作统计图表？
为了保持网站的优雅性和性能，避免引入臃肿的 JavaScript 图表库。
Hugo 如何生成统计数据？
Hugo 在生成阶段通过模板语法计算统计数据，避免使用 JavaScript，直接在构建时生成 HTML 结构。
如何统计文章的发布时间分布？
通过遍历网站页面的元数据，判断每个页面的发布日期，并统计各时间段的文章数量。
如何处理无法通过 SSG 直接统计的数据？
可以使用外部脚本扫描 Markdown 文件，提取需要的数据，并将其导出为 JSON 格式供 Hugo 使用。
使用 Hugo 构建网站的效率如何？
Hugo 的构建速度很快，时间复杂度是线性的，能够在短时间内完成构建，即使有额外的数据处理。
➡️
