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 {%- 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 {%- if theme.links %} //在这里↓ <div > <script type ="text/javascript" src ="//rf.revolvermaps.com/0/0/8.js?i=5le2h1hfo8g& m=7& c=ff0000& cr1=ffffff& f=arial& l=49& bv=100& rs=100& 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