子比美化：网站右下角添加网易云热评

美化介绍

在网站中台添加一个网易云的热门评论，类似于弹窗评论效果，如果做音乐类相关网站的话，这个功能应该说是非常需要的，有需要的都以使用。

使用教程

如果只希望在首页显示，可以通过后台小工具 → 自定义 HTML，将代码放在首页的任何位置。

如果希望全站显示，则可以将代码放在主题设置中的自定义 HTML 。

演示效果

源码内容

效果一：

<div id="wniui-popup-window" class="wniui-show-popup-window">
    <div class="wniui-popup-window-title">网易云热评</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-window .wniui-popup-window-title {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin-right: 8px;
        line-height: 1;
        width: fit-content;
        background: #363636;
        padding: 4px;
        border-radius: 4px;
    }

    #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;
        font-weight: 600;
        display: flex;
        justify-content: space-around;
        align-items: center;
        word-wrap: break-word;
        max-width: 450px;
        margin-top: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wniui-popup-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .wniui-popup-window-content p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 350px;
        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/proxy.php")
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    const userData = data.data;
                    const content = userData.content || "没有更多的内容";
                    const message = `
                        <div style="display: flex; align-items: center;">
                            <img src="${userData.avatarurl}" alt="头像" class="wniui-popup-image" />
                            <div>
                                <strong>${userData.nickname}</strong> 提到:
                                <p>${content}</p>
                            </div>
                        </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);
                } else {
                    fetchPopupContent();
                }
            })
            .catch(error => {
                console.error("请求失败:", error);
                fetchPopupContent();
            });
    }

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

效果二：

<div id="wniui-popup-window" class="wniui-show-popup-window">
    <div class="wniui-popup-window-title">网易云热评</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-window .wniui-popup-window-title {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin-right: 8px;
        line-height: 1;
        width: fit-content;
        background: #363636;
        padding: 4px;
        border-radius: 4px;
    }

    #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;
        font-weight: 600;
        display: flex;
        justify-content: space-around;
        align-items: center;
        word-wrap: break-word;
        max-width: 450px;
        margin-top: 5px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .wniui-popup-window-content p {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
</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://zj.v.api.aa1.cn/api/wenan-wy/?type=json")
            .then(response => response.json())
            .then(data => {
                const content = data.msg || "没有更多的内容";
                const message = `
                    <p>${content}</p>
                `;
                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(error => {
                console.error("请求失败:", error);
                const popup = document.getElementById("wniui-popup-window");
                const errorMessage = `<p>加载失败，请稍后再试。</p>`;
                document.querySelector(".wniui-popup-window-content").innerHTML = errorMessage;
                popup.classList.add("wniui-show");
            });
    }

    checkWindowWidth();

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