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