如何在Squarespace实现点击空白处显示图片及背景色随图变化

前置准备 #

• 把要展示的图片上传到Squarespace媒体库，右键图片复制直接访问URL
• 用取色器提取每张图片的主色调，记下十六进制色值（比如#2C3E50）

步骤1：进入Squarespace代码注入面板 #

登录后台后，依次点击「设置」→「高级」→「代码注入」，找到「页脚」输入框。

步骤2：粘贴自定义代码并替换占位内容 #

把下面的代码粘贴到页脚区域，然后替换imageConfigs里的图片URL和背景色值：

<script>
// 替换成你的图片和对应背景色配置
const imageConfigs = [
  {
    imgUrl: "你的第一张图片URL",
    bgColor: "#对应背景色值"
  },
  {
    imgUrl: "你的第二张图片URL",
    bgColor: "#对应背景色值"
  },
  // 可继续添加更多图片配置
];

let currentIndex = 0;
const body = document.body;

// 创建显示图片的元素
const showImage = document.createElement('img');
showImage.style.cssText = `
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 9999;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
`;
body.appendChild(showImage);

// 点击空白区域触发切换
body.addEventListener('click', function(e) {
  // 排除按钮、导航、链接等可交互元素，只响应空白区域
  const skipTags = ['BUTTON', 'A', 'NAV', 'HEADER', 'FOOTER'];
  if (!skipTags.includes(e.target.tagName) && !e.target.closest(skipTags.join(','))) {
    const currentSet = imageConfigs[currentIndex];
    showImage.src = currentSet.imgUrl;
    body.style.backgroundColor = currentSet.bgColor;
    showImage.style.display = 'block';
    
    // 循环切换图片
    currentIndex = (currentIndex + 1) % imageConfigs.length;
  }
});

// 点击图片隐藏
showImage.addEventListener('click', function(e) {
  e.stopPropagation(); // 避免触发body的点击事件
  this.style.display = 'none';
});
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  transition: background-color 0.5s ease; /* 背景色平滑过渡 */
}
</style>

步骤3：自定义排除元素（可选） #

如果你的网站有其他需要跳过的元素（比如自定义卡片组件），可以修改skipTags数组，或者添加选择器判断：

// 示例：添加class为.custom-card的元素到排除列表
const skipTags = ['BUTTON', 'A', 'NAV', 'HEADER', 'FOOTER'];
const skipSelectors = '.custom-card';
if (!skipTags.includes(e.target.tagName) && !e.target.closest(skipTags.join(',')) && !e.target.closest(skipSelectors)) {
  // 原有切换逻辑
}

步骤4：测试效果 #

保存代码注入后，回到前台页面，点击空白区域即可触发图片显示和背景色切换；点击图片可隐藏它。

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