许久之前就开始使用 UptimeRobot 来监控站点的状态了,不过一直是使用默认的方式,即绑定域名后使用官方的默认模板,使用体验还算可以,但令人不爽的是只有最近一周的运行状态,而且感觉状态刷新频率也不高,时值近日 NAS 极不稳定(现在还没弄好),我非常想看看是有多不稳定,但官方的监控页面信息实在不足,因此换用基于官方API的自定义监控页面。
示例页面:绑定的二级域名
不足之处:
示例页面:原项目DEMO页
利用 UptimeRobot 的API开发的监控页面,很好的解决了上述不足:
搭建步骤:
不足之处:
样式太丑了,和我博客的风格很不搭,别的都很好,致敬作者。
示例页面:本站内页
修改过程非常简单,直接将以下CSS代码写入 index.html 中即可。注意几点:
<script>
document.getElementById('footer').style.display = 'none'; // 隐藏选择的元素
</script>
<style>
body {
background-color: #010012;
background-image: linear-gradient(#010012, #111f4c, #010012);
}
#header .navi {
font-size: 15px;
font-weight: 600;
}
#uptime .timeline i.ok {
background: #2195f3bb;
}
#uptime .timeline i.down {
background: #f34539bb;
}
#uptime .timeline i.none {
background: #2196f326;
}
#uptime .meta .status.down {
background-image: url();
color: #f34539bb;
font-weight: 600;
}
#uptime .timeline i {
border-radius: 10px;
}
#uptime .meta .status.ok {
background-image: url();
color: #2195f3bb;
font-weight: 600;
}
#uptime .meta .name {
font-weight: 600;
}
#uptime .foot {
color: #757a80;
font-weight: 600;
}
#uptime .timeline {
height: 55px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
#footer a {
color: #999fa6;
font-weight: 700;
}
#header .logo {
font-size: 18px;
font-weight: 700;
color: #2195f3;
}
#uptime .item {
padding: 18px 20px;
border-bottom: 1px solid #c5def6;
}
#uptime {
border: 0px solid #e3e4e6;
}
#uptime .item {
border-bottom: 15px solid #060923;
}
</style>
最终效果:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。