子比主题美化侧边栏添加用户UA信息的方法

每当有访客来访网站的时候，访客自己能看到自己UA的信息，其实很鸡肋，因为博主是看不多的，所以有需要的博主可以自己添加。反正不是插件，用代码的地方，还是不错的。

效果展示

使用方法

复制代码到想要添加的小工具位置，选择自定义HTML代码，粘贴进去保存即可（推荐放在侧边栏）。

<div class="ua-info-widget" style="border: 1px solid #333; border-radius: 10px; padding: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); background-color: #1a1a1a; color: #f0f0f0; max-width: 300px; transition: all 0.3s ease;">
    <h3 style="margin-top: 0; color: #ffffff; border-bottom: 1px solid #444; padding-bottom: 10px; font-size: 16px; font-family: Arial, sans-serif;">设备信息</h3>
    <div id="ua-loading" style="color: #bbb; padding: 10px 0; font-size: 14px;">加载中...</div>
    <ul id="ua-info-list" style="display: none; list-style: none; padding: 0; margin: 10px 0;">
        <li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">IP:</strong> <span id="ua-ip" style="color: #f0f0f0;"></span></li>
        <li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">位置:</strong> <span id="ua-address" style="color: #f0f0f0;"></span></li>
        <li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">浏览器:</strong> <span id="ua-browser" style="color: #f0f0f0;"></span></li>
        <li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">系统:</strong> <span id="ua-os" style="color: #f0f0f0;"></span></li>
        <li style="padding: 6px 0; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">设备:</strong> <span id="ua-device" style="color: #f0f0f0;"></span></li>
    </ul>
    <div id="ua-error" style="display: none; color: #ff6b6b; font-size: 14px; padding: 10px; background-color: #2d1b1b; border-radius: 6px; border: 1px solid #4a2727;"></div>
</div>

<script>
// 检测系统是否偏好暗色模式并适配
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
    // 如果是亮色模式，调整样式
    document.querySelector('.ua-info-widget').style.backgroundColor = '#ffffff';
    document.querySelector('.ua-info-widget').style.color = '#333';
    document.querySelector('.ua-info-widget').style.borderColor = '#e0e0e0';
    
    // 调整文本颜色
    const textElements = document.querySelectorAll('#ua-info-list span');
    textElements.forEach(el => {
        el.style.color = '#333';
    });
    
    // 调整标题和分隔线
    document.querySelector('.ua-info-widget h3').style.color = '#333';
    document.querySelector('.ua-info-widget h3').style.borderBottomColor = '#f0f0f0';
    
    // 调整加载状态
    document.getElementById('ua-loading').style.color = '#666';
}

// 获取UA信息
fetch('https://v2.xxapi.cn/api/ua')
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不正常');
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('ua-loading').style.display = 'none';
        
        if (data.code === 200 && data.data) {
            document.getElementById('ua-info-list').style.display = 'block';
            document.getElementById('ua-ip').textContent = data.data.ip || '未知';
            document.getElementById('ua-address').textContent = data.data.address || '未知';
            document.getElementById('ua-browser').textContent = 
                (data.data.browser || '未知') + ' ' + (data.data.browserVersion || '');
            document.getElementById('ua-os').textContent = data.data.os || '未知';
            document.getElementById('ua-device').textContent = data.data.deviceType || '未知';
        } else {
            document.getElementById('ua-error').textContent = data.msg || '获取信息失败';
            document.getElementById('ua-error').style.display = 'block';
        }
    })
    .catch(error => {
        document.getElementById('ua-loading').style.display = 'none';
        document.getElementById('ua-error').textContent = '加载失败: ' + error.message;
        document.getElementById('ua-error').style.display = 'block';
    });
</script>

👋 感谢您的观看！