hexo(butterfly)加入clustrmaps访问者地图

一、前言

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

地图是按照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,还学会了侧边栏添加
在这里插入图片描述

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

©️2020 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值