配置教程
创建一个站点,在根目录建立docker-compose.yaml
文件,填写下面的内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| 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。进入之后我们先改一下语言。
![修改配置](/img/loading.avif)
语言选择中文
![选择中文](/img/loading.avif)
添加网站
进入设置->点击添加网站,设置一个名字和添加地址,地址不需要https协议头
![添加网站](/img/loading.avif)
插入代码
我们将统计代码插入到head中比较好。
点击网站的“编辑”
![编辑网站](/img/loading.avif)
选择“跟踪代码”我们就可以看到html代码了。插入到每一个页面即可。
![插入代码](/img/loading.avif)
将上面代码添加到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
|
![请求](/img/loading.avif)
成功后会返回tocken信息:
![返回](/img/loading.avif)
然后访问HeoPVBridge,下载并修改info.php,更改地址、tocken和网站id。然后部署到网站的php项目中即可。
![修改信息](/img/loading.avif)
在宝塔中部署php项目
在宝塔面板点击php项目,添加一个站点。
添加域名等信息,确保php有版本。
进入网站对应的目录。将php文件上传到这里就可以,然后就能直接通过域名和路径访问了。例如我的:
1
| https://api.haiskykblog.top/info.php
|
前端请求
前端请求就比较相似了,简单的修改了一下原有的代码(php的地址换成你的):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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");
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中合适位置添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| 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");
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));
|
1 2 3 4
| tj: provider: umami url: https://api.haiskyblog.top/um.php img: https://img.haiskyblog.top/blog/202310092200234.jpg!cover
|