Hexo添加当前访客信息
前言
年前有一位小伙伴给我提供了一个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
.visitor2. 在\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可以在配置文件中选择开启或关闭
重新部署，即可看到效果。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录