博客装修日记-地图与热力图更新
2025年12月8日 22:44
确实是离职之后就有了更多折腾的时间,这几天重新搞了个新的虚拟机,部署了rsshub,用AI写了很多小代码,还在vibe-coding自己想做的小插件,忙的不亦乐乎。当然博客的装修也没拉下,更新插件并且又解决了很多网站的小bug。
Marker Pro地图插件
用上了bigfa的Marker Pro地图插件最新版,目前仍然是体验最好的地图插件,广而告知哈哈哈!
最新的2.0版主要更新:
- 现在单篇文章可绑定多个坐标
- 可单独管理坐标,同时坐标支持多个设置参数
- 在编辑文章的时候即可轻松选择已有或新建坐标
- 坐标绑定文章之后将自动变更状态
- 地图页面增加了更多的选项卡和数据统计面板
- 优化了数据结构,增加了年份组和图片组输出
- 改进了更为现代的样式
- 优化云端相关文章逻辑,不再需要本地交换数据
- 优化了渲染逻辑,切换缩放更加流畅
最爽的是支持导入导出兼容Google Map,这样可以同时和我的地图保持同步,唯一遗憾就是导入的城市无法自动识别国别。
一次性导入了之前所有的地点,再次感叹出去容易写游记难。不知道何年何月能把游记补完。
WP Post Heatmap增加黑暗模式
之前在《WordPress博客折腾记》写过,用上了博主雪糕写的热力图插件,但插件不能兼容适配主题的黑暗模式,当时用GPT4和Claude3.5都没能修改好这个代码,一直耿耿于怀,最近Gemini 3 Pro终于支棱起来了。
![]()
在原来的插件中额外增加一个heatmap-fix.css文件,完整插件在github可以直接下载,以下是代码的部分:
/* ==========================================================================
1. 默认状态 (兜底)
(对应 Light 模式,或者没有任何类名的情况)
========================================================================== */
#heatmap {
filter: none;
background-color: transparent;
}
/* ==========================================================================
2. 强制黑暗模式 (User clicked "Dark")
只要 body 有 .dark 类,不管系统是什么颜色,都强制变黑
========================================================================== */
body.dark #heatmap {
background-color: #ffffff !important; /* 先铺白底 */
filter: invert(0.82) hue-rotate(180deg) contrast(1.2) !important; /* 再反转 */
border-radius: 8px;
}
body.dark h2.wp-block-heading {
color: #ffffff !important;
}
/* ==========================================================================
3. 自动模式 (User clicked "Auto")
只有当 body 有 .auto 类,且 系统确实是深色时,才变黑
========================================================================== */
@media (prefers-color-scheme: dark) {
body.auto #heatmap {
background-color: #ffffff !important;
filter: invert(0.82) hue-rotate(180deg) contrast(1.2) !important;
border-radius: 8px;
}
body.auto h2.wp-block-heading {
color: #ffffff !important;
}
}
其他增加的小功能或者修复的BUG
- Markdown编辑器下自动增加图注
- 增加两个新的标签页
- 修改bigfa新版主题中的一些小问题:黑暗模式下标题颜色太浅,回复中friend标识的大小不一
- 改正Home页的邮箱后缀错误
- 调整Page页标题的大小问题
- 增加footer中Copyright的年份自动变化