年前有一位小伙伴给我提供了一个API(在此表示感谢),希望实现当前访客功能,具体效果如下:
注:本篇修改基于 Butterfly 4.2.2
\themes\butterfly\layout\includes\widget
目录下新建card_visitor.pug
文件,并写入如下代码:if theme.aside.card_visitor.enable
.card-widget.card-visitor
.card-content
.item-headline
i.fas.fa-user
span 当前访客
#visitor-container
.visitor
2. 在\themes\butterfly\layout\includes\widget\index.pug
文件中page
项添加如下代码:
!=partial('includes/widget/card_visitor', {}, {cache: true})
3. 在\themes\butterfly\source\js
目录下新建visitor.js
文件,并写入如下代码:
fetch('https://api.gmit.vip/Api/UserInfo').then(data=>data.json()).then(data=>{
let html = '<style>.visitor_location{color:#cb4c46;font-weight:bold;}.visitor_ip{color:#2d80c2;font-weight:bold;}</style>'
html += '<div class="visitor">'
html += '欢迎来自 ' + '<span class="visitor_location">' + data.data.location + '</span>' + ' 的小伙伴!'
html += '</br>'
html += '访问IP:' + '<span class="visitor_ip">' + data.data.ip + '</span>'
html += '</div>'
document.getElementById('visitor-container').innerHTML = html
}).catch(function(error) {
console.log(error);
});
4. 并在主题配置文件_config.butterfly.yml
的bottom
处引入该文件:
inject:
bottom:
- <script src="/js/visitor.js"></script>
5. 在主题配置文件_config.butterfly.yml
的aside
处添加如下配置:
aside:
card_visitor:
enable: true
sort_order: # Don't modify the setting unless you know how it works
可以在配置文件中选择开启或关闭
重新部署,即可看到效果。