Uptime Status丨一个基于UptimeRobot接口制作的在线监控页面

Rintarou°

April 23, 2020

3443 views

No comments

1760 words

建站相关

最近在loc上看到了有dalao制作的一个基于UptimeRobot接口的在线监控页面，看起来还不错，赶紧用上。

简介

基于UptimeRobot API的正常运行状态仪表板。

使用教程

注册

因为这是一个基于 UptimeRobot接口制作的在线监控页面，所以呢我们首先需要有一个基于 UptimeRobot账号的api才能正常使用。鉴于在以前曾经写过关于 UptimeRobot的注册使用，所以这里就不再重复了，有需要的小伙伴可以看下。

Uptime Robot丨一款免费的服务器站点在线率监控服务

相信很多人都很关心自己的网站/服务器的状态，想要第一时间知道自己网站或者服务器的运行状态，今天要介绍的是一款免费服...

下载源文件

这里作者把文件编译好了，所以我们只需要到 releases 那下载最新的版本即可，下载完成后解压缩，编辑填写里面的 config.js文件即可。

// 配置
window.Config = {

  // 站点名
  SiteName: 'Uptime Status',

  // 站点链接
  SiteUrl: '/',

  // UptimeRobot Api Keys
  // 支持 Monitor-Specific 和 Read-Only 两只 Api Key
  ApiKeys: [
    'm784488775-dd1ad84b209c05f8e185c33e',
    'm784490063-7b5da437e7f1e0d67613714d',
    'm784497419-de55aa09902ccb3ab22d548a',
    'm784496436-71a4bf7b1e3bdf7756be131b',
  ],

  // 是否显示监测站点的链接
  ShowLink: true,

  // 日志天数
  // 虽然免费版说仅保存60天日志，但测试好像API可以获取90天的
  // 不过时间不要设置太长，容易卡，接口请求也容易失败
  CountDays: 60,

  // 导航栏菜单
  Navi: [
    {
      text: 'Homepage',
      url: 'https://status.org.cn/'
    },
    {
      text: 'GitHub',
      url: 'https://github.com/yb/uptime-status'
    }
  ]
};

配置api

这里着重讲一下如何获得 UptimeRobot的api吧，首先登录帐号，然后在点击顶栏的 My Settings，接着找到 API Settings API Settings.png
选择 Monitor-Specific API Keys或者 Read-Only API Key中的其中一个，然后会得到一串数字（api），把这串数字复制到之前 config.js里的 UptimeRobot Api Keys即可。