WordPress侧边栏添加欢迎语

前言

今天逛博客看到一个好玩的东西，分享给大家

参考

【hexo】博客主页设置访客欢迎栏

时光

教程

1.首先去青桔API申请key,目前我们使用到的API是完全免费且无次数限制的。

2.访问api接口：https://api.76.al/api/ip/query?key=your_key

3.将如下代码添加到WordPress小工具中的自定义html内

<div id="announcement-widget">
    <div class="card-widget card-ip-info">
        <div class="announcement_content">
            <div id="welcome-info" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
        </div>
    </div>
</div>

<style>
    #welcome-info {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 3px solid #3498db;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<script>
    const createAnnouncementComponent = () => {
        const ipInfoElement = document.createElement('div');
        ipInfoElement.className = "card-widget card-ip-info";
        ipInfoElement.innerHTML = `
            <div class="announcement_content">
                <div id="welcome-info">
                    <div class="loading-spinner"></div>
                </div>
            </div>
        `;
        return ipInfoElement;
    };

    const fetchIpInfo = () => {
        fetch('https://api.76.al/api/ip/query?key=your_key')
            .then(response => response.ok ? response.json() : Promise.reject('Network response was not ok'))
            .then(data => showWelcome(data))
            .catch(() => showErrorMessage());
    };

    const getDistance = (e1, n1, e2, n2) => {
        const R = 6371; // Earth radius
        const toRadians = (degree) => degree * (Math.PI / 180);
        const a = Math.sin(toRadians(n1)) * Math.sin(toRadians(n2)) +
                  Math.cos(toRadians(n1)) * Math.cos(toRadians(n2)) *
                  Math.cos(toRadians(e1 - e2));
        return Math.round(R * Math.acos(a));
    };

    const showWelcome = (ipLocationData) => {
        if (!ipLocationData || !ipLocationData.data) {
            return showErrorMessage();
        }

        // 修改为你自己的经纬度 
            const myLng = 121.38206; //经度
            const myLat = 31.11325; //维度
        const { lng, lat, country, prov, city, district } = ipLocationData.data; // 获取区的信息
        const dist = getDistance(myLng, myLat, lng, lat);
        const pos = country === "中国" ? `${prov} ${city} ${district}` : `${city}, ${district}`; // 包含区的信息

        const welcomeInfoElement = document.getElementById("welcome-info");
        welcomeInfoElement.style.display = 'block';
        welcomeInfoElement.innerHTML = `
            💖 欢迎来自 <b><span style="color:#3390ff;">${pos}</span></b> 的朋友<br>
            📏 您距博主约 <b><span style="color: #3390ff;">${dist}</span></b> 公里<br>
        `;
    };

    const showErrorMessage = () => {
        const welcomeInfoElement = document.getElementById("welcome-info");
        welcomeInfoElement.style.display = 'block';
        welcomeInfoElement.innerHTML = `<p>获取IP信息失败,请检查网络.</p>`;
    };

    const initialize = () => {
        document.body.appendChild(createAnnouncementComponent());
        fetchIpInfo();
    };

    window.onload = initialize;
</script>

4.将其中的your_key改为你自己申请的key

5.访问api接口，将其中的lat和lng替换代码中的经纬度

// 修改为你自己的经纬度  
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度

6.访问主页就可以看到了