侧边栏壁纸

uptimeStatusRevise 一个二次开发的监控美化面板

  • 小路 2025年04月19日 484阅读 3评论
  • 转载:https://blog.moeworld.tech/2020/08/27/uptimestatusrevise-%e4%b8%80%e4%b8%aa%e4%ba%8c%e6%ac%a1%e5%bc%80%e5%8f%91%e7%9a%84%e7%9b%91%e6%8e%a7%e7%be%8e%e5%8c%96%e9%9d%a2%e6%9d%bf/

    有需要自行复制食用

    由于他更新日期太久远2020的帖子,我在他基础拓展学习的

    一、效果

    学习魔改的监控美化面板

    我更新的Demo:https://status.xaiolu.top/

    本项目演示目前托管于GitHub Pages中

    魔改了什么呢

    • 更换背景[原来的背景图si什么鬼丫∑(っ°Д°;)っ等压带气象分布图吗233]
    • 添加半透明效果

    请注意,原来的代码被原作者压缩过,经过本人测试,也请不要对代码进行格式化,否则可能会产生bug

    二、食用方法

    部署教程

    1. 克隆仓库
    2. 上传至您的服务器中(或者你也可以直接在第一步中克隆至服务器)
    3. 修改config.js配置文件
    4. 修改apikey为您的api接口
    5. 绑定网站域名,恭喜部署完成!


    什么是apikey?

    您可以前往uptimerobot的个人设置中获取您的api秘钥

    这个秘钥可以用来访问您的监控数据

    为了安全起见,申请个人应用只读模式全部列表即可

    这要是还不会看下面,教你获取ApiKeys

    ------------

    三、获取ApiKeys

    **1.点击uptimerobot官网:**https://uptimerobot.com/

    2.注册账号、或者登录上去

    3.添加网站监测

    4.填写你要监测的网站(最多填写50个免费监测域名)

    5.点击api

    6.复制api key备用

    7.添加之前填写的网站

    添加网站,api才能用.png

    四、下载链接

    下载我的源代码,去学习吧

    2025学习Github地址:https://github.com/xaiolu/uptimeStatusRevise

    外部链接

    二修Github地址代码:https://github.com/KJZH001/uptimeStatusRevise

    原项目的仓库地址:https://github.com/yb/uptime-status

    其他

    本二次开发主题为自用性质,关于定制和修改方面的问题请找自己动手或者联系原作者,因为我自己要的功能都已经加上去了

    当然,如果你在使用方面有什么疑问也当然可以问我,不过我不能保证我一定能解答

    此外如果有希望我进行修改的地方也可以在下方留言,当你的需求和我相同时我会进行修改,但不保证一定进行

    有朋友说背景出来太慢了,因为是背景图片存在github上

    怎么办呢!

    很简单,把github链接换-自己服务器链接

    具体操作-修改变背景图片url(https://xaiolu.github.io/moaradc/img/fjtu.webp)

    具体操作-修改变背景图片url(自己服务器/img/fjtu.webp)

    我偷懒了直接删除链接,然后把github图片下载到服务器了

    这样子就删除链接就行

    url(/img/fjtu.webp)

    当然有问题,请留言一起学习

    6
    打赏

    —— 评论区 ——

    博主关闭了所有页面的评论
    博主栏壁纸
    37 文章数
    79 标签数
    54 评论量
    公告

    欢迎光临我的博客 🎉

    这里会分享我的日常和学习中的收集、整理及总结,希望能对你有所帮助:) 💖

    每天来逛逛我的博客,会让你
    生活也美好了!
    心情也舒畅了!
    走路也有劲了!
    腿也不痛了!
    腰也不酸了!
    工作也轻松了!
    你好我也好,不要忘记哦!
    舔狗日记