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

设置

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

代码

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

<div id="wniui-popup-window" class="wniui-show-popup-window">
  <div class="wniui-popup-header">
      <div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
          <div id="wniui-user-info" style="display: flex; align-items: center; gap: 8px;"><img
                  class="no-imgbox wniui-popup-image" id="wniui-popup-avatar"
                  src="https://www.wniui.com/wp-content/themes/zibll/img/thumbnail.svg" alt="头像">
              <span id="wniui-popup-username"></span>
          </div>
          <a id="wniui-popup-link" href="#" target="_blank" class="wniui-popup-window-title">网易云热评</a>
      </div>
  </div>
  <div class="wniui-popup-window-divider"></div>
  <div class="wniui-popup-window-content">
      <div class="wniui-popup-tip">加载中...</div>
  </div>
</div>

<style>
#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;
      justify-content: space-between;
      align-items: center;
  }

  .wniui-popup-window-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      background: #363636;
      padding: 4px;
      border-radius: 4px;
      display: inline-block;
      transition: .3s;
  }
.wniui-popup-window-title:hover{
  background-color: #425AEF;
  transition: .3s;
}
  #wniui-user-info {
      background-color: rgba(255, 255, 255, 0.5);
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
  }

  #wniui-popup-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
  }

  #wniui-popup-username {
      color: #666;
      font-weight: 500;
  }

  #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;
      align-items: center;
      word-wrap: break-word;
      max-width: 450px;
      margin-top: 5px;
      overflow: auto;
  }

  #wniui-popup-window:hover {
      border: 1px solid #425AEF;
      transition: 0.4s;
  }

  .wniui-popup-window-content p {
      margin: 0;
  }
</style>

<script>
  let popupTimer;

  function checkWindowWidth() {
      const popup = document.getElementById("wniui-popup-window");
      if (window.innerWidth < 768) {
          popup.classList.remove("wniui-show");
          clearTimeout(popupTimer);
      } else {
          fetchPopupContent();
      }
  }

  function fetchPopupContent() {
      fetch("https://www.wniui.com/api/music/index.php")
          .then(response => response.json())
          .then(data => {
              // 随机选择一个评论
              const randomIndex = Math.floor(Math.random() * data.comments.length);
              const userData = data.comments[randomIndex];
              const content = userData.content || "没有更多的内容";

              const avatarElement = document.getElementById("wniui-popup-avatar");
              avatarElement.src = userData.avatarUrl;

              const usernameElement = document.getElementById("wniui-popup-username");
              usernameElement.textContent = `${userData.nickname}`;

              const musicLink = data.musicLink;

              const titleLinkElement = document.getElementById("wniui-popup-link");
              titleLinkElement.href = musicLink;

              const message = `
                  <div>
                      <p>${content}</p>
                  </div>
              `;
              const popup = document.getElementById("wniui-popup-window");

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

              setTimeout(() => {
                  document.querySelector(".wniui-popup-window-content").innerHTML = message;
                  popup.classList.add("wniui-show");

                  popupTimer = setTimeout(() => {
                      popup.classList.remove("wniui-show");
                      fetchPopupContent();
                  }, 5000);
              }, 300);
          })
          .catch(() => {
              fetchPopupContent();
          });
  }

  checkWindowWidth();
  window.addEventListener("resize", checkWindowWidth);
</script>

效果图