如何在Squarespace页面嵌入动态更新的NOAA GOES-18卫星图像

核心逻辑 #

要实现动态加载NOAA的实时卫星图，关键是根据当前UTC时间生成匹配格式的图片URL，同时每10分钟自动刷新，还要处理浏览器缓存问题。NOAA的URL规则是：年份+年积日+10分钟对齐的UTC时间，比如2023年第59天21点00分就是20230592100。

直接能用的代码 #

把下面这段代码复制到Squarespace的代码块里就行：

<div style="width: 100%; max-width: 2400px; margin: 0 auto;">
  <img id="goes18Alaska" alt="GOES-18阿拉斯加区域实时卫星图" style="width: 100%; height: auto;" />
</div>

<script>
// 生成符合NOAA格式的图片链接
function getGoes18ImageUrl() {
  const now = new Date();
  // 取UTC年份
  const year = now.getUTCFullYear();
  // 计算年积日（从1月1日开始的天数，补成3位）
  const yearStart = new Date(Date.UTC(year, 0, 1));
  const dayOfYear = Math.floor((now - yearStart) / (1000 * 60 * 60 * 24)) + 1;
  const doy = dayOfYear.toString().padStart(3, '0');
  // 把UTC分钟取整到最近的10分钟（比如23分就变成20分，5分变成0分）
  const hours = now.getUTCHours().toString().padStart(2, '0');
  const roundedMinutes = Math.floor(now.getUTCMinutes() / 10) * 10;
  const timeStr = `${hours}${roundedMinutes.toString().padStart(2, '0')}`;
  
  // 拼接基础链接，加时间戳避免浏览器缓存旧图
  const baseUrl = `https://cdn.star.nesdis.noaa.gov/GOES18/ABI/SECTOR/cak/GEOCOLOR/${year}${doy}${timeStr}_GOES18-ABI-cak-GEOCOLOR-2400x2400.jpg`;
  return `${baseUrl}?t=${Date.now()}`;
}

// 更新图片src
function refreshSatelliteImage() {
  const img = document.getElementById('goes18Alaska');
  img.src = getGoes18ImageUrl();
}

// 页面加载时先加载一次，之后每10分钟刷新
window.onload = () => {
  refreshSatelliteImage();
  setInterval(refreshSatelliteImage, 10 * 60 * 1000); // 10分钟毫秒数
};
</script>

Squarespace嵌入步骤 #

1. 打开Squarespace后台，进入要加卫星图的页面，点击「编辑」
2. 在页面合适位置添加「代码块」（Code Block）
3. 把代码粘贴进去，设置代码块的类型为「HTML」
4. 保存页面，预览就能看到实时更新的卫星图了

注意点 #

• 代码里加了响应式样式，图片会自适应页面宽度，最大显示2400px的原图尺寸
• 所有时间计算用的是UTC（祖鲁时间），和NOAA的时间标准完全匹配，不会有时区偏差
• 末尾的?t=${Date.now()}是强制浏览器加载最新图片，防止缓存旧图不更新
• 如果偶尔加载失败，大概率是NOAA的CDN临时波动，刷新下页面就行

内容的提问来源于stack exchange，提问作者GKTRK