基于高德地图实现 Hugo 足迹地图短代码

依然是受 王叨叨：基于高德地图做足迹管理插件 文章启发，实在眼馋足迹功能，但苦于没有清晰的思路，看到叨叨大神发了这个插件，借助AI，终于抽空完成了这一功能，并融入了一些个人想法： 与站点主题同步，支持亮/暗模式自适应； 增加标签筛选功能； 在地图卡片中，若有多张图片，支持水平滚动并集成灯箱放大查看； 标记点智能集群，缩小地图时自动合并附近位置； 集群开关控制，可随时启用或关闭集群功能。 其余部分则为常规足迹功能的实现。 本文将简要介绍实现方式，完整的源码已在 GitHub 开源，包含所有 JS、CSS 和示例数据。具体样例在本站"关于"页面，如下所示： 正在加载足迹... 主要功能 短代码嵌入：{{< footprintmap >}} 自动注入脚本与样式，按需加载数据。 JSON 数据支持：所有足迹数据集中保存在 footprints.json 文件中，便于在 Git 里维护与复用。 自动标签筛选：脚本会扫描全部 categories 字段，生成可点击的筛选按钮。 智能标记集群：缩小地图时自动将附近位置合并显示，点击集群标记可放大查看详情。 集群开关控制：地图底部提供开关按钮，支持亮/暗主题自动适配。 文章关联：通过手动设置 url 字段，可添加关联的文章。 照片轻量查看器：支持多张图的横向轮播，点击后用自定义 Viewer 放大，适配移动端手势。 亮/暗主题联动：跟随站点 dark class 切换高德地图底图与 InfoWindow 样式。 自定义 Marker 颜色：通过 markerColor 选择预设（sunset / ocean / violet / forest / amber / citrus），也支持直接写 #RRGGBB。 移动端优化：信息卡宽度移动端自适应、字号/间距重排、点击空白区域自动收起 InfoWindow。 JSON 数据格式 footprints.json 中维护一个 locations 数组，字段解释如下：