前言

在此之前得有个 clustrmaps 账号，前往 clustrmaps 网站注册一个帐号

找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget,输入你的博客网址
点击 Next
根据你自己的喜好选择样式 Map widget 或 Globe Widget（建议选第二个）

找到如下代码，记住 src (** 的部分):

1	<script type="text/javascript" id="clstr_globe" src="**********************">

添加和修改模板

在 themes\Butterfly\layout\includes\widget文件夹新建card_map.pug 文件，文件内容如下：

.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

修改themes\Butterfly\layout\includes\widget\index.pug 文件，在你想要显示的位置插入以下代码：

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

在 butterfly.yml 文件，找到 card_webinfo 下面添加一行card_map: true
编辑 themes\Butterfly\languages\zh-CN.yml 文件 (根据你的网站语言选择)，找到 card_announcement: 公告 , 在下面添加一行 card_map: 访客地图 (后面的文本可自定义)
如果不想显示，直接把 butterfly.yml 文件的card_map: true 改为 card_map: false 即可