子比主题美化-IP地址卡片

设置：

在网站后台 -> 外观 -> 小工具 -> 自定义HTML， 在合适位置添加小工具，并在代码编辑框中添加以下代码：

<style>
.wniui_addr {
    position: relative;
    width: 100%;
    height: 150px;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    border-radius: 15px;
}
#wniui-address {
    position: absolute;
    width: 100%;
    top: 60px;
    text-align: center;
    font-size: 18px;
}
.wniui_addr > .icon {
    position: absolute;
    font-size: 25px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.wniui_span {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 100px;
}
</style>

<div class="wniui_addr" id="jsi-flying-fish-container">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-IPdizhi" rel="external nofollow" ></use>
    </svg>
    <h4 id="wniui-address">获取您的IP地址中...</h4>
    <span class="wniui_span">"想做一件任何人都可以做的事情"</span>
</div>

<script>
fetch('https://ip.011102.xyz/')
    .then(response => response.json())
    .then(data => {
        if (data && data.IP && data.IP.IP) {
            document.getElementById('wniui-address').innerText = data.IP.IP;
        } else {
            document.getElementById('wniui-address').innerText = '无法获取IP地址';
        }
    })
    .catch(error => {
        document.getElementById('wniui-address').innerText = '无法获取IP地址';
        console.error('Error fetching IP address:', error);
    });

</script>

效果图：

本文转载至：网站美化-侧边栏IP地址小卡片