如何在Blogger/Blogspot中获取当前国家并按国家显示div

我来帮你搞定这个需求，Blogger本身没有内置获取访问者地理位置的功能，但咱们可以借助免费的IP地理定位API来实现，再配合JavaScript就能轻松控制元素的显示隐藏了，一步步来：

一、获取访问者的当前国家名称 #

咱们可以用ip-api.com的免费API，它不需要申请密钥，请求频率对于小流量博客完全够用（免费版限制每分钟45次请求，每天1000次）。具体操作如下：

1. 登录你的Blogger后台，进入「布局」页面
2. 找个合适的位置（比如页脚、侧边栏）点击「添加小工具」，选择「HTML/JavaScript」
3. 把下面的代码粘贴进去，保存即可：

<script>
// 调用IP地理定位API获取国家信息
fetch('https://ip-api.com/json/')
  .then(response => response.json())
  .then(data => {
    // 把国家名称和代码存到全局变量，方便后续使用
    window.visitorCountry = data.country; // 比如返回"China"
    window.visitorCountryCode = data.countryCode; // 比如返回"CN"
    console.log("当前访问者国家：", window.visitorCountry);
    
    // 触发元素显示控制逻辑
    controlDivVisibility();
  })
  .catch(error => {
    console.error("获取国家信息失败：", error);
    // 获取失败时设置默认值，避免后续逻辑出错
    window.visitorCountry = "Unknown";
    window.visitorCountryCode = "XX";
    controlDivVisibility();
  });
</script>

这段代码会在页面加载时请求API，把访问者的国家名称和两位代码存在全局变量里，方便后面调用。

二、基于不同国家控制指定div的显示 #

接下来咱们就可以利用上面拿到的国家信息，控制指定div的显示状态了：

第一步：先在博客里添加需要控制的div #

比如你可以在文章或者模板里插入这样的div（记得给每个div设置唯一的id）：

<!-- 中国用户可见的内容 -->
<div id="cn-content" style="display:none;">
  嗨，国内的朋友！欢迎访问我的博客😊
</div>

<!-- 美国用户可见的内容 -->
<div id="us-content" style="display:none;">
  Hello, friends from the US! Thanks for visiting!
</div>

<!-- 其他国家用户默认可见的内容 -->
<div id="default-content" style="display:block;">
  Welcome to my blog!
</div>

第二步：添加控制逻辑 #

把下面的代码加到刚才的HTML/JavaScript小工具里（放在之前的代码后面就行）：

function controlDivVisibility() {
  // 获取所有需要控制的div元素
  const cnDiv = document.getElementById("cn-content");
  const usDiv = document.getElementById("us-content");
  const defaultDiv = document.getElementById("default-content");
  
  // 根据国家代码判断显示哪个div
  switch(window.visitorCountryCode) {
    case "CN":
      cnDiv.style.display = "block";
      usDiv.style.display = "none";
      defaultDiv.style.display = "none";
      break;
    case "US":
      usDiv.style.display = "block";
      cnDiv.style.display = "none";
      defaultDiv.style.display = "none";
      break;
    default:
      defaultDiv.style.display = "block";
      cnDiv.style.display = "none";
      usDiv.style.display = "none";
      break;
  }
}

一些注意事项： #

• 如果你博客流量很大，免费的ip-api可能不够用，可以考虑其他付费API（比如ipgeolocation.io），不过需要申请密钥
• 部分用户可能使用VPN，导致获取的国家信息不准确，这个是无法避免的
• 要注意隐私合规，比如欧盟地区的GDPR，最好在博客隐私政策里说明你使用IP信息来做地理定位

内容的提问来源于stack exchange，提问作者Hafiz Fahad Munir