在使用Uptime Kuma进行状态页面配置时，我进行了一些个性化的调整，使其更加符合我的需求和审美。以下是我对状态页面进行的一些改动与心得分享。
1. 自定义底部文本
在状态页面底部，我加入了一段自定义文本：
愿这个世界都充满善意
这是我的个人愿望，希望能够通过这样的小细节传递正能量。
2. 隐藏 Powered By 文本
为了使页面看起来更加简洁，我选择隐藏“Powered By”文本让页面更具个性化。
3. 应用自定义 CSS
以下是我使用的一些自定义 CSS 样式：
/* 自定义字体定义 */
@font-face {
font-family: '1666963922';
src: url('https://jsd.cdn.zzko.cn/gh/54ayao/ACG@main/static/fonts/1666963922.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 全局样式 */
body {
font-family: '1666963922', sans-serif; /* 使用自定义字体 */
color: #333;
margin: 0;
padding: 0;
background-image: url('https://ipgeo-bingpic.hf.space'); /* 自适应背景图片API */
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* 导航栏链接悬停样式 */
.navbar a:hover {
text-decoration: underline;
}
/* 卡片样式 */
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 20px;
}
/* 卡片标题样式 */
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
/* 在明亮主题下，应用不同的背景色及75%透明度 */
.shadow-box {
background-color: rgba(255, 255, 255, 0.75);
padding: 10px;
margin: 5px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* 在暗色主题下，应用不同的背景色及65%透明度 */
.dark .shadow-box:not(.alert) {
background-color: rgba(0, 0, 0, 0.65);
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 侧边栏样式 */
.sidebar {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 特定元素和类的样式 */
span[data-v-7d4a7f28],
.item-name,
div.description[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
div[data-v-7d4a7f28][data-v-b8247e57].alert-heading.p-2,
.refresh-info > div,
.alert-heading.p-2 > div,
.alert-heading.p-2 > p,
.alert-heading.p-2 > h1 {
background-image: linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
font-family: '1666963922', sans-serif;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 400% 100%;
animation: wzw 10s linear infinite;
}
/* 动画关键帧定义 */
@keyframes wzw {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#app {
font-family: '1666963922', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji' !important;
}
在页面背景图片部分，我使用了自建的必应图片接口，感兴趣的可以自行部署，可以选择抱抱脸空间一键复制 BingPic - a Hugging Face Space by IPGEO 或使用 Docker 进行部署，命令如下：
docker run -d -p 8080:8080 fossandroid/bingpic:latest
如果不想部署的可以直接用我的
https://ipgeo-bingpic.hf.space
不带路径请求，默认返回分辨率为1920x1080的图片
带参数的请求示例
https://ipgeo-bingpic.hf.space/index.php?size=1920x1200&daysago=0
实时接口图像
昨天接口图像
最后附上我自己的服务状态监控页面