自己写的Typecho 足迹插件

AI摘要

Typecho足迹插件是一款可视化记录旅程的工具,支持高德地图和Leaflet两种地图渲染方式,提供足迹管理后台和前端展示功能。插件特色包括地图可视化、足迹管理、时间轴展示和移动端适配,适用于旅行博客、摄影作品集等场景,帮助用户以地图形式记录和分享生活足迹。

Typecho 足迹插件:记录与分享你的旅程

在写博客的过程中,很多人希望能够把自己的旅行、生活足迹可视化地展示出来,而不仅仅是通过一篇篇文字和图片去堆砌内容。Typecho 足迹插件(Footprints) 正是这样一个工具,它能让你在地图上清晰直观地展示到访过的地点,并为每一个地点配上详细的说明、相册、外部链接等信息,让博客不再只是文字的集合,而是一个带有地理感知的“旅程档案”。

bdcf406cfbdbcee375f1d7357bdec20f.png


演示按钮

插件特色

  1. 地图可视化
    插件支持 高德地图Leaflet 两种地图渲染方式。

    • 使用高德地图时,你可以通过 Key 来调用官方接口,保证地图数据准确完整;
    • 使用 Leaflet 时,可以选择不同的 Tile 图层,更适合对轻量化和速度有要求的场景。

    地图支持响应式布局,无论在 PC 端还是手机端,都能自适应显示。

  2. 足迹管理后台
    在 Typecho 后台,插件提供了一个独立的 足迹管理入口,类似于文章或独立页面的管理方式。
    这种灵活的数据管理方式,让每一条记录既像一篇“日志”,又能在地图上以可视化方式呈现。
    5c793b331c1558dfeb1360ea68c221c0.png
    3d39d36a7b3b58f7c938a58f2e0a8e38.png
  3. 前端展示效果
    在前端页面,你可以创建一个独立页面,选择插件提供的 “足迹 Footprints” 模板,即可把所有的足迹以地图和时间轴的形式展示出来。

    • 地图上会显示每一个足迹的定位点,点击后会弹出卡片,显示标题、日期、地点、封面图片以及“查看文章/查看相册”的操作按钮。
    • 在时间轴部分,所有足迹会按照年份自动分组,并支持折叠和展开,保证内容条理清晰。
      4070d88bb821466a1bf8764ea67346d1.png
  4. 移动端适配
    插件在设计时充分考虑了移动端的使用体验。无论是地图缩放、卡片展示还是时间轴,都针对小屏幕做了优化,保证不会出现内容超出或排版错乱。

使用场景

  • 个人旅行博客:把每一次旅行记录下来,用地图来串联,让读者不仅能看到你的照片,还能知道你曾经去过哪里。
  • 摄影作品集:通过地图展示拍摄地点,让作品和地点形成联系。
  • 日常生活记录:除了旅行,也可以记录一些日常到访的城市、餐馆、展览场馆。
  • 家庭纪念:记录家庭出游、孩子成长过程中的足迹,让博客成为一个带有温度的家庭档案。

总结

希望这个小插件可以见证我踏遍祖国的万水千山,插件还在迭代中,等我有机会成熟了没bug了,再分享给大家

打赏
评论区
头像
    头像

    不错不错,我正好需要对我的友链插件化,等有空的时候细细拜读你的代码。

      头像
      欲裕
        
      @全局变量

      没问题

    头像
    旺东
      

    标注一个 缅甸 xx园区 当年工作的地方

      头像
      李欲裕
        
      @旺东

      违法犯罪的事情,不能乱搞

    头像
    彬红茶
      

    天呐,别的博客框架足迹都这么好看的吗

      头像
      李欲裕
        
      @彬红茶

      没有没有

        头像
        彬红茶
          
        @李欲裕

        但是这真的很好看 羡慕羡慕

    头像
    老罗
      

    你这个是什么字体呢?

      头像
      李欲裕
        
      @老罗

      网上找的非商业字体,具体叫啥名,我也不晓得

    头像
    老罗
      

    来看看。等发布

      头像
      李欲裕
        
      @老罗

      敬请期待