一直想为博客增加足迹地图功能，浏览了大量 Typecho 博客的实现案例后，发现主流方案主要分为插件实现和自定义页面编辑实现两种。考虑到过多安装后台插件会增加博客负载、产生冗余代码，且容易出现兼容bug，最终我选择纯静态页面编辑的轻量化方案。

本次搭建使用小十足迹地图组件，无需后端部署、配置简单、功能丰富，完美适配 Typecho 博客，同时也兼容各类静态博客框架。

在线演示：https://blog.tibtob.cn/footprints
项目在线地址：https://footprintmap.xiaoten.com/
项目开源地址：https://github.com/Jiosanity/XiaoTen-FootprintMap

安装部署教程

步骤1：新建自定义页面模板文件

在你的 Typecho 主题根目录下，新建 page-footprint.php 自定义模板文件。

以下代码适配主流博客主题，可根据自身主题样式自行微调样式参数：

<?php 
/**
 * 我的足迹
 * 
 * @package custom 
 * 
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('layout/header.php'); ?>

<div class="masonry-content bg-white dark:bg-slate-800 whitespace-nowrap text-sm px-4 border-b-4 border-b-gray-50 dark:border-b-slate-700 sticky top-0 z-10">
    <div class="flex relative">
        <ul class="flex space-x-4 dark:text-gray-400">
            <li class="page_tab_common w-8 py-2 h-full text-center transition page_tab_active"><?php $this->title() ?></li>
        </ul>
        <div style="height: 2px;" class="tab__line w-8 absolute left-0 -bottom-3px bg-blue-400 transition"></div>
    </div>
</div>

<div class="page_content w-full relative overflow-x-hidden h-screens md:h-81vh text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-slate-700">
    <div class="p-4">
        <!-- 足迹地图容器 -->
        <div class="footprint-map"
             style="width:100%;height:650px;border-radius:12px;"
             data-json="/usr/themes/主题文件夹/footprint/data/footprints.json"
             data-amap-key="这里填入你的高德地图Web端KEY">
        </div>
    </div>
</div>

<!-- 地图CSS样式文件 -->
<link rel="stylesheet" href="/usr/themes/主题文件夹/footprint/css/footprintmap.css">

<!-- 地图核心JS文件（加载顺序不可打乱） -->
<script src="/usr/themes/主题文件夹/footprint/js/utils.js"></script>
<script src="/usr/themes/主题文件夹/footprint/js/footprintmap.js"></script>
<script src="/usr/themes/主题文件夹/footprint/js/plugin-visited.js"></script>
<script src="/usr/themes/主题文件夹/footprint/js/plugin-hover.js"></script>

<?php $this->need('layout/footer.php'); ?>

步骤2：上传程序文件并配置路径

将下载好的足迹地图完整文件夹，上传至博客主题目录：/usr/themes/主题文件夹/footprint/。

确保文件目录结构完整，缺一不可：

A-Sleek/
└── footprint/
    ├── css/        # 样式文件目录
    ├── js/         # 核心脚本目录
    └── data/       # 足迹数据目录（存放footprints.json）

步骤3：制作足迹数据文件

提供两种便捷的数据制作方式，可按需选择：

方式一：手动创建 JSON 数据文件

在 data 目录下新建 footprints.json，参考以下格式填写足迹信息，支持自定义地点、坐标、描述、时间、分类和标记颜色：

{
  "locations": [
    {
      "name": "北京",
      "coordinates": "116.4074,39.9042",
      "description": "中国的首都",
      "date": "2024-05-01",
      "categories": ["2024", "旅行"],
      "markerColor": "sunset"
    }
  ]
}

重要提示：如需使用区域高亮联动功能，需在项目目录中放入 provinces.geojson（中国省份边界）或 world.geojson（全球国家边界）文件，默认读取路径可自行配置修改。

方式二：在线可视化编辑器生成

无需手动编写代码，通过官方在线数据构建器可视化录入信息，一键导出规范 JSON 文件，简单高效。

编辑器地址：https://footprintmap.xiaoten.com/editor.html

支持地图拾取坐标、填写地点信息、自定义分类和标记颜色，录入完成后直接下载 JSON 文件，放入 data 目录即可。

1.登录 Typecho 博客后台，新建独立页面；

2.页面标题填写「我的足迹」；

3.自定义模板选择刚刚创建的「我的足迹」模板；

4.直接发布页面，即可成功访问博客足迹地图功能。