给 Hugo 博客归档页加上 Github 风格热力图
最近看着博客的归档页面,总觉得光秃秃的列表差点意思。平时经常看 Github 主页那块绿色的代码提交热力图(Heatmap),看着自己的“绿格子”一天天变多,那种正反馈确实挺让人上瘾的。 于是就萌生了一个想法:能不能在我的博客归档页也加一个类似 Github 风格的文章更新热力图? 折腾了一番后,完美搞定。这篇文章记录一下具体的实现过程。 需求分析 在动手之前,我给自己定了几个硬性要求: 零依赖,不拖慢速度:网上很多教程教的是用 ECharts 之类的图表库。虽然效果好,但为了一个小图引入这么大的库,对静态博客的加载速度很不友好。我要用纯原生 JS 和 CSS 来画。 主题适配:我的博客用的是 PaperMod 主题,支持暗黑模式切换。这个热力图必须能无缝跟着主题切换颜色。 响应式布局,拒绝丑陋的滚动条:手机端和电脑端屏幕宽度不一样。我不希望在手机上出现一个很长很长的横向滚动条。它必须能根据当前窗口的宽度,自动计算并显示能够放得下的“周数”。 边缘防遮挡的悬浮提示:鼠标放上去要能显示当天的文章信息,而且如果是最右侧(今天)或者最顶部的数据,提示框不能被屏幕边缘截断。 动手实现 Hugo 的修改逻辑很简单,不要去动 themes/ 目录下的源码,而是利用它的覆盖机制。 把 themes/PaperMod/layouts/_default/archives.html 复制到项目根目录的 layouts/_default/archives.html。接下来所有的修改都在这个本地文件里进行。 1. 数据获取 第一步是把博客里所有文章的日期拿出来。这一步利用 Hugo 强大的模板语法,在 HTML 里直接把数据渲染成 JS 的数组: <script> const postsData = [ {{- range where site.RegularPages "Type" "in" site.Params.mainSections }} { date: "{{ .Date.Format "2006-01-02" }}", title: "{{ .Title | htmlEscape }}" }, {{- end }} ]; // 按日期归类统计 const postMap = new Map(); postsData.forEach(p => { if (!postMap.has(p.date)) postMap.set(p.date, []); postMap.get(p.date).push(p); }); </script> 这段代码会在编译时把所有文章遍历一遍,最终生成一个干净的 JSON 数据交给浏览器的 JS 处理。 ...
GitHub 白嫖指南
GitHub 白嫖指南 GitHub 俗称"男人的交友市场",但它的实用价值远不止如此。今天就来分享一下我在 GitHub 上白嫖的那些东西。 博客搭建 本博客使用 Hugo 静态生成器,通过 GitHub Pages 部署,域名托管在 Cloudflare 上并解析到该仓库。这套方案完全免费,只需承担域名的成本。 图床方案 使用 GitHub 作为图床存储,借助 PicGo 工具上传,配合公益 GitHub CDN 加速,实现高效的图片管理。 RunningPage 部署 还用 GitHub Pages 部署了一个 RunningPage 应用,解析到 run.butubb.cn 域名,展示运动数据。 后续优化 GitHub 在国内访问不稳定,后续考虑接入 CDN 服务以提升用户体验。仅需一个域名成本,就能实现上述所有功能,GitHub 确实是大善人。
新手运动建议
作为一个坚持运动了3个多月的新手,我总结了一些经验和建议,希望能帮助刚开始运动的初学者少走弯路。 开始永远不晚 无论何时开始运动都不会太迟,重要的是迈出第一步。不要因为年龄、体能基础或过往经历而犹豫,每个人都是从零开始的。关键是找到适合自己的方式,循序渐进地开展运动计划。 适度即可,无需过度 运动不需要追求极限,找到自己舒适的节奏最重要。如果不是竞技运动,一定要注意适量,避免过度运动造成身体伤害。过度训练容易导致疲劳、受伤甚至对运动产生厌倦,反而得不偿失。 坚持胜于强度 运动的关键不在于单次时长或强度,而在于持之以恒。衡量成果的标准是全年运动的频率和总次数,而非某一次的运动量。每周三次温和的锻炼,持之以恒一年,效果远好于偶尔一次高强度训练。 倾听身体信号 学会区分正常的肌肉酸痛和潜在的伤痛。如果感到关节或肌肉异常疼痛,应当休息或咨询专业人士,避免小伤变成大问题。
running_page部署
最近我的博客上线了一个新的页面,running_page 使用的是https://github.com/yihong0618/running_page这个仓库 大家有兴趣的可以看看
过年期间的运动记录
整个过年期间我的运动计划没有荒废,自认为执行的还行。 基本每天都有在运动,吃上面也很克制,不会暴饮暴食。 整个二月份截止目前运动量,跑步75km,力量训练1小时,力量训练还是偏少,下个月计划办个健身卡加强一下力量训练。
减脂健身计划最新进展
近期进展汇报 今天是年后上班第一天,过年期间我的体重不重反轻,目前体重79.5kg。虽然减少的幅度下降,整个过年期间只减少了0.5kg,但是没有上涨我已经很满足了。 今年的长期目标是体重控制到70kg,短期目标是先控制到77.5kg,预计的话在4月份之前实现短期目标。 减肥的速度不能太快避免反弹,目前的方案还是维持原方案不变,减少进食的热量,增加运动的时间,近期可能会考虑增购蛋白粉的摄入。
长期健康生活计划
人的一生最重要的就是健康
重新用回macos
最近几天,我重新用回了去年使用的macbookpro,屏幕有一条黑线,使用的是外接显示器 深感还是mac系统简洁好用,没有windows那么多的莫名其妙的bug
gitea 自部署使用体验
本文基于 Docker Compose 一键启动 Gitea + Gitea Runner 的实战记录。
一个NAS用户的UPS求生指南:从断电焦虑到真香体验
作为一个在群租房里"苟活"的绿联NAS用户,这两年我深刻体会到了什么叫"用电如履薄冰"…
你好!我是 butubb,安徽人,现工作居住在苏州。