前言

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

  1. 找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget,输入你的博客网址

  2. 点击 Next

  3. 根据你自己的喜好选择样式 Map widgetGlobe Widget(建议选第二个)

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

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

添加和修改模板

  1. themes\Butterfly\layout\includes\widget文件夹新建card_map.pug 文件,文件内容如下:

    1
    2
    3
    4
    5
    6
    .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="此处填入你自己的代码")
  2. 修改themes\Butterfly\layout\includes\widget\index.pug 文件,在你想要显示的位置插入以下代码:

    1
    2
    if theme.aside.card_map
    !=partial('includes/widget/card_map', {}, {cache:theme.fragment_cache})
  3. butterfly.yml 文件,找到 card_webinfo 下面添加一行card_map: true

  4. 编辑 themes\Butterfly\languages\zh-CN.yml 文件 (根据你的网站语言选择),找到 card_announcement: 公告 , 在下面添加一行 card_map: 访客地图 (后面的文本可自定义)

  5. 如果不想显示,直接把 butterfly.yml 文件的card_map: true 改为 card_map: false 即可

说明:注册账号可能用邮箱注册不了,建议用谷歌账号登陆,还有这个加载可能会很慢,若没有显示,可能网络原因还有服务器的问题,稍等片刻即可