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，還學會了側邊欄添加

嘻嘻嘻嘻~ 喜歡就抱走，請點贊。