🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    返回列表 发布新帖
    查看: 228|回复: 0

    [代码技巧] 子比主题 – PC右下角显示网易云热评（三款）

    [复制链接]
    飞流 00001
    起源之星
    任务·年会员
    累计签到LV.3
    摩羯座
    +1
    社区贡献
    346 216 24292
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 175 颗
       贡献 : 14431 点
       金币 : 4 枚
    Icon在线时间 : 1952 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-8-16
    送礼物：3 个 收礼物：1 个
    FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-8 22:46:25 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    给子比主题PC端右下角加一个显示网易云热评的美化样式，这个功能还是不错的，给自己的网站加上动态的网易云热评，一共是三款，喜欢的自行部署吧！

    第一款



    tengfei_down (50).webp

    第二款


    tengfei_down (51).webp

    第三款


    tengfei_down (52).webp

    代码部署


    喜欢哪一款放到：WP后台–>>外观–小工具–>>自定义HTML，建议放到：所有页面-底部全宽度
    第一款代码
    1. <div id="wniui-popup-window" class="wniui-show-popup-window">
    2.   <div class="wniui-popup-header">
    3.       <div class="wniui-popup-window-title">网易云热评</div>
    4.       <span id="wniui-popup-username"></span>
    5.       <a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; right: 10px;">
    6.           <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"
    7.               xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
    8.               <path
    9.                   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"
    10.                   fill="#231815" p-id="22034"></path>
    11.           </svg>
    12.       </a>
    13.   </div>
    14.   <div class="wniui-popup-window-divider"></div>
    15.   <div class="wniui-popup-window-content">
    16.   </div>
    17. </div>

    19. <style>
    20.   #music-link:hover svg path {
    21.   fill: #425AEF;
    22.   transition: .3s;
    23. }

    25.   #wniui-popup-window {
    26.       min-width: 300px;
    27.       max-width: 500px;
    28.       bottom: 20px;
    29.       right: 20px;
    30.       position: fixed;
    31.       z-index: 1002;
    32.       color: #363636;
    33.       padding: 8px 16px;
    34.       border-radius: 12px;
    35.       transition: opacity 0.3s ease, transform 0.3s ease;
    36.       background-color: rgba(255, 255, 255, 0.85);
    37.       border: 1px solid #e3e8f7;
    38.       max-height: 300px;
    39.       opacity: 0;
    40.       transform: translateY(20px);
    41.       display: flex;
    42.       flex-direction: column;
    43.       justify-content: flex-start;
    44.   }

    46.   #wniui-popup-window.wniui-show {
    47.       opacity: 1;
    48.       transform: translateY(0);
    49.   }

    51.   #wniui-popup-header {
    52.       display: flex;
    53.       align-items: center;
    54.       gap: 8px;
    55.       position: relative;
    56.   }

    58.   #wniui-popup-window .wniui-popup-window-title {
    59.       font-size: 12px;
    60.       font-weight: 700;
    61.       color: #fff;
    62.       line-height: 1;
    63.       background: #363636;
    64.       padding: 4px;
    65.       border-radius: 4px;
    66.       display: inline-block;
    67.   }

    69.   #wniui-popup-username {
    70.       font-size: 12px;
    71.       color: #666;
    72.       line-height: 1;
    73.       margin: 0;
    74.       white-space: nowrap;
    75.   }

    77.   #wniui-popup-window .wniui-popup-window-divider {
    78.       width: 100%;
    79.       margin-top: 6px;
    80.       border: 1px solid #e3e8f7;
    81.   }

    83.   #wniui-popup-window .wniui-popup-window-content {
    84.       font-size: 15px;
    85.       display: flex;
    86.       justify-content: space-around;
    87.       word-wrap: break-word;
    88.       max-width: 450px;
    89.       margin-top: 5px;
    90.       overflow: auto;
    91.   }

    93.   #wniui-popup-window .wniui-popup-image {
    94.       width: 50px;
    95.       height: 50px;
    96.       border-radius: 50%;
    97.       margin-right: 10px !important;
    98.   }

    100.   #wniui-popup-window .wniui-popup-window-content p {
    101.       margin: 0;
    102.       display: -webkit-box;
    103.       -webkit-box-orient: vertical;
    104.       overflow: hidden;
    105.       -webkit-line-clamp: 2;
    106.       text-overflow: ellipsis;
    107.   }

    109.   #wniui-popup-window:hover {
    110.       border: 1px solid #425AEF;
    111.   }

    113.   #wniui-popup-window .wniui-popup-window-title:hover {
    114.       background-color: #425AEF;
    115.   }
    116. </style>

    118. <script>
    119. async function fetchPopupContent() {
    120.   if (window.innerWidth <= 768) {
    121.       document.getElementById("wniui-popup-window").style.display = "none";
    122.       return;
    123.   } else {
    124.       document.getElementById("wniui-popup-window").style.display = "flex";
    125.   }

    127.   try {
    128.       const response = await fetch("https://www.wniui.com/api/music/index.php");
    129.       const data = await response.json();
    130.       const { musicLink, comments } = data;
    131.       const { nickname, avatarUrl, content } = getRandomComment(comments);

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

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

    137.       setTimeout(() => {
    138.           document.getElementById("wniui-popup-username").textContent = `- ${nickname}`;
    139.           document.querySelector(".wniui-popup-window-content").innerHTML = `
    140.               <div style="display: flex; align-items: center;">
    141.                   
    142.                   <div><p>${content}</p></div>
    143.               </div>
    144.           `;

    146.           const musicLinkElement = document.getElementById("music-link");
    147.           musicLinkElement.href = musicLink;
    148.           popup.classList.add("wniui-show");
    149.       }, 300);

    151.   } catch (error) {
    152.       console.error("获取数据失败:", error);
    153.   }
    154. }

    156. // 每 4 秒更新一次
    157. fetchPopupContent();
    158. setInterval(fetchPopupContent, 4000);

    160. function getRandomComment(comments) {
    161.   return comments[Math.floor(Math.random() * comments.length)];
    162. }

    164. </script>
    复制代码


    第二款代码
    1. <div id="wniui-popup-window" class="wniui-show-popup-window">
    2.     <div class="wniui-popup-header">
    3.         <div class="wniui-popup-window-title">网易云热评</div>
    4.         <a id="music-link" href="" target="_blank" style="position: absolute; top: 4px; right: 10px;">
    5.             <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"
    6.                 xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
    7.                 <path
    8.                     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"
    9.                     fill="#231815" p-id="22034"></path>
    10.             </svg>
    11.         </a>
    12.     </div>
    13.     <div class="wniui-popup-window-divider"></div>
    14.     <div class="wniui-popup-window-content">
    15.     </div>
    16.   </div>
    17.   
    18.   <style>
    19.     #music-link:hover svg path {
    20.     fill: #425AEF;
    21.     transition: .3s;
    22.   }
    23.   
    24.     #wniui-popup-window {
    25.         min-width: 300px;
    26.         max-width: 500px;
    27.         bottom: 20px;
    28.         right: 20px;
    29.         position: fixed;
    30.         z-index: 1002;
    31.         color: #363636;
    32.         padding: 8px 16px;
    33.         border-radius: 12px;
    34.         transition: opacity 0.3s ease, transform 0.3s ease;
    35.         background-color: rgba(255, 255, 255, 0.85);
    36.         border: 1px solid #e3e8f7;
    37.         max-height: 300px;
    38.         opacity: 0;
    39.         transform: translateY(20px);
    40.         display: flex;
    41.         flex-direction: column;
    42.         justify-content: flex-start;
    43.     }
    44.   
    45.     #wniui-popup-window.wniui-show {
    46.         opacity: 1;
    47.         transform: translateY(0);
    48.     }
    49.   
    50.     #wniui-popup-header {
    51.         display: flex;
    52.         align-items: center;
    53.         gap: 8px;
    54.         position: relative;
    55.     }
    56.   
    57.     #wniui-popup-window .wniui-popup-window-title {
    58.         font-size: 12px;
    59.         font-weight: 700;
    60.         color: #fff;
    61.         line-height: 1;
    62.         background: #363636;
    63.         padding: 4px;
    64.         border-radius: 4px;
    65.         display: inline-block;
    66.     }
    67.   
    68.     #wniui-popup-username {
    69.         font-size: 12px;
    70.         color: #666;
    71.         line-height: 1;
    72.         margin: 0;
    73.         white-space: nowrap;
    74.     }
    75.   
    76.     #wniui-popup-window .wniui-popup-window-divider {
    77.         width: 100%;
    78.         margin-top: 6px;
    79.         border: 1px solid #e3e8f7;
    80.     }
    81.   
    82.     #wniui-popup-window .wniui-popup-window-content {
    83.         font-size: 15px;
    84.         display: flex;
    85.         justify-content: space-around;
    86.         word-wrap: break-word;
    87.         max-width: 450px;
    88.         margin-top: 5px;
    89.         overflow: auto;
    90.     }
    91.   
    92.     #wniui-popup-window .wniui-popup-image {
    93.         width: 50px;
    94.         height: 50px;
    95.         border-radius: 50%;
    96.         margin-right: 10px !important;
    97.     }
    98.   
    99.     #wniui-popup-window .wniui-popup-window-content p {
    100.         margin: 0;
    101.         display: -webkit-box;
    102.         -webkit-box-orient: vertical;
    103.         overflow: hidden;
    104.         -webkit-line-clamp: 2;
    105.         text-overflow: ellipsis;
    106.     }
    107.   
    108.     #wniui-popup-window:hover {
    109.         border: 1px solid #425AEF;
    110.     }
    111.   
    112.     #wniui-popup-window .wniui-popup-window-title:hover {
    113.         background-color: #425AEF;
    114.     }
    115.   </style>
    116.   
    117.   <script>
    118.   async function fetchPopupContent() {
    119.     if (window.innerWidth <= 768) {
    120.         document.getElementById("wniui-popup-window").style.display = "none";
    121.         return;
    122.     } else {
    123.         document.getElementById("wniui-popup-window").style.display = "flex";
    124.     }
    125.   
    126.     try {
    127.         const response = await fetch("https://www.wniui.com/api/music/index.php");
    128.         const data = await response.json();
    129.         const { musicLink, comments, songName } = data;
    130.         const { content } = getRandomComment(comments);
    131.   
    132.         const popup = document.getElementById("wniui-popup-window");
    133.   
    134.         popup.classList.remove("wniui-show");
    135.   
    136.         setTimeout(() => {
    137.             document.querySelector(".wniui-popup-window-content").innerHTML = `
    138.                 <div>
    139.                     <p>${content} —— 网易云热评《${songName}》</p>
    140.                 </div>
    141.             `;
    142.   
    143.             const musicLinkElement = document.getElementById("music-link");
    144.             musicLinkElement.href = musicLink;
    145.             popup.classList.add("wniui-show");
    146.         }, 300);
    147.   
    148.     } catch (error) {
    149.         console.error("获取数据失败:", error);
    150.     }
    151.   }
    152.   
    153.   // 每 4 秒更新一次
    154.   fetchPopupContent();
    155.   setInterval(fetchPopupContent, 4000);
    156.   
    157.   function getRandomComment(comments) {
    158.     return comments[Math.floor(Math.random() * comments.length)];
    159.   }
    160.   
    161.   </script>
    复制代码

    第三款代码
    1. <div id="wniui-popup-window" class="wniui-show-popup-window">
    2.   <div class="wniui-popup-header">
    3.       <div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
    4.           <div id="wniui-user-info" style="display: flex; align-items: center; gap: 8px;">
    5.               <span id="wniui-popup-username"></span>
    6.           </div>
    7.           <a id="wniui-popup-link" href="#" target="_blank" class="wniui-popup-window-title">网易云热评</a>
    8.       </div>
    9.   </div>
    10.   <div class="wniui-popup-window-divider"></div>
    11.   <div class="wniui-popup-window-content">
    12.       <div class="wniui-popup-tip">加载中...</div>
    13.   </div>
    14. </div>

    16. <style>
    17. #wniui-popup-window {
    18.       min-width: 300px;
    19.       max-width: 500px;
    20.       bottom: 20px;
    21.       right: 20px;
    22.       position: fixed;
    23.       z-index: 1002;
    24.       color: #363636;
    25.       padding: 8px 16px;
    26.       border-radius: 12px;
    27.       transition: opacity 0.3s ease, transform 0.3s ease;
    28.       background-color: rgba(255, 255, 255, 0.85);
    29.       border: 1px solid #e3e8f7;
    30.       max-height: 300px;
    31.       opacity: 0;
    32.       transform: translateY(20px);
    33.       display: flex;
    34.       flex-direction: column;
    35.       justify-content: flex-start;
    36.   }

    38.   #wniui-popup-window.wniui-show {
    39.       opacity: 1;
    40.       transform: translateY(0);
    41.   }

    43.   #wniui-popup-header {
    44.       display: flex;
    45.       justify-content: space-between;
    46.       align-items: center;
    47.   }

    49.   .wniui-popup-window-title {
    50.       font-size: 14px;
    51.       font-weight: 700;
    52.       color: #fff;
    53.       line-height: 1;
    54.       background: #363636;
    55.       padding: 4px;
    56.       border-radius: 4px;
    57.       display: inline-block;
    58.       transition: .3s;
    59.   }
    60. .wniui-popup-window-title:hover{
    61.   background-color: #425AEF;
    62.   transition: .3s;
    63. }
    64.   #wniui-user-info {
    65.       background-color: rgba(255, 255, 255, 0.5);
    66.       padding: 4px 8px;
    67.       border-radius: 8px;
    68.       font-size: 12px;
    69.       display: flex;
    70.       align-items: center;
    71.   }

    73.   #wniui-popup-avatar {
    74.       width: 30px;
    75.       height: 30px;
    76.       border-radius: 50%;
    77.       object-fit: cover;
    78.   }

    80.   #wniui-popup-username {
    81.       color: #666;
    82.       font-weight: 500;
    83.   }

    85.   #wniui-popup-window .wniui-popup-window-divider {
    86.       width: 100%;
    87.       margin-top: 6px;
    88.       border: 1px solid #e3e8f7;
    89.   }

    91.   #wniui-popup-window .wniui-popup-window-content {
    92.       font-size: 15px;
    93.       display: flex;
    94.       justify-content: space-around;
    95.       align-items: center;
    96.       word-wrap: break-word;
    97.       max-width: 450px;
    98.       margin-top: 5px;
    99.       overflow: auto;
    100.   }

    102.   #wniui-popup-window:hover {
    103.       border: 1px solid #425AEF;
    104.       transition: 0.4s;
    105.   }

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

    112. <script>
    113.   let popupTimer;

    115.   function checkWindowWidth() {
    116.       const popup = document.getElementById("wniui-popup-window");
    117.       if (window.innerWidth < 768) {
    118.           popup.classList.remove("wniui-show");
    119.           clearTimeout(popupTimer);
    120.       } else {
    121.           fetchPopupContent();
    122.       }
    123.   }

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

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

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

    140.               const musicLink = data.musicLink;

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

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

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

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

    159.                   popupTimer = setTimeout(() => {
    160.                       popup.classList.remove("wniui-show");
    161.                       fetchPopupContent();
    162.                   }, 5000);
    163.               }, 300);
    164.           })
    165.           .catch(() => {
    166.               fetchPopupContent();
    167.           });
    168.   }

    170.   checkWindowWidth();
    171.   window.addEventListener("resize", checkWindowWidth);
    172. </script>
    复制代码


    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    		07-23 18:52
    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-8-17 08:51 , Processed in 0.069288 second(s), 68 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表