适用Typecho的两款插件:FootprintMap(足迹地图插件)和PageSidebarToggle(页面侧边栏开关)
刚刚在WordPress转到typecho做了两个插件来完善功能和使用/观看习惯,记录一下。
FootprintMap(足迹地图插件)
如果你想在 Typecho 博客中展示自己去过的城市、旅行路线、相关文章、图片记录,那么 FootprintMap 会是一款非常实用的足迹地图插件。
它支持在真实地图上标记地点,并将地点信息、年份、图片、文章链接等内容整合到一个交互式地图页面中。无论是独立足迹页、旅行归档页,还是关于页面扩展展示,都非常适合使用。
示例页面:https://beicb.top/distance.html
灵感来源于猪哥大佬的博客:https://blog.dazhu1988.com/distance.html
做成了插件,由 GLM-5.2 协助编写与完善。
功能特点
FootprintMap 并不只是一个简单的“地图打点插件”,而是围绕博客展示场景进行设计,兼顾美观、交互和可配置性。
主要功能包括:
- 支持在真实地图上展示足迹地点
- 支持 Leaflet / Mapbox GL 两种地图方案
- 支持高德地图、OSM、Carto 等底图选择
- 支持日间模式、夜间模式、自动模式
- 支持足迹连线效果
- 支持统计面板
- 支持年份筛选
- 支持地点搜索
- 支持时间轴展示
- 支持移动端优化
- 支持离线缓存
- 支持自定义标记颜色
- 支持地点图片与相关文章链接
- 支持悬浮预览与点击详情分层展示
- 支持配置导出 / 导入
- 支持足迹数据可视化编辑器
通过这些功能,博客中的足迹展示不再只是一个静态列表,而是能真正成为内容导航和视觉展示的一部分。
适合场景
1. 单独做一个足迹页
2. 放进“关于我”页面
3. 作为旅行文章入口
4. 做年度总结页
此插件还特别适合以下类型的网站:
- 旅行记录博客
- 城市打卡类博客
- 摄影博客
- 生活日记博客
- 个人主页 / 关于页面
- 旅游文章归档页
- 地图型内容展示页
如果你希望把“去过哪里”与“写过什么”结合起来,那么这款插件会非常合适。
安装方法
- 下载插件文件
- 将文件夹重命名为
FootprintMap - 上传到 Typecho 的
usr/plugins/目录 - 在后台「控制台」→「插件」中启用插件
- 点击「设置」进行配置
装好插件之后,在文章或独立页面中插入:[ footprint](f前的空格删掉)就可以把足迹地图插入到页面里。
如果你要创建一个独立足迹页,可以新建单页,在正文中只保留插件中说明的短代码即可。
足迹数据说明
插件支持通过后台填写足迹数据,每个地点可配置以下字段:
示例:
[
{
"lat": 39.90,
"lng": 116.41,
"name": "北京",
"desc": "故宫、长城、天坛,千年古都的厚重",
"year": "2023",
"color": "#ff4d4f",
"image": "https://example.com/beijing.jpg",
"link": "https://example.com/beijing-travel",
"linkTitle": "北京旅行记录"
}
]
同时,插件已提供 可视化足迹编辑器 ,可直接通过表格方式新增、修改、删除地点,不必强制手工编辑 JSON,更适合日常维护。
PageSidebarToggle(给每个页面独立的侧边栏开关)
Typecho 原生并没有提供页面级别的侧边栏开关功能 ,大多数主题也都是"一刀切"——要么全站显示,要么全站隐藏。
在一些分栏主题中如果想要新增一个类似相册的页面,侧边栏此时显得有些多余且影响美观了。于是,一个轻量级的 Typecho 插件 PageSidebarToggle 诞生了。
功能特性
此插件就一个功能
- 在后台 新增/编辑页面 时,会多出一个「侧边栏显示」选项
- 可选「显示侧边栏」或「隐藏侧边栏」,默认显示
- 仅对独立页面生效 ,不影响文章页
- 兼容主流 Typecho 主题(MWordStar、Facile、Default 等)
安装方法
- 将插件文件夹
PageSidebarToggle上传至服务器上的usr/plugins/目录 - 登录 Typecho 后台 → 控制台 → 插件
- 找到 PageSidebarToggle ,点击「启用」
- 回到「管理 → 独立页面」,新建或编辑任意页面,在「自定义字段」区域即可看到新选项
下载与源码
插件已托管在: https://github.com/227qidian/FootprintMap
也可以直接从 获取。
版权声明:本文为原创文章,版权归 天凉好个秋 所有,转载请联系博主获得授权。
本文地址:https://beicb.top/archives/3050.html
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。