RevolverMaps 3D 地球仪小组件

RevolverMaps 是一个免费的 3D 地球的小部件
官方的描述是:
RevolverMaps Standard GL 显示访问者的位置以及从安装到您的站点时的访问次数。最近的访问者位置被动画和标记,新的访问者位置出现在地球上。单击小部件底部的按钮可打开公共实时统计页面,提供有关访问者的详细信息。
将这个小部件安装到我们的博客还是蛮好看的,所以我这篇文章记录一下 NexT 主题在侧边栏添加 RevolverMaps

首先我们访问RevolverMaps官网生成代码

插件外观方面按需设置即可,默认也可以
设置完成后,我们点击 copy to clipboard 按钮(最下面的复制到剪贴板)
打开主题下的 site-overview.njk 文件路径为blog\themes\next\layout_partials\sidebar\site-overview.njk
翻到最底部代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{# Blogroll #}
{%- if theme.links %}
<div class="links-of-blogroll site-overview-item animated">
<div class="links-of-blogroll-title">
{%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
{{ theme.links_settings.title }}
</div>
<ul class="links-of-blogroll-list">
{%- for blogrollText, blogrollURL in theme.links %}
<li class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}

我们在{%- if theme.links %}代码下面一行添加一个div标签,将我们刚才复制的小部件代码添加到div标签里即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{# Blogroll #}
{%- if theme.links %}
//在这里↓
<div>
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5le2h1hfo8g&amp;m=7&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=49&amp;bv=100&amp;rs=100&amp;as=100" async="async"></script>
</div>
<div class="links-of-blogroll site-overview-item animated">
<div class="links-of-blogroll-title">
{%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
{{ theme.links_settings.title }}
</div>
<ul class="links-of-blogroll-list">
{%- for blogrollText, blogrollURL in theme.links %}
<li class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}

之前忘了在文章里嵌入了,今天突然想起来嵌入文章,所以日期改为最新重发一遍,走过路过的也可以玩一玩

end