0%

hexo Butterfly主题右侧栏添加3D星球显示效果(revolvermaps插件)

hexo

先去revolvermaps官网选择一款你喜欢的样式,将代码拷贝出来

代码区域

此处为示例代码,可以自行切换
1
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/1.js?i=549th73ngsi&amp;s=220&amp;m=2&amp;v=false&amp;r=false&amp;b=000000&amp;n=false&amp;c=ff0000" async="async"></script>

开始在Butterfly添加3D地球插件

  1. Butterfly/layout/includes/widget下添加文件card_maps.pug

代码如下:

1
2
3
4
5
6
.card_widget.card-maps
.card-content
.item_headline
i.fa.fa-bullhorn.card-maps-animation(aria-hidden="true")
span= _p('aside.card_maps')
script(type='text/javascript', src='//rf.revolvermaps.com/0/0/8.js?i=5d1fmuvx481&m=0&c=ff0000&cr1=ffffff&f=arial&l=33', async='async')

上面代码中src里面的内容替换为你上面拷贝出来的script里的src即可

  1. 配置主题文件:source/_data/butterfly.yml,在aside设置中添加如下代码,即可使用。
1
card_maps: true

代码图

-------- 本文结束 感谢阅读 --------
文武科技社
扫码上车,带你飞!
😆听说打赏我的人,都进了福布斯排行榜😆
  • 本文标题: hexo Butterfly主题右侧栏添加3D星球显示效果(revolvermaps插件)
  • 本文作者: 程序小黑
  • 创建时间: 2020年01月06日 - 20时01分
  • 修改时间: 2020年01月06日 - 16时01分
  • 本文链接: https://chengxuxiaohei.cn/hexo/hexo-butterfly-3dmap.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!