普通视图

博客装修日记-地图与热力图更新

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终于支棱起来了。

image-20251208222800071

在原来的插件中额外增加一个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的年份自动变化
❌