子比主题美化-网站添加网易云音乐热评

设置

在网站后台，外观 -> 小工具 -> 自定义HTML，在自己需要的页面添加一个底部全宽度小工具

代码修改

在自定义HTML小工具代码编辑框中添加以下代码：

<div id="wniui-popup-window" class="wniui-show-popup-window">
    <div class="wniui-popup-header">
        <div class="wniui-popup-window-title">网易云热评</div>
        <a id="music-link" href="" target="_blank" style="position: absolute; top: 4px; right: 10px;">
            <svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22033"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
                <path
                    d="M512.1 137.8c-206.4 0-373.7 167.3-373.7 373.7s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7zM721 508.5L589.2 647c-9.9 10.4-27.4 3.4-27.4-11v-90.9h-1.4c-130.9 0-239.1 58.4-259.2 134.7h-2.3c12.8-133.2 125-237.4 261.5-237.4 0.5 0 0.9 0.1 1.4 0.1V359c0-14.4 17.5-21.4 27.4-11L721 486.6c5.8 6.2 5.8 15.8 0 21.9z"
                    fill="#231815" p-id="22034"></path>
            </svg>
        </a>
    </div>
    <div class="wniui-popup-window-divider"></div>
    <div class="wniui-popup-window-content">
    </div>
  </div>
  
  <style>
    #music-link:hover svg path {
    fill: #425AEF;
    transition: .3s;
  }
  
    #wniui-popup-window {
        min-width: 300px;
        max-width: 500px;
        bottom: 20px;
        right: 20px;
        position: fixed;
        z-index: 1002;
        color: #363636;
        padding: 8px 16px;
        border-radius: 12px;
        transition: opacity 0.3s ease, transform 0.3s ease;
        background-color: rgba(255, 255, 255, 0.85);
        border: 1px solid #e3e8f7;
        max-height: 300px;
        opacity: 0;
        transform: translateY(20px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
  
    #wniui-popup-window.wniui-show {
        opacity: 1;
        transform: translateY(0);
    }
  
    #wniui-popup-header {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
    }
  
    #wniui-popup-window .wniui-popup-window-title {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        background: #363636;
        padding: 4px;
        border-radius: 4px;
        display: inline-block;
    }
  
    #wniui-popup-username {
        font-size: 12px;
        color: #666;
        line-height: 1;
        margin: 0;
        white-space: nowrap;
    }
  
    #wniui-popup-window .wniui-popup-window-divider {
        width: 100%;
        margin-top: 6px;
        border: 1px solid #e3e8f7;
    }
  
    #wniui-popup-window .wniui-popup-window-content {
        font-size: 15px;
        display: flex;
        justify-content: space-around;
        word-wrap: break-word;
        max-width: 450px;
        margin-top: 5px;
        overflow: auto;
    }
  
    #wniui-popup-window .wniui-popup-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px !important;
    }
  
    #wniui-popup-window .wniui-popup-window-content p {
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
    }
  
    #wniui-popup-window:hover {
        border: 1px solid #425AEF;
    }
  
    #wniui-popup-window .wniui-popup-window-title:hover {
        background-color: #425AEF;
    }
  </style>
  
  <script>
  async function fetchPopupContent() {
    if (window.innerWidth <= 768) {
        document.getElementById("wniui-popup-window").style.display = "none";
        return;
    } else {
        document.getElementById("wniui-popup-window").style.display = "flex";
    }
  
    try {
        const response = await fetch("https://www.wniui.com/api/music/index.php");
        const data = await response.json();
        const { musicLink, comments, songName } = data;
        const { content } = getRandomComment(comments);
  
        const popup = document.getElementById("wniui-popup-window");
  
        popup.classList.remove("wniui-show");
  
        setTimeout(() => {
            document.querySelector(".wniui-popup-window-content").innerHTML = `
                <div>
                    <p>${content} —— 网易云热评《${songName}》</p>
                </div>
            `;
  
            const musicLinkElement = document.getElementById("music-link");
            musicLinkElement.href = musicLink;
            popup.classList.add("wniui-show");
        }, 300);
  
    } catch (error) {
        console.error("获取数据失败:", error);
    }
  }
  
  // 每 4 秒更新一次
  fetchPopupContent();
  setInterval(fetchPopupContent, 4000);
  
  function getRandomComment(comments) {
    return comments[Math.floor(Math.random() * comments.length)];
  }
  
  </script>

添加完成后记得保存

效果图