修复毛玻璃主页
前言
毛玻璃主页(开源版:作者小枫)源码里面的和风天气插件失效(和风天气官方停止插件服务),以及播放音乐的api也失效。 本期介绍下替换音乐api、把原来显示天气的部分改为显示每日一言。
首先下载项目[小枫]/毛玻璃UI - 个人主页(开源版)
增加每日一言
修改index.html
打开index.html
,搜索xf_weather
,把75到77行:
1 | <div class="xf_weather xf_glass"> |
替换成下面:
1 | <div class="xf_weather xf_glass" style="display: flex; align-items: flex-start; justify-content: left; height: 30%; padding-top: 5%; position: relative;"> |
修改后就把带荧光特效的每日一言添加好了。但是如果后期上面的api不能用了,看下面替换的教程。
替换 每日一言API :
先看下以上使用https://v1.hitokoto.cn/这个每日一言它返回的数据格式
1 | { |
API URL 替换:
- 查找代码中的
fetch('https://v1.hitokoto.cn/')
这一行。 - 将
'https://v1.hitokoto.cn/'
替换为新的 API URL。
例如,如果新的 API URL 是
https://newapi.com/randomquote
,则替换为:1
fetch('https://newapi.com/randomquote')
- 查找代码中的
JSON 数据结构调整:
如果新 API 返回的 JSON 数据结构不同,需要更新
.then(data => {...})
这一部分。查找以下两行:
1
2javascript复制代码const hitokoto = data.hitokoto; // 日言字段
const from = data.from_who ? data.from_who : data.from; // 出处字段如果新 API 使用了不同的字段名,比如
1
data.quote
或
1
data.author
可以将它们替换为:
1
2javascript复制代码const hitokoto = data.quote; // 新 API 中的每日一言字段
const from = data.author; // 新 API 中的出处字段
错误处理:
catch
块中的document.getElementById('hitokoto-content').innerText = '加载失败,请稍后再试。';
可以根据需要定制化,在调用失败时向用户提供信息。
样例替换:
假设新 API 返回的数据结构如下:
1 | { |
可以将代码调整为:
1 | fetch('https://newapi.com/randomquote') |
这样就可以替换新的 API 了。
恢复音乐api
先看下要替换的api接口格式
接口返回的json格式数据如下:
1 | { |
字段解释:
api返回的一级字段:
- data:不同API可能会使用不同的字段名,如
info
、result
等
api返回的二级字段:
- name:表示歌曲的名称,对应旧API中的
name
。 - url:表示歌曲的播放链接,对应旧API中的
mp3url
。 - picurl:表示歌曲的封面图片链接,对应旧API中的
picUrl
。 - artistsname:表示歌曲的名称,对应旧API中的
auther
。
替换音乐 API
在Glass-UI-master\static\js
目录下找到index.js,修改index.js
- 替换 API 地址:
- 查找
url
变量并替换为新 API 地址。在index.js
的106行。把下面的
- 查找
1 | var url="https://api.vvhan.com/api/rand.music?type=json&sort=抖音榜"; |
替换成:
1 | var url = "https://api.uomg.com/api/rand.music?sort=%E7%83%AD%E6%AD%8C%E6%A6%9C&format=json"; // 更新API URL |
- 确认 API 响应字段:
确认新 API 的响应字段,确保与旧的 API 结构一致。如果不一致,需要更新字段名。例如:对于歌曲url播放地址、图片、歌手名称和歌曲名称字段进行相应的更新替换。
替换位置包括:
将
res.info.mp3url
替换为res.data.url
。将
res.info.picUrl
替换为res.data.picurl
。将
res.info.auther
替换为res.data.artistsname
。将
res.info.name
替换为res.data.name
。
注意:在不同的API中,响应的数据结构可能会有所不同。例如,有些API的返回结构可能使用res.data
来包含主要数据,而其他API可能使用res.info
。例如以上示例的接口返回的json格式数据就是data字段。
结语
1.打开页面会自动播放歌曲。
2.一首歌曲播放完毕后遇到无法播放的会暂停播放,需要手动切换。
基于这两点,个人修改成
1.打开页面不自动播放歌曲,处于暂停状态。
2.一首歌曲播放完毕后遇到无法播放的会自动切换歌曲,直到切换到可以正常播放的歌曲。
需要修改的可以后台回复maoboli
获取修改好的index.js
把下载的index.js上传到Glass-UI-master\static\js