使用Docker搭建Umami统计，显示近一年的pv、uv数据的API搭建

配置教程

创建一个站点，在根目录建立docker-compose.yaml文件，填写下面的内容：

version: '3'
services:
  umami:
    container_name: umami
    image: umamisoftware/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      HASH_SALT: replace-me-with-a-random-string
    depends_on:
      - db
    restart: always
  db:
    container_name: umami-db
    image: postgres:12-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./sql/schema.postgresql.sql:/docker-entrypoint-initdb.d/schema.postgresql.sql:ro
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

注意，umami的ports中，3000:3000可以将前面的3000更换成其他闲置端口。

然后通过ssh访问服务器后，cd进这个文件夹，然后执行docker-compose up -d即可配置完成。

添加反代

宝塔的话添加反代还是比较容易的：

目标url填写：http://127.0.0.1:你的端口号，如果使用的是本文的docker compose文件没有改端口号的话，应该填写：http://127.0.0.1:3000

设置信息

进入之后umami默认的用户名为admin，默认密码为umami。进入之后我们先改一下语言。

语言选择中文

添加网站

进入设置->点击添加网站，设置一个名字和添加地址，地址不需要https协议头

插入代码

我们将统计代码插入到head中比较好。

点击网站的“编辑”

选择“跟踪代码”我们就可以看到html代码了。插入到每一个页面即可。

将上面代码添加到head中

在/include/inject/head.pug中添加：

1
2
3

// umami
if theme.umami_analytics 
    script(defer, src='https://umami.haiskyblog.top/script.js', data-website-id=`${theme.umami_analytics}`)

主题配置文件中添加：

1 2	# umami_analytics umami_analytics: 你的网站id

关于页面数据搭建

基于林木木的前端调用 Umami API 数据我们可以写一个umami的api。

首先进入Hoppscotch获取tocken： https://hoppscotch.io/

1	https://你的地址/api/auth/login

成功后会返回tocken信息：

然后访问HeoPVBridge，下载并修改info.php，更改地址、tocken和网站id。然后部署到网站的php项目中即可。

在宝塔中部署php项目

在宝塔面板点击php项目，添加一个站点。

添加域名等信息，确保php有版本。

进入网站对应的目录。将php文件上传到这里就可以，然后就能直接通过域名和路径访问了。例如我的：

1	https://api.haiskykblog.top/info.php

前端请求

前端请求就比较相似了，简单的修改了一下原有的代码（php的地址换成你的）：

fetch("https://api.haiskyblog.top/um.php")
  .then(res => res.json())
  .then(data => {
    let title = {
      "today_uv": "今日人数",
      "today_pv": "今日访问",
      "yesterday_uv": "昨日人数",
      "yesterday_pv": "昨日访问",
      "last_month_pv": "最近月访问",
      "last_year_pv": "最近年访问"
    };

    let s = document.getElementById("statistic");

    // 遍历 JSON 数据并根据 title 对象匹配显示
    for (let key in data) {
      if (data.hasOwnProperty(key) && title[key]) {
        s.innerHTML += `<div><span>${title[key]}</span><span id="${key}">${data[key]}</span></div>`;
      }
    }
  })
  .catch(error => console.error('Error:', error));

再记录一下我的博客主题中怎么应用。

includes\widgets\page\about\other.pug中合适位置添加：


when 'umami'
    a(href="https://umami.haiskyblog.top/") umami统计
...

when 'umami'
    script.
        fetch("#{tj.url}")
            .then(res => res.json())
            .then(data => {
                let title = {
                "today_uv": "今日人数",
                "today_pv": "今日访问",
                "yesterday_uv": "昨日人数",
                "yesterday_pv": "昨日访问",
                "last_month_pv": "最近月访问",
                "last_year_pv": "最近年访问"
                };

                let s = document.getElementById("statistic");

                // 遍历 JSON 数据并根据 title 对象匹配显示
                for (let key in data) {
                if (data.hasOwnProperty(key) && title[key]) {
                    s.innerHTML += `<div><span>${title[key]}</span><span id="${key}">${data[key]}</span></div>`;
                }
                }
            })
            .catch(error => console.error('Error:', error));

在about.yaml中修改：

tj: # 统计
  provider: umami # 值为 51la（51la网站统计）或 baidu（百度统计）
  url: https://api.haiskyblog.top/um.php  # https://v6-widget.51.la/v6/K3Wy2Vdi7kPODN2w/quote.js需要到51la官网注册自行获取
  img: https://img.haiskyblog.top/blog/202310092200234.jpg!cover # 背景