Joe再续前缘魔改（四）

功能介绍

之前在逛青桔气球网站时，发现了一个非常精美的侧边栏欢迎卡片功能。这个功能可以根据用户的地理位置和本地时间显示个性化的欢迎信息。我花费了大约十天的时间，将这个功能适配到了Joe主题中。

实现原理

该功能主要通过以下步骤实现：

1. IP地址定位：调用IP查询API获取用户的地理位置信息
2. 时间判断：根据用户的本地时间显示不同的欢迎语（如早上好、下午好、晚上好）
3. 距离计算：显示用户所在地与博主所在地的距离
4. IPv6支持：适配IPv6地址显示
5. 侧边栏集成：将欢迎信息以卡片形式展示在网站侧边栏

实现步骤

步骤1：获取JavaScript代码

核心JavaScript代码来自筱序二十の代码分享。

步骤2：修改主题代码

在网站主题的侧边栏位置添加以下自定义代码：

<div id="welcome-info"></div>

步骤3：配置API密钥

将获取到的JavaScript代码中的API密钥替换为你自己的密钥：

// 原代码中的API调用部分
const apiUrl = `https://api.nsmao.net/ip?key=YOUR_API_KEY&ip=${ip}`;

将YOUR_API_KEY替换为你从Nice猫网站申请到的实际密钥。

功能特点

• 个性化欢迎：根据用户的本地时间显示不同的欢迎语
• 地理位置显示：显示用户所在的城市和地区
• 距离计算：显示用户与博主所在地的大致距离
• IPv6支持：完美适配IPv4和IPv6地址
• 响应式设计：适配不同屏幕尺寸
• 轻量级：不影响网站加载速度

注意事项

效果展示

参考文章

• Hexo侧边栏添加个性定位欢迎信息
• 筱序二十の代码分享

每日精选