前往 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文件，文件内容如下：

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="此处填入你自己的代码")

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

1
!=partial('includes/widget/card_map', {}, {cache: true})

具体放置位置，可以参考下图（⚠️切记：如果主题版本大于3.6，请务必将{cache:theme.fragment_cache} 改为 { cache:true }）：

编辑_config.butterfly.yml 文件，在card_webinfo 下面添加一行card_map: true

编辑themes\Butterfly\languages\zh-CN.yml文件 (请根据你的网站语言选择)，找到card_announcement: 公告 , 在下面添加一行card_map: 访客地图 (后面的文本可自定义),繁体字方法一样，修改themes\Butterfly\languages\zh-TW.yml文件就行。

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

以下是全部源代码

themes/Butterfly/layout/index.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#aside-content.aside-content
  //- post
  if is_post()
    if showToc && theme.toc.style_simple
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})      
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})      

    .sticky_layout
      !=partial('includes/widget/card_map', {}, {cache: true})
      !=partial('includes/widget/card_recent_post', {}, {cache: true})
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_bottom_self', {}, {cache: true})

themes/Butterfly/layout/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="//clustrmaps.com/globe.js?d=xxxxxxxxx")

themes/Butterfly/languages/zh-CN.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
footer:
  framework: 框架
  theme: 主题

copy:
  success: 复制成功
  error: 复制错误
  noSupport: 浏览器不支持

page:
  articles: 文章总览
  tag: 标签
  category: 分类
  archives: 归档

card_post_count: 条评论

sticky: 置顶
no_title: 无题

post:
  created: 发表于
  updated: 更新于
  wordcount: 字数总计
  min2read: 阅读时长
  min2read_unit: 分钟
  page_pv: 阅读量
  comments: 评论数
  copyright:
    author: 文章作者
    link: 文章链接
    copyright_notice: 版权声明
    copyright_content: '本博客所有文章除特别声明外，均采用
      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相关推荐
  edit: 编辑

search: 搜索
algolia_search:
  input_placeholder: 搜索文章
  hits_empty: '找不到您查询的内容：${query}'
  hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'

local_search:
  label: 本地搜索
  input_placeholder: 搜索文章
  hits_empty: '找不到您查询的内容：${query}'

pagination:
  prev: 上一篇
  next: 下一篇

comment: 评论

aside:
  articles: 文章
  tags: 标签
  categories: 分类
  card_announcement: 公告
  card_map: 访客地图
  card_categories: 分类
  card_tags: 标签
  card_archives: 归档
  card_recent_post: 最新文章
  card_webinfo:
    headline: 网站资讯
    article_name: 文章数目
    runtime:
      name: 已运行时间
      unit: 天
    last_push_date:
      name: 最后更新时间
    site_wordcount: 本站总字数
    site_uv_name: 本站访客数
    site_pv_name: 本站总访问量
  more_button: 查看更多
  card_newest_comments:
    headline: 最新评论
    loading_text: 正在加载中...
    error: 无法获取评论，请确认相关配置是否正确
    zero: 没有评论
    image: 图片
    link: 链接
    code: 代码
  card_toc: 目录

date_suffix:
  just: 刚刚
  min: 分钟前
  hour: 小时前
  day: 天前
  month: 个月前

donate: 打赏
share: 分享

rightside:
  readmode_title: 阅读模式
  font_plus_title: 放大字体
  font_minus_title: 缩小字体
  translate_title: 简繁转换
  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
  toc: 目录
  scroll_to_comment: 直达评论
  setting: 设置
  aside: 单栏和双栏切换

copy_copyright:
  author: 作者
  link: 链接
  source: 来源
  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Snackbar:
  chs_to_cht: 你已切换为繁体
  cht_to_chs: 你已切换为简体
  day_to_night: 你已切换为深色模式
  night_to_day: 你已切换为浅色模式

loading: 加载中...

error404:
  error_title: 页面没有找到
  back_button: 回到主页

config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-weixin
      text: 微信
      link: https://raw.githubusercontent.com/geekdanny/images/master/wechat.jpg
  card_announcement:
    enable: true
    content: 每天进步一点点
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: updated # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: true
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  card_map: true