部署了umami后调用api制作数据挂件

前言

自从51la和统计鸟以及悟空统计被某能收购后，经常访问跳灰产网站，用umami自建统计站成为了一众站长的新选择。

教程

1. 首先搭建属于自己的umami
2. token的获取可以到搭建好的umami站点，然后F12，找到 开发者工具 的 网络 中的https://你的域名/api/auth/verify 里的请求头中的authorization 中Bearer 后面的内容
3. 网站ID就是后台网站中的比如https://你的域名/websites/9678d4f8-91so-8r22-b161-88f604v3klx9 ，其中9678d4f8-91so-8r22-b161-88f604v3klx9就是网站ID
4. 更改如下代码，并且添加到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>