添加友链监测页面

效果

演示网址:传送门

图标皆来自 Font Awesome 中文网 如有更好推荐,欢迎留言

有免费版也有付费版,以下只针对免费版。

简介

  • Uptime Robot是一个网站监控服务,每 5 分钟检查一次你设定的网站 或服务器,最多可以免费检查 50 个网站。
  • 如果你的网站或者服务器宕机时,Uptime Robot会通过邮件提醒你。
  • 有多种监控方式、支持自定义域名

使用

  1. 访问官网,注册账号 : 传送门

  2. 注册账号

  3. 添加监视器。点击add new monitor

    有四种监控方式,分别为*Http(s)**、**Ping*、PortKeyword,在这里我选择Http(s)来监控我的网站,选择Ping来监控我的服务器。Port一般用于VPS监控。

    勾选“Alert Contacts To Notify“会有邮箱提醒。

    若想添加本博客同款,至此请继续阅读Matery模板

  4. 打开公共状态页。

    点击上方**My Settings,选择右下角Add Public Status Pages。填写名称,以及Logo以及自定义域名**和是否设置密码。

    自定义域名我是用的 bkjw.rogn.top,还得去域名控制台添加一下解析信息,记录类型为CNAME,记录值为stats.uptimerobot.com

    虽然我没有用它自动生成的页面,但不排除会有需要的

Matery模板

新建页面

1
hexo new page supervise

修改supervise目录下的index.md的格式

1
2
3
4
5
6
---
title: supervise
type: "supervise"
layout: "supervise"
date: 2020-12-07 13:04:17
---

在主题配置文件中添加导航

1
2
3
友链监测:
url: /supervise
icon: fa fa-desktop

添加supervise.ejs

matery/layout 下新建 supervise.ejs

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
<style>
table,td,th{border:0}.card-supervise{padding:24px;border-radius:0 0 2px 2px}.wname{font-size:16px}.card-panel{padding:0;color:#fff}.supervise_details{margin:38px 0 15px -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}.check th{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:1px solid #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}.credit a{color:#999}.credit .pipe{padding-left:6px;padding-right:6px;color:#ddd}

</style>
<%- partial('_partial/bg-cover') %>
<main class="content" style="min-height: 131px;">
<div class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align"><i class="fa fa-desktop"></i>&nbsp;&nbsp;友链状态监测</div>
<div class="supervise_details">本页面是友情链接状态监控,展示了全部链接的当前运行状态。</div>
<hr>
<div class="panel panel-info">
<div class="panel-heading">各友情链接当前状态</div>
<div class="panel-body">
<div id="panel-heading" class="alert alert-warning hide" role="alert">
<b>当前状态:</b>部分友链发生异常,我们将尽快修复。
</div>
<div id="stattip-ok" class="alert alert-success hide" role="alert">
<b>当前状态:</b>所有友链正常运行中,没有发现异常。
</div>
<div id="stattip-load" class="alert alert-info" role="alert">
<b>当前状态:</b>正在检测运行状态,请稍候..
</div>
<div class="table-responsive">
<table class="table table-hover check">
<thead>
<tr id="server-title">
</tr>
</thead>
<tbody id="server-container"></tbody>
</table>
</div>
</div>
<div class="alert alert-info" style="text-align:center;margin-bottom:0">
距离下次监测刷新时间:
<span class="fa fa-refresh"></span> <span id="last-update"></span>
</div>
</div>
</div>
</div>
</div>
</main>
<script type="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>function date(n,t){function e(n,t){return(n+="").length<t?new Array(++t-n.length).join("0")+n:n}var u=t?new Date(1e3*t):new Date,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(){return e(i.j(),2)},D:function(){return i.l().substr(0,3)},j:function(){return u.getDate()},l:function(){return r[i.w()]},N:function(){return i.w()+1},S:function(){return o[i.j()]?o[i.j()]:"th"},w:function(){return u.getDay()},z:function(){return(u-new Date(u.getFullYear()+"/1/1"))/864e5>>0},W:function(){var n,t=i.z(),e=364+i.L()-t,r=(new Date(u.getFullYear()+"/1/1").getDay()||7)-1;return e<=2&&(u.getDay()||7)-1<=2-e?1:t<=2&&4<=r&&6-r<=t?(n=new Date(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(){return a[i.n()]},m:function(){return e(i.n(),2)},M:function(){return i.F().substr(0,3)},n:function(){return u.getMonth()+1},t:function(){var n;return 2==(n=u.getMonth()+1)?28+i.L():1&n&&n<8||!(1&n)&&7<n?31:30},L:function(){var n=i.Y();return 3&n||!(n%100)&&n%400?0:1},Y:function(){return u.getFullYear()},y:function(){return(u.getFullYear()+"").slice(2)},a:function(){return 11<u.getHours()?"pm":"am"},A:function(){return i.a().toUpperCase()},B:function(){var n=60*(u.getTimezoneOffset()+60),t=3600*u.getHours()+60*u.getMinutes()+u.getSeconds()+n,e=Math.floor(t/86.4);return 1e3<e&&(e-=1e3),e<0&&(e+=1e3),1==String(e).length&&(e="00"+e),2==String(e).length&&(e="0"+e),e},g:function(){return u.getHours()%12||12},G:function(){return u.getHours()},h:function(){return e(i.g(),2)},H:function(){return e(u.getHours(),2)},i:function(){return e(u.getMinutes(),2)},s:function(){return e(u.getSeconds(),2)},O:function(){var n=e(Math.abs(u.getTimezoneOffset()/60*100),4);return n=0<u.getTimezoneOffset()?"-"+n:"+"+n},P:function(){var n=i.O();return n.substr(0,3)+":"+n.substr(3,2)},c:function(){return i.Y()+"-"+i.m()+"-"+i.d()+"T"+i.h()+":"+i.i()+":"+i.s()+i.P()},U:function(){return Math.round(u.getTime()/1e3)}};return n.replace(/[\\]?([a-zA-Z])/g,function(n,t){return ret=n==t&&i[t]?i[t]():t,ret})}</script>
<script src="<%- theme.jsDelivr.url %><%- url_for('/js/mustache.min.js') %>"></script>
<script src="<%- theme.jsDelivr.url %><%- url_for('/js/uptimerobot.js') %>"></script>
<script src="<%- theme.jsDelivr.url %><%- url_for('/js/upscuits.js') %>"></script>
<script type="text/javascript">jQuery(document).ready(myApp.dashboard.init)</script>

引入JS文件

  1. 下载JS文件

    mustache.min.js

    upscuits.js

  2. 新建JS文件

    配置JS文件中 uptimerobot.js 内容

    1
    2
    3
    4
    5
    6
    7
    8
    var __apiKeys = [
    'xxxxxxxxxx',// API 1
    'xxxxxxxxxx'// API 2
    ];
    //https://uptimerobot.com/ 设置要监控的域名或者ip 获取到key

    // refresh interval (in seconds 暂定五分钟)
    var __refresh = 300;

获取API

将API复制到uptimerobot.js 中即可

文章作者: 闲花手札
文章链接: https://www.islu.cn/posts/38263.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 闲花手札 | Lu's Blog
  • wechat
  • alipay

评论