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

设置

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

代码

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

<div id="wniui-popup-window" class="wniui-show-popup-window">
  <div class="wniui-popup-header">
      <div class="wniui-popup-window-title">网易云热评</div>
      <span id="wniui-popup-username"></span>
      <a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; 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 } = data;
      const { nickname, avatarUrl, content } = getRandomComment(comments);

      const popup = document.getElementById("wniui-popup-window");

      popup.classList.remove("wniui-show");

      setTimeout(() => {
          document.getElementById("wniui-popup-username").textContent = `- ${nickname}`;
          document.querySelector(".wniui-popup-window-content").innerHTML = `
              <div style="display: flex; align-items: center;">
                  <img src="${avatarUrl}" alt="头像" class="wniui-popup-image" />
                  <div><p>${content}</p></div>
              </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>

效果图