type
status
date
slug
summary
tags
category
icon
password
😀
想让你的博客更具互动性和信息性吗? 试试在页脚添加用户和服务器的地理位置信息吧!这不仅能让访问者了解服务器的分布情况,还能提升用户体验。
原理:
通过 PHP 获取用户和服务器 IP 地址,然后利用 ipinfo.io API 获取详细地理位置信息(国家、城市)。最后,使用 Hampus Borgos 提供的国旗图标库,将这些信息以美观的方式展示在页脚。
实现步骤
1. 获取用户和服务器的 IP 地址
首先,我们需要通过 PHP 获取用户和服务器的 IP 地址。对于用户 IP,我们可以使用
$_SERVER['HTTP_CF_CONNECTING_IP']
或 $_SERVER['REMOTE_ADDR']
。对于服务器 IP,则直接使用 $_SERVER['REMOTE_ADDR']
。2. 获取地理位置信息
我们使用 ipinfo.io 的 API 来获取地理位置信息。这一步需要发送 HTTP 请求,并解析返回的 JSON 数据。
3. 返回 JSON 数据
为了方便前端使用,我们将这些信息以 JSON 格式返回。
4. 后端完整代码
完整代码如下
5. 前端展示
在 HTML 页脚中,我们使用 JavaScript 来获取并展示这些信息。同时,通过 Hampus Borgos 提供的国家旗帜图标库,展示对应的国旗。
大功告成!
通过上述步骤,我们实现了在博客页脚中展示用户和服务器的地理信息,包括 IP 地址、国家、城市以及对应的国旗图标。这不仅增加了博客的互动性,还让访问者对服务器的地理位置有更多了解。如果你也对这种功能感兴趣,赶快动手试试吧!
最终效果

- 作者:司徒凌风
- 链接:https://situ.eu.org/article/191874cb-3972-80dc-8168-fdf62b523765
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。