本文教程中大部分参考：
UptimeKuma默认状态页面美化
使用Docker搭建Umami统计，显示近一年的pv、uv数据的API搭建
Twikoo腾讯云函数部署转移到私有部署
转载请注明出处！

近况

最近在折腾博客，根据现有情况（博客运行多年，没有更新文章。。。ps：其实有更新几篇，但大多数的文章都是引荐大佬的教程所制作，没有形成写作习惯。。。无非就是我特懒）

服务集合

Uptime Kuma预览

umami预览

Uptime Kuma

  • 我这边服务器用的是 宝塔面板 ，宝塔面板左侧菜单点击终端，输入以下命令行
1
docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1

安装Uptime Kuma

  • 点击Docker，再点击容器，点击最右侧的管理按钮，这里简单设置一下反代与SSL

设置反代&SSL

  • 这时可以在浏览器地址栏输入这个域名访问，设置好你的账号及密码，进入后台配置页面

Uptime Kuma后台

  • 点击添加监控项，显示名称输入名称- -输入URL- -心跳间隔（这里推荐先选择初始60s，保存之后再修改为600s）–最后保存

添加监控项

  • 状态页面–新的状态页–填写名称及路径–下一步

新建状态页

新建状态页

  • 底部自定义文本（这里可设置备案号）;显示标签（这个可以去首页右上角头像设置–标签–添加新标签）;显示Powered By（按需设置）显示证书有效期（按需设置）

  • 添加分组–添加监控项……

设置状态页

注意

所有样式的版权均归张洪Heo所有，如有侵权可联系删除

洪哥相似的CSS样式：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
:root {
  --global-bg: #fff;
  --hr-border: #97bcfb;
  --hr-before-color: #6ea2f9;
  --search-bg: #f6f8fa;
  --search-input-color: #4c4948;
  --search-result-title: #4c4948;
  --preloader-bg: #37474f;
  --preloader-color: #fff;
  --tab-border-color: #f0f0f0;
  --tab-button-bg: #f0f0f0; /* 修正拼写错误：botton → button */
  --tab-button-color: #1f2d3d; /* 修正拼写错误 */
  --tab-button-hover-bg: #dcdcdc; /* 修正拼写错误 */
  --tab-button-active-bg: #fff; /* 修正拼写错误 */
  --sidebar-bg: #f6f8fa;
  --btn-hover-color: #ff7242;
  --btn-color: #fff;
  --btn-bg: #307af6;
  --text-bg-hover: #307af6;
  --light-grey: #eee;
  --text-highlight-color: #1f2d3d;
  --blockquote-color: #6a737d;
  --blockquote-bg: rgba(73, 177, 245, 0.1);
  --reward-pop: #f5f5f5;
  --toc-link-color: #666261;
  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
  --heo-theme: #425AEF;
  --heo-theme-op: #4259ef23;
  --heo-theme-op-deep: #4259efdd;
  --heo-theme-op-light: #4259ef0d;
  --heo-theme-none: #4259ef01;
  --heo-blue: #425AEF;
  --heo-red: #f04a63;
  --heo-pink: #FF7C7C;
  --heo-green: #57bd6a;
  --heo-yellow: #936900;
  --heo-yellow-op: #d99c001a;
  --heo-orange: #e38100;
  --heo-purple: #7a60d2;
  --heo-fontcolor: #363636;
  --heo-background: #f7f9fe;
  --heo-reverse: #000;
  --heo-maskbg: rgba(255, 255, 255, 0.6);
  --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
  --heo-hovertext: var(--heo-theme); /* 修正：使用已定义的变量 */
  --heo-ahoverbg: #F7F7FA;
  --heo-lighttext: var(--heo-theme); /* 修正：使用已定义的变量 */
  --heo-secondtext: rgba(60, 60, 67, 0.8);
  --heo-scrollbar: rgba(60, 60, 67, 0.4);
  --heo-card-btn-bg: #edf0f7;
  --heo-post-blockquote-bg: #fafcff;
  --heo-post-tabs-bg: #f2f5f8;
  --heo-secondbg: #f7f7f9;
  --heo-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --heo-card-bg: #fff;
  --heo-card-bg-op: rgba(0, 0, 0, 0.05); /* 修正：定义这个变量 */
  --heo-card-bg-none: rgba(255, 255, 255, 0);
  --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-card-border: #e3e8f7;
  --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
  --style-border: 1px solid var(--heo-card-border);
  --style-border-always: 1px solid var(--heo-card-border);
  --style-border-hover: 1px solid var(--heo-theme); /* 修正：使用已定义的变量 */
  --style-border-hover-always: 1px solid var(--heo-theme); /* 修正 */
  --style-border-dashed: 1px dashed var(--heo-theme-op);
  --style-border-forever: 2px solid var(--heo-theme); /* 修正 */
}

