修改自定义站点监控页面的样式
时间:2022-07-22
本文章向大家介绍修改自定义站点监控页面的样式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
许久之前就开始使用 UptimeRobot 来监控站点的状态了,不过一直是使用默认的方式,即绑定域名后使用官方的默认模板,使用体验还算可以,但令人不爽的是只有最近一周的运行状态,而且感觉状态刷新频率也不高,时值近日 NAS 极不稳定(现在还没弄好),我非常想看看是有多不稳定,但官方的监控页面信息实在不足,因此换用基于官方API的自定义监控页面。
官方默认模板
示例页面:绑定的二级域名
不足之处:
- 只有七天状态信息可见
- 刷新频率未知(迟滞)
- 必须绑定域名,也就意味着无法作为网站内页(之前用iframe硬加进来的,其实监控页面是up.cz5h.com)
- 无法自由更改页面内容
自定义模板(原版)
示例页面:原项目DEMO页
利用 UptimeRobot 的API开发的监控页面,很好的解决了上述不足:
- 其实现方式意味着我们可以随心所欲的安排监控页面出现的位置,网站内页或者嵌入到某页面都是可以实现的;
- 其API允许查看90天(据说)的状态信息,简直不要太开心;
- 实现方便,只需引入几个文件夹即可;
搭建步骤:
- 申请 UptimeRobot 账号,配置自己的站点并监控,其网站做的很人性化,步骤不再赘述,至此我们在其网站上就可以查看服务/站点的状态了;
- 下载自定义模板的代码,Github地址,并将其解压到Hexo文件夹内,具体可以放在 theme -> yourTheme -> source -> folderName文件夹内;
- 在 UptimeRobot 官网,通过 MySettings - API Settings -> Monitor-Specific API Keys -> Show/hide 中的搜索框,找到你已创建的监控站点,点击生成 API kEY 并复制;
- 将 Key 复制到 config.js 中的对应位置,每个监控任务对应一个 Key,比如你监控了十个站点/服务,那需要十个 Key;
- 部署 Hexo,此时访问 yourSite/folderName(例如我的[cz5h.com/up}(https://www.cz5h.com/up)),就可以看到监控信息了。
不足之处:
样式太丑了,和我博客的风格很不搭,别的都很好,致敬作者。
简单修改后样式
示例页面:本站内页
修改过程非常简单,直接将以下CSS代码写入 index.html 中即可。注意几点:
- 原页面有 footer 信息,这里直接用JS隐藏掉,之后你可以再覆写 footer,这样即使不修改源码也可以快速得到相要的样式;
- 样式名称还是很规范的,利用F12检查元素可以很快就完成修改;
<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>
最终效果:
- 基于SpringBoot的任务管理平台v1.0正式发布
- 大数据系统的Lambda架构
- AKKA中的事件流
- Java初涉感悟
- Android 6.0 Permission权限与安全机制
- SpringBoot工作机制
- Android权限管理PermissionsDispatcher2.3.2使用+原生6.0权限使用
- SpringBoot中的IoC
- Sonar安装配置
- 《AngularJS深度剖析与最佳实践》推荐序
- JavaScript递归方法 生成 json tree 树形结构数据
- springboot使用hibernate validator校验
- 机器学习(三) ——k-近邻算法基础
- SpringBoot实战 之 异常处理篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法