Hexo Butterfly 加入 clustrmaps 访问者地图-2024版

1	转载自 cungudafa https://blog.csdn.net/cungudafa/article/details/105925710

准备工作

看到别人有，我也喜欢，于是添加。

官网 clustrmaps.com 也是第三方的，有 Google Docs 账号可以直接登录，Sign up 即可

注册之后，在官网找到 Website Widget，如图。

[](https://cdn.jsdelivr.net/gh/wdm1732418365/CDN/New folder/20200505000231389.png)

我喜欢 Globe widget 形式，如果喜欢 Map 自便

[](https://cdn.jsdelivr.net/gh/wdm1732418365/CDN/New folder/20200504230609405.png)

点击 select 就可以看到信息了，复制到你的博客就好了，现在应该只有JavaScript版了。

[](https://cdn.jsdelivr.net/gh/wdm1732418365/CDN/New folder/2020050423071020.png)

Hexo 主题引入

我在 butterfly（pug）的侧边栏引入的，next 可以同理规划；sakura（ejs）更简单，直接贴 js 或 html 代码

在主题配置声明一个侧边栏给地图显示
文件：[Blog]\_config.butterfly.yml ([Blog]为根目录下)

1 2	Code card_maps: true

[](https://cdn.jsdelivr.net/gh/wdm1732418365/CDN/New folder/20200504234654500.png)

添加一个界面元素

文件如图所示：

[](https://cdn.jsdelivr.net/gh/wdm1732418365/CDN/New folder/20200504234850441.png)

先在加载框添加一条 card_maps 的声明，（主题控制是否显示这个界面元素）
修改添加：themes\Butterfly\layout\includes\widget\index.pug

1	!=partial('includes/widget/card_maps', {}, {cache: true})

然后，新建一个页面元素：themes\Butterfly\layout\includes\widget\card_maps.pug
复制下面的 pug 格式样式，将 url_for 改为你之前申请的

.card-widget.card-map
  .card-content
    .item-headline
        i.fa.fa-map-marker(aria-hidden="true")
        span= _p('访客地图')
    script(type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=WYzwctDKpv3lky9xUJ99VfJCkATxrAtK505JIWVSXPw")