一、前言

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

地图是按照ip地址定位的，目前只有我自己哈。
在这里插入图片描述

二、设置

1. 注册账号

官网 clustrmaps.com 也是第三方的，有Google Docs账号可以直接登录，Sign up即可，科学上网这里不教。
注册之后，在官网找到 Website Widget，如图。
在这里插入图片描述

我喜欢Map形式，如果喜欢Globe widget自便。
在这里插入图片描述
点击select就可以看到信息了，我这里用的html版，复制到你的博客就好了。
在这里插入图片描述
其实这些第三方工具随便插在努力的网页，博客园也支持，话不扯远，进入正题。

2.hexo主题引入

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

  1. 在主题配置声明一个侧边栏给地图显示
    文件：source\_data\butterfly.yml

       card_maps: true

    在这里插入图片描述

  2. 添加一个界面元素
    文件如图所示：
    在这里插入图片描述
    先在加载框添加一条card_maps的声明，（主题控制是否显示这个界面元素）
    修改添加：themes\Butterfly\layout\includes\widget\index.pug

           if theme.aside.card_maps
         !=partial('includes/widget/card_maps', {}, {cache:theme.fragment_cache})

    位置其实你可以任意，我觉得放在这里比较好看，不接受反驳。
    在这里插入图片描述
    然后，新建 一个页面元素：themes\Butterfly\layout\includes\widget\card_maps.pug
    复制下面的pug格式样式，将url_for改为你之前申请的，例如我的是：

    《a href=”https://clustrmaps.com/site/1b7sx “ title=”Visit tracker”》《img src=”//www.clustrmaps.com/map_v2.png?d=LHTfP-cAzRYLHEj_KNHtRxRu6ThgMwnyqi-X7ZV9k14&cl=ffffff “ /》《/a》

     .card-widget.card-map
   .card-content
     .item-headline
         i.fa.fa-map-marker(aria-hidden="true")
         span= _p('访客')
     a(href=url_for('https://clustrmaps.com/site/1b7sx'))
         img(src=url_for('//www.clustrmaps.com/map_v2.png?d=LHTfP-cAzRYLHEj_KNHtRxRu6ThgMwnyqi-X7ZV9k14&cl=ffffff'))

    简单又easy，还学会了侧边栏添加
    在这里插入图片描述

嘻嘻嘻嘻~ 喜欢就抱走，请点赞。

赏