博客迁移之后一直心心念念的老博客功能，莫过于首页右侧边栏的访问地球了，只是 Vuepress 似乎并不支持在边栏添加 script，于是一直搁置了下来。

晚上在浏览主题官方文档的时候，无意看到一个定义 html 广告模块儿的姿势，于是乎开启了一段折腾之旅，这里赶忙做下记录。

1，效果

讲解配置过程之前，先看下配置完成之后的最终效果：

2，配置

通过网站REVLVERMAPS (opens new window)可以自定义我们想要的地图样式：

配置过程中，下边的方框中会自动生成对应的代码，我们可以拷贝对应的代码，一会儿用得到。

然后创建 js 文件 docs/.vuepress/config/htmlModules.js

// 官方文档：https://doc.xugaoyi.com/pages/a20ce8/#%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E5%9D%97
module.exports = {
  // 利用广告模块儿,添加访问地球🌎
  homeSidebarB: `<div style="width:100%;height:122px;color:#fff;background: #eee;"><a href="https://www.revolvermaps.com/livestats/5srkcv15atq/"><img src="//rf.revolvermaps.com/h/m/a/0/ff0000/128/10/5srkcv15atq.png" width="256" height="128" alt="Map" style="border:0;"></a></div>`,
};

然后在 docs/.vuepress/config/themeConfig.js中引用即可：

const htmlModules = require("./htmlModules.js");

// 主题配置
module.exports = {
  // 此处定义了访问地球功能
  htmlModules,
};

然后运行起来，就可以看到对应的访问地图了。