Dream2.0Plus主题访客信息侧边栏美化

1
<style>
2
    /* 通用居中 */
3
    .align-center {
4
        text-align: center;
5
    }
6

7
    /* 高亮文字颜色 */
8
    .font-color {
9
        color: deepskyblue;
10
    }
11

12
    /* IP 遮罩：默认模糊，鼠标悬停后清晰 */
13
    .ip-mask {
14
        cursor: pointer;
15
        user-select: none;
16
        transition: all .3s ease;
17
        filter: blur(4px);
18
    }
19

20
    .ip-mask:hover {
21
        filter: none;
22
    }
23
</style>
24
<!-- 欢迎信息容器 -->
25
<div id="welcomeMessage" class="align-center">
26
    <p>🌍 小伙伴你好呀！ 🌍</p>
27
    <p>正在寻找你的足迹...</p>
28
</div>
29

30
<!-- 开往/空间穿梭按钮 -->
31
<div class="align-center">
32
    <p>🚇 继续探索未知 👇️👇️ 发现更多精彩 🚇</p>
33
    <a href="https://www.travellings.cn/go.html" target="_blank" rel="noopener" title="开往-友链接力">
34
        <img src="https://www.travellings.cn/assets/logo.gif" alt="开往-友链接力" width="120" />
35
    </a>
36
    <a href="https://blogs.quest" target="_blank" title="空间穿梭-随机访问 BlogsClub 成员博客">
37
        <img src="https://www.blogsclub.org/images/shuttle_4.png" alt="空间穿梭" />
38
    </a>
39
</div>
40

41
<script>
42
    /***********************
43
     * 工具函数
44
     ***********************/
45

46
    /** 根据当前小时获取问候语与建议 */
47
    function getGreetingAndAdvice() {
48
        const hour = new Date().getHours();
49

50
        if (hour < 6) {
51
            return {
52
                greeting: "🌛 深夜好呀 👋",
53
                advice: "🌙这么晚还不睡嘛，不要熬夜，早点休息啦！🌙"
54
            };
55
        } else if (hour < 11) {
56
            return {
57
                greeting: "🌞 早上好呀 👋",
58
                advice: "💪新的一天！ 充满活力！💪"
59
            };
60
        } else if (hour < 13) {
61
            return {
62
                greeting: "🍽️ 中午好呀 👋",
63
                advice: "🍔别忘了享受一顿美味的午餐！🍔"
64
            };
65
        } else if (hour < 18) {
66
            return {
67
                greeting: "☕ 下午好呀 👋",
68
                advice: "🍵休息一下，喝杯咖啡吧！🍵"
69
            };
70
        } else if (hour < 22) {
71
            return {
72
                greeting: "🌜 晚上好呀 👋",
73
                advice: "🌃放松心情，享受夜晚的宁静！🌃"
74
            };
75
        } else {
76
            return {
77
                greeting: "🌛 深夜好呀 👋",
78
                advice: "🌙这么晚还不睡嘛，不要熬夜，早点休息啦！🌙"
79
            };
80
        }
81
    }
82

83
    /** 角度转弧度 */
84
    function toRadians(degrees) {
85
        return degrees * (Math.PI / 180);
86
    }
87

88
    /** 根据经纬度计算与“本站”之间的距离（km） */
89
    function calculateDistance(lat, lng) {
90
        // 地球半径 km
91
        const R = 6371;
92
        // 自定义纬度
93
        const customLat = 0.0;
94
        // 自定义经度
95
        const customLng = 0.0;
96

97
        const dLat = toRadians(lat - customLat);
98
        const dLon = toRadians(lng - customLng);
99

100
        const a =
101
            Math.sin(dLat / 2) ** 2 +
102
            Math.cos(toRadians(customLat)) *
103
            Math.cos(toRadians(lat)) *
104
            Math.sin(dLon / 2) ** 2;
105

106
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
107
        return (R * c).toFixed(2);
108
    }
109

110
    /***********************
111
     * 网络请求
112
     ***********************/
113

114
    /** 获取当前访问者的 IP 与地理位置信息 */
115
    async function fetchLocation() {
116
        // 拼接上你的key
117
        const url = "https://api.nsmao.net/api/ip/query?key=";
118
        try {
119
            const res = await fetch(url);
120
            const { code, data } = await res.json();
121
            if (code === 200) {
122
                return {
123
                    ip: data.ip,
124
                    country: data.country,
125
                    province: data.prov,
126
                    city: data.city,
127
                    district: data.district,
128
                    adcode: data.adcode,
129
                    length: calculateDistance(data.lat, data.lng)
130
                };
131
            }
132
        } catch (e) {
133
            console.error("获取地理位置失败：", e);
134
        }
135
        return null;
136
    }
137

138
    /***********************
139
     * 渲染逻辑
140
     ***********************/
141

142
    /** 将获取到的信息渲染到欢迎区域 */
143
    function renderWelcomeMessage(location) {
144
        const { greeting, advice } = getGreetingAndAdvice();
145
        document.getElementById("welcomeMessage").innerHTML = `
146
                <p class="align-center"><strong>${greeting}</strong></p>
147
                <p>
148
                    欢迎来自
149
                    <strong class="font-color">${location.province}</strong>
150
                    <strong class="font-color">${location.city}</strong>
151
                    <strong class="font-color">${location.district}</strong>
152
                    的小伙伴！
153
                </p>
154
                <p class="align-center">${advice}</p>
155
                <p class="align-center">
156
                    🌍 您当前的 IP 是
157
                    <strong><span class="ip-mask font-color">${location.ip}</span></strong> 🌍
158
                </p>
159
                <p class="align-center">
160
                    📍 距离 <strong class="font-color">本站</strong> 约
161
                    <strong class="font-color">${location.length}</strong> 公里哦！📍
162
                </p>
163
                <hr />
164
            `;
165
    }
166

167
    /** 初始化：获取地理位置并渲染 */
168
    async function init() {
169
        const location = await fetchLocation();
170
        if (location) {
171
            renderWelcomeMessage(location);
172
        } else {
173
            document.getElementById("welcomeMessage").innerHTML =
174
                `<p>🌍 这位小伙伴，你似乎迷失了~🌍</p>
175
                     <p>获取位置信息失败，请稍后再试~😅<p>`;
176
        }
177
    }
178

179
    /***********************
180
     * 入口
181
     ***********************/
182

183
    // 兼容各种加载状态
184
    if (document.readyState === "loading") {
185
        document.addEventListener("DOMContentLoaded", init);
186
    } else {
187
        init();
188
    }
189
</script>