效果
演示网址：传送门
图标皆来自 Font Awesome 中文网 如有更好推荐，欢迎留言
有免费版也有付费版，以下只针对免费版。
简介
- Uptime Robot是一个网站监控服务，每 5 分钟检查一次你设定的网站 或服务器，最多可以免费检查 50 个网站。
- 如果你的网站或者服务器宕机时，Uptime Robot会通过邮件提醒你。
- 有多种监控方式、支持自定义域名
使用
- 访问官网，注册账号 ： 传送门
- 注册账号
- 添加监视器。点击
add new monitor
有四种监控方式，分别为Http(s)**、Ping、Port、Keyword，在这里我选择Http(s)来监控我的网站，选择Ping来监控我的服务器。Port**一般用于VPS监控。
- 勾选“Alert Contacts To Notify“会有邮箱提醒。
若想添加本博客同款，至此请继续阅读Matery模板 - 打开公共状态页。
点击上方My Settings，选择右下角Add Public Status Pages。填写名称，以及Logo以及自定义域名和是否设置密码。
自定义域名我是用的 bkjw.rogn.top，还得去域名控制台添加一下解析信息，记录类型为CNAME，记录值为stats.uptimerobot.com
虽然我没有用它自动生成的页面，但不排除会有需要的
Matery模板
新建页面
hexo new page supervise
修改supervise目录下的index.md的格式
---
title: supervise
type: "supervise"
layout: "supervise"
date: 2020-12-07 13:04:17
---
在主题配置文件中添加导航
友链监测:
url: /supervise
icon: fa fa-desktop
添加supervise.ejs
在 matery/layout 下新建 supervise.ejs
<style>
table,td,th{border:0}.card-supervise{padding:24px;border-radius:002px2px}.wname{font-size:16px}.card-panel{padding:0;color:#fff}.supervise_details{margin:38px015px-4px;font-size:1.6rem;font-weight:700;line-height:1.7rem}.panel-heading{font-size:20px}.teal{margin-right:5px}.check>tbody>tr>td{padding-top:11px;padding-bottom:11px}.checkth{text-align:center}.check.center{text-align:center;vertical-align:middle}.check.sertitle{vertical-align:middle}.status-success{color:#5cb85c}.status-warning{color:#f0ad4e}.status-danger{color:#d9534f}#server-container{border-bottom:1pxsolid#ddd}.barl>td{border-top:none!important;padding:0!important}.barl.progress{margin:0;border-radius:0;height:8px;box-shadow:none}.barl.progress.progress-bar{box-shadow:none;opacity:.7}.barl.progress.progress-bar:hover{opacity:1}.barl.progress.progress-bar-default{background-color:#efefef}.progress.tooltip.tooltip-inner.ttime{color:#a3a3a3;font-size:11px}.credit{font-size:12px;color:#bbb}.credita{color:#999}.credit.pipe{padding-left:6px;padding-right:6px;color:#ddd}
</style>
<%-partial('_partial/bg-cover') %>
<mainclass="content"style="min-height: 131px;">
<divclass="container chip-container">
<divclass="card">
<divclass="card-content">
<divclass="tag-title center-align"><iclass="fa fa-desktop"></i> 友链状态监测</div>
<divclass="supervise_details">本页面是友情链接状态监控，展示了全部链接的当前运行状态。</div>
<hr>
<divclass="panel panel-info">
<divclass="panel-heading">各友情链接当前状态</div>
<divclass="panel-body">
<divid="panel-heading"class="alert alert-warning hide"role="alert">
<b>当前状态：</b>部分友链发生异常，我们将尽快修复。
</div>
<divid="stattip-ok"class="alert alert-success hide"role="alert">
<b>当前状态：</b>所有友链正常运行中，没有发现异常。
</div>
<divid="stattip-load"class="alert alert-info"role="alert">
<b>当前状态：</b>正在检测运行状态，请稍候..
</div>
<divclass="table-responsive">
<tableclass="table table-hover check">
<thead>
<trid="server-title">
</tr>
</thead>
<tbodyid="server-container"></tbody>
</table>
</div>
</div>
<divclass="alert alert-info"style="text-align:center;margin-bottom:0">
距离下次监测刷新时间:
<spanclass="fa fa-refresh"></span><spanid="last-update"></span>
</div>
</div>
</div>
</div>
</div>
</main>
<scripttype="template/mustache"id="server-template">
<tr class="{{alert}}">
<td rowspan="2" class="sertitle">
<span class="card-panel {{label}}"><span class="fa fa-{{statusicon}}"style="padding-left: 2px;"></span> {{statustxt}}</span>
<span class="wname">{{friendlyname}}</span>
</td>
{{#charts}}
<td class="center">
<span class="status-{{uptype}} set-tooltip" data-toggle="tooltip" data-placement="top" title="{{uptime}}"><span class="fa fa-{{upsign}}"></span></span>
</td>
{{/charts}}
</tr>
<tr class="{{alert}} barl">
<td colspan="8" class="barls">
<div class="progress">
{{#progress}}
<div class="progress-bar progress-bar-{{types}} set-tooltip" style="width: {{len}}%" data-toggle="tooltip" data-placement="top" title="{{stattip}}"></div>
{{/progress}}
</div>
</td>
</tr>
</script>
<script>functiondate(n,t){functione(n,t){return(n+="").length<t?newArray(++t-n.length).join("0")+n:n}varu=t?newDate(1e3*t):newDate,r=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],o={1:"st",2:"nd",3:"rd",21:"st",22:"nd",23:"rd",31:"st"},a=["","January","February","March","April","May","June","July","August","September","October","November","December"],i={d:function(){returne(i.j(),2)},D:function(){returni.l().substr(0,3)},j:function(){returnu.getDate()},l:function(){returnr[i.w()]},N:function(){returni.w()+1},S:function(){returno[i.j()]?o[i.j()]:"th"},w:function(){returnu.getDay()},z:function(){return(u-newDate(u.getFullYear()+"/1/1"))/864e5>>0},W:function(){varn,t=i.z(),e=364+i.L()-t,r=(newDate(u.getFullYear()+"/1/1").getDay()||7)-1;returne<=2&&(u.getDay()||7)-1<=2-e?1:t<=2&&4<=r&&6-r<=t?(n=newDate(u.getFullYear()-1+"/12/31"),date("W",Math.round(n.getTime()/1e3))):1+(r<=3?(t+r)/7:(t-(7-r))/7)>>0},F:function(){returna[i.n()]},m:function(){returne(i.n(),2)},M:function(){returni.F().substr(0,3)},n:function(){returnu.getMonth()+1},t:function(){varn;return2==(n=u.getMonth()+1)?28+i.L():1&n&&n<8||!(1&n)&&7<n?31:30},L:function(){varn=i.Y();return3&n||!(n%100)&&n%400?0:1},Y:function(){returnu.getFullYear()},y:function(){return(u.getFullYear()+"").slice(2)},a:function(){return11<u.getHours()?"pm":"am"},A:function(){returni.a().toUpperCase()},B:function(){varn=60*(u.getTimezoneOffset()+60),t=3600*u.getHours()+60*u.getMinutes()+u.getSeconds()+n,e=Math.floor(t/86.4);return1e3<e&&(e-=1e3),e<0&&(e+=1e3),1==String(e).length&&(e="00"+e),2==String(e).length&&(e="0"+e),e},g:function(){returnu.getHours()%12||12},G:function(){returnu.getHours()},h:function(){returne(i.g(),2)},H:function(){returne(u.getHours(),2)},i:function(){returne(u.getMinutes(),2)},s:function(){returne(u.getSeconds(),2)},O:function(){varn=e(Math.abs(u.getTimezoneOffset()/60*100),4);returnn=0<u.getTimezoneOffset()?"-"+n:"+"+n},P:function(){varn=i.O();returnn.substr(0,3)+":"+n.substr(3,2)},c:function(){returni.Y()+"-"+i.m()+"-"+i.d()+"T"+i.h()+":"+i.i()+":"+i.s()+i.P()},U:function(){returnMath.round(u.getTime()/1e3)}};returnn.replace(/[\\]?([a-zA-Z])/g,function(n,t){returnret=n==t&&i[t]?i[t]():t,ret})}</script>
<scriptsrc="<%-theme.jsDelivr.url %><%-url_for('/js/mustache.min.js') %>"></script>
<scriptsrc="<%-theme.jsDelivr.url %><%-url_for('/js/uptimerobot.js') %>"></script>
<scriptsrc="<%-theme.jsDelivr.url %><%-url_for('/js/upscuits.js') %>"></script>
<scripttype="text/javascript">jQuery(document).ready(myApp.dashboard.init)</script>
引入JS文件
- 下载JS文件
mustache.min.js
upscuits.js - 新建JS文件
配置JS文件中uptimerobot.js内容
var__apiKeys= [
'xxxxxxxxxx',// API 1
'xxxxxxxxxx'// API 2
];
//https://uptimerobot.com/ 设置要监控的域名或者ip 获取到key
// refresh interval (in seconds 暂定五分钟)
var__refresh=300;
获取API
将API复制到uptimerobot.js 中即可