body {
  background: var(--heo-background); /* 使用已定义的变量 */
}

.shadow-box {
  box-shadow: var(--heo-shadow-border);
  background: var(--heo-card-bg);
  border: var(--style-border);
}

.item-name {
  font-weight: bold;
}

.btn-primary {
  background-color: var(--heo-green);
  color: var(--btn-color); /* 使用已定义的变量 */
}

.hp-bar-big .beat {
  background-color: var(--heo-green);
}

.bg-primary {
  background-color: var(--heo-green) !important;
}

.title-flex {
  justify-content: center;
}

.refresh-info.mb-2 {
  display: none;
}

.mt-3 {
  margin-top: 3rem !important;
}

a {
  text-decoration: none !important;
}

.monitor-list .monitor-list {
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; /* 添加间距 */
}

@media screen and (max-width: 768px) {
  .monitor-list .monitor-list {
    grid-template-columns: 1fr;
  }
  
  .col-md-8, .col-md-4 {
    max-width: 100%;
    width: 100%;
  }
}

.overall-status .ok {
  color: var(--heo-green) !important;
}

.item .row {
  justify-content: space-between;
  align-items: center; /* 添加垂直居中 */
}

.col-md-8 {
  max-width: 50%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.col-md-4 {
  width: 50%;
}

.bg-danger, .bg-warning {
  color: #FFFFFF;
  padding: 0.25rem 0.5rem; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
}

.monitor-list .item .info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 添加间距 */
}

.bg-primary {
  display: none;
}

/* 添加响应式调整 */
@media (max-width: 576px) {
  .item .row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .col-md-8, .col-md-4 {
    max-width: 100%;
    width: 100%;
  }
}

umami部署

添加站点&拉取镜像

  • 在宝塔面板中添加站点，输入域名，点击确定

添加站点

  • 进入根目录，新建 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
  • 然后点击终端执行 docker-compose up -d 即可配置完成。

拉取镜像

  • 添加反代，目标URL 填 http://127.0.0.1:3000, 发送域名 填 $host

添加反代

设置信息

  • 输入域名，umami默认的用户名为 admin，默认密码为 umami。登录之后右上角更改一下语言选项，调成中文。

更改语言

  • 添加网站，输入网站名及域名，点击保存。

添加网站

如何插入统计代码

“关于我”页面数据

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

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

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

1
2
3
4
{
  "username": "your name",
  "password": "your password"
}

成功后会返回token信息：

Twikoo私有部署

1
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

一键部署Twikoo

  • 设置反代&SSL，完成之后访问域名即可

设置反代&SSL

  • 如果显示如图的字幕输出，则API部署好了

Twikoo API正常

  • 进入博客文件夹 _config.anzhiyu.yml 全局搜索 comments，use: Twikoo
1
2
3
4
5
6
7
8
9
10
11
12
13
# Comments System
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Valine/Waline/Twikoo/Artalk
  use: Twikoo # Twikoo/Waline
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo.imoyan.cc/
  region:
  visitor: false
  option:

envId 中填写 服务器公网IP:8080 或者 设置二级域名如 https://twikoo.imoyan.cc/，之后再进行hexo三连

1
2
3
hexo cl
hexo ge
hexo d

写在最后