修复毛玻璃主页

前言

毛玻璃主页（开源版：作者小枫）源码里面的和风天气插件失效（和风天气官方停止插件服务），以及播放音乐的api也失效。 本期介绍下替换音乐api、把原来显示天气的部分改为显示每日一言。

效果如下：https://yilancn.top/nav/

首先下载项目[小枫]/毛玻璃UI - 个人主页（开源版）

增加每日一言

修改index.html

打开index.html,搜索xf_weather，把75到77行：

<div class="xf_weather xf_glass">
    <div id="he-plugin-standard"></div>
</div>

替换成下面：

<div class="xf_weather xf_glass" style="display: flex; align-items: flex-start; justify-content: left; height: 30%; padding-top: 5%; position: relative;">
    <div style="text-align: left; width: 100%;">
        <!-- 显示每日一言的内容 -->
        <p id="hitokoto-content" class="glow-effect" style="font-size:20px; font-family:'宋体'; color:#0000FF; padding-left: 10px; padding-right: 10px;">加载中...</p>
    </div>
    <!-- 显示每日一言的出处 -->
    <p id="hitokoto-from" class="glow-effect" style="font-size:15px; font-family:'宋体'; color:#0000FF; position: absolute; bottom: 10px; right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">——</p>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 调用每日一言的 API (你可以在这里替换为新的 API)
            fetch('https://v1.hitokoto.cn/') // 这个是 API URL，失效时可替换为新的 API URL
                .then(response => response.json()) // 将响应转换为 JSON 格式
                .then(data => {
                    // 获取每日一言的内容（你可以根据新 API 的数据结构调整这里的内容）
                    const hitokoto = data.hitokoto; // 新 API 的字段名可能不同，比如可能是 data.quote 或 data.sentence
                    const from = data.from_who ? data.from_who : data.from; // 获取出处，如果新 API 没有相同的字段，修改字段名
                    // 更新页面上的文字内容
                    document.getElementById('hitokoto-content').innerText = hitokoto;
                    document.getElementById('hitokoto-from').innerText = `—— ${from}`;
                })
                .catch(error => {
                    // API 调用失败时的处理
                    console.error('Error fetching hitokoto:', error);
                    document.getElementById('hitokoto-content').innerText = '加载失败，请稍后再试。'; // 可显示加载失败的消息
                });
        });
    </script>

    <style>
        /* 荧光闪烁效果 */
        .glow-effect {
            -webkit-animation: shine 2.4s infinite;
        }

        @-webkit-keyframes shine {
            0%, 100% {
                color: #fff;
                text-shadow: 0 0 10px #0000FF, 0 0 10px #0000FF;
            }
            50% {
                text-shadow: 0 0 10px #0000FF, 0 0 40px #0000FF;
            }
        }
    </style>
</div>

修改后就把带荧光特效的每日一言添加好了。但是如果后期上面的api不能用了，看下面替换的教程。

替换 每日一言API ：

先看下以上使用https://v1.hitokoto.cn/这个每日一言它返回的数据格式

{
  "id": 8357,
  "uuid": "66d1da15-aa1b-4d14-869e-e406af7c2b59",
  "hitokoto": "漩涡无法击碎的磐岩，也终究会在时光的冲刷下磨损。",
  "type": "c",
  "from": "原神",
  "from_who": "钟离",
  "creator": "Forillusion",
  "creator_uid": 11012,
  "reviewer": 1,
  "commit_from": "web",
  "created_at": "1639267989",
  "length": 24
}

1. API URL 替换：

   • 查找代码中的 fetch('https://v1.hitokoto.cn/') 这一行。
   • 将 'https://v1.hitokoto.cn/' 替换为新的 API URL。

   例如，如果新的 API URL 是 https://newapi.com/randomquote，则替换为：

   fetch('https://newapi.com/randomquote')

2. JSON 数据结构调整：

   • 如果新 API 返回的 JSON 数据结构不同，需要更新 .then(data => {...}) 这一部分。

   • 查找以下两行：

     javascript复制代码const hitokoto = data.hitokoto; // 日言字段
     const from = data.from_who ? data.from_who : data.from; // 出处字段

   • 如果新 API 使用了不同的字段名，比如

     data.quote

     或

     data.author

     可以将它们替换为：

     javascript复制代码const hitokoto = data.quote; // 新 API 中的每日一言字段
     const from = data.author; // 新 API 中的出处字段

3. 错误处理：

   • catch 块中的 document.getElementById('hitokoto-content').innerText = '加载失败，请稍后再试。'; 可以根据需要定制化，在调用失败时向用户提供信息。

样例替换：

假设新 API 返回的数据结构如下：

{
    "quote": "新的一天，新的开始。",
    "author": "某位作者"
}

可以将代码调整为：

fetch('https://newapi.com/randomquote')
    .then(response => response.json())
    .then(data => {
        const hitokoto = data.quote; // 使用新 API 中的 quote 字段
        const from = data.author; // 使用新 API 中的 author 字段
        document.getElementById('hitokoto-content').innerText = hitokoto;
        document.getElementById('hitokoto-from').innerText = `—— ${from}`;
    })
    .catch(error => {
        console.error('Error fetching hitokoto:', error);
        document.getElementById('hitokoto-content').innerText = '加载失败，请稍后再试。';
    });

这样就可以替换新的 API 了。

恢复音乐api

先看下要替换的api接口格式

网易云热榜api接口

接口返回的json格式数据如下：

{
  "code": 1,
  "data": {
    "name": "My Type",
    "url": "http://music.163.com/song/media/outer/url?id=470573539",
    "picurl": "http://p1.music.126.net/SuCNw1Twu5gs_UT66_eQdA==/109951165981300158.jpg",
    "artistsname": "The Chainsmokers"
  }
}

字段解释：

• data：通常是API返回数据的主要容器，但不同API可能会使用不同的字段名，如info、result等
• name：表示歌曲的名称，等价于旧API中的name。
• url：表示歌曲的播放链接，对应旧API中的url。
• picurl：表示歌曲的封面图片链接，对应旧API中的picurl。
• artistsname：表示歌曲的艺术家名称，对应旧API中的artistsname。

替换音乐 API ：

在Glass-UI-master\static\js目录下找到index.js，修改index.js

1. 替换 API 地址：
   • 查找 url 变量并替换为新 API 地址。在index.js的106行。把下面的

var url="https://api.vvhan.com/api/rand.music?type=json&sort=抖音榜";

替换成：

var url = "https://api.uomg.com/api/rand.music?sort=%E7%83%AD%E6%AD%8C%E6%A6%9C&format=json"; // 更新API URL

1. 确认 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. 处理错误和异常：
   • 保留对 API 请求的错误处理逻辑。如果新 API 可能返回不同的错误代码，确保修改对应的提示信息。

如果新 API 的响应字段名称不同，只需根据上述步骤进行修改即可。

结语

对于[小枫]/毛玻璃UI - 个人主页（开源版）,

1.打开页面会自动播放歌曲。

2.一首歌曲播放完毕后遇到无法播放的会暂停播放，需要手动切换。

基于这两点，个人修改成

1.打开页面不自动播放歌曲，处于暂停状态。

2.一首歌曲播放完毕后遇到无法播放的会自动切换歌曲，直到切换到可以正常播放的歌曲。

需要修改的可以后台回复maoboli获取修改好的index.js

把下载的index.js上传到Glass-UI-master\static\js