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

I、简介


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

Github地址:https://github.com/yb/uptime-status

II、使用教程

1.注册

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

2.下载源文件

这里作者把文件编译好了,所以我们只需要到 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'
    }
  ]
};

3.配置api

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

  • Monitor-Specific API Keys用于展示账户下的特定监控,需要输入特定监控项目名使用。
  • Read-Only API Key用于展示账户下的所有监控项目,个人推荐使用。

III、最后

由于是一个静态页面,不需要编译,食用简单。因此你可以把它放到github,又拍云等各种地方,只要有可以存放静态网页的空间就行了。

如果觉得我的文章对你有用,请随意赞赏