网站使用umami api制作数据挂件
前言
因为51统计最近一直出现问题，并且有传言称51统计的js文件会出现劫持跳转的问题，于是就想更换统计方式，Umami因此成为我的主要选择。
51统计好的地方在于能够显示出统计挂件，但是有大佬用umami的api也制作出了数据挂件。
参考
张洪HEO：https://blog.zhheo.com/p/61e9.html
木木木木木：https://immmmm.com/hi-umami-api/
教程
1.首先搭建属于自己的umami，具体可以访问
2.token可以到搭建好的umami站点，然后打开开发者工具，找到网络中的https://你的域名/api/auth/verify 里的请求头中的authorization 中Bearer 后面的内容
3.网站ID就是后台网站中的比如https://你的域名/websites/0ba3d4b8-95ec-4e33-a727-32b013d6cfa7 ，其中0ba3d4b8-95ec-4e33-a727-32b013d6cfa7就是网站ID
3.更改如下代码，并且添加到WordPress的自定义html中
<div class="tongji">
今日访问人数 <span id="todayUv">0</span> | 今日访问量 <span id="todayPv">0</span> | 本月访问量 <span id="monthPv">0</span> | 总访问量 <span id="totalPv">0</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
umiTongji();
});
function umiTongji() {
var umiToken = "你的token"; //获取到的 token
var umiId = "网站ID"; //获取到的 websiteId
var umiTime = Date.parse(new Date());
var todayStart = new Date().setHours(0, 0, 0, 0);
var monthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime();
var umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + todayStart + "&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#todayPv').innerHTML = resdata.pageviews.value;
document.querySelector('#todayUv').innerHTML = resdata.visitors.value;
});
umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + monthStart + "&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#monthPv').innerHTML = resdata.pageviews.value;
});
umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=0&endAt=" + umiTime;
fetch(umiUrl, {
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(resdata => {
document.querySelector('#totalPv').innerHTML = resdata.pageviews.value;
});
}
</script>
<style>
#todayUv, #todayPv, #monthPv, #totalPv {
color: #00a0ff;
}
</style>
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/4de222ec15ffb023ed6518671316a68e.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/4243455e6d579155a4ce6464af10c289.webp)
![图片[2]-新锐博客](https://www.xrbk.cn/wp-content/uploads/fb76e1eeeeacd77427264422446c1021.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/1851ef21628aed1745083bee6c38e7ba.webp)
![图片[2]-新锐博客](https://www.xrbk.cn/wp-content/uploads/e288484aac96a043102c90cd4ed9571a.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/1aaf2bb2488812fbaa250b6fd1afa69c.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/31450cba56291237115c1afcfac7c33c.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/b66aba2e2f2b049d05309fa4f2df32c0.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/2023/04/791732b78592c596cf19c2577012c428.png)
![图片[2]-新锐博客](https://www.xrbk.cn/wp-content/uploads/2023/04/8ab13d9ea7790b46c79ad46eba264614.png)
![图片[3]-新锐博客](https://www.xrbk.cn/wp-content/uploads/2537b6a5d31de9f2ac8a003a8643cce2.gif)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/2023/04/9f2fa29435c454d27c60fc8eb8c82834.png)
![图片[2]-新锐博客](https://www.xrbk.cn/wp-content/uploads/2023/04/4b0a9633ec76d4e7177097f29a80c57b.png)
