Squarespace如何部署JS实现点击页面添加新图片效果

前期准备与代码修正 #

• 先把你要用到的Folio-1.jpg、Folio-2.jpg、Folio-3.jpg3张素材上传到Squarespace后台的「自定义文件」库，上传完成后逐个复制文件的真实访问链接，替换代码里images数组对应的文件名位置，否则图片会加载404。
• 修正原代码的逻辑错误：
  1. 原生JS没有document.createImage()方法，创建图片节点要使用document.createElement("img")
  2. 删除事件绑定里的event.preventDefault()，这段代码会阻止页面所有默认交互，导致导航、按钮、表单全部失效
  3. 补充必要的定位样式和过渡动画，和参考站的交互质感对齐，同时避免图片遮挡后续点击操作。

修正后的完整可运行代码如下：

// 点击逐张显示图片逻辑
const images = [
    // 替换为你上传到Squarespace后的图片真实访问链接
    "你的Folio-1访问链接",
    "你的Folio-2访问链接",
    "你的Folio-3访问链接"
]

let imgIndex = 0 

function placeImage(x, y){
    const nextSrc = images[imgIndex]
    const img = document.createElement("img")
    img.src = nextSrc
    // 设置图片定位基础样式
    img.style.position = "absolute"
    img.style.left = `${x}px`
    img.style.top = `${y}px`
    img.style.pointerEvents = "none"
    img.style.zIndex = "999"
    img.style.opacity = "0"
    // 按需打开随机旋转效果
    // const randomDeg = Math.random() * 20 - 10
    // img.style.transform = `translate(-50%,-50%) scale(0.5) rotate(${randomDeg}deg)`
    img.style.transform = "translate(-50%,-50%) scale(0.5)"
    img.style.transition = "all 0.4s ease-out"
    
    document.body.appendChild(img) 
    // 触发渐显放大动画
    setTimeout(() => {
        img.style.opacity = "1"
        img.style.transform = img.style.transform.replace("scale(0.5)", "scale(1)")
    }, 10)
    
    imgIndex = imgIndex + 1
    if (imgIndex >= images.length) {
        imgIndex = 0 
    }
}

// 桌面端点击触发
document.addEventListener("click", function(event){
    placeImage(event.pageX, event.pageY)
})

// 移动端触摸触发
document.addEventListener("touchend", function(event){
    const touchPoint = event.changedTouches[0]
    placeImage(touchPoint.pageX, touchPoint.pageY)
})

代码部署操作 #

根据你需要的生效范围，二选一操作即可：

• 全站生效（适合首页/整站都需要该效果的场景）
  1. 登录Squarespace后台，打开侧边栏「设置」→「高级」→「代码注入」
  2. 找到「页脚」输入区域，先粘贴以下全局样式代码，避免出现横向滚动条、定位偏移问题：

<style>
body {
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}
</style>

3. 在样式代码后面加一对<script></script>标签，把上面修正后的JS代码完整粘贴到标签中间
4. 点击保存，刷新前台页面即可测试效果。

• 单页面生效（仅需要某个特定页面展示该效果的场景）
  1. 进入对应页面的可视化编辑器，在页面最顶部或最底部添加一个「代码」模块，选择语言为HTML
  2. 把上述全局样式、包裹在script标签里的JS代码一起粘贴到代码模块中
  3. 保存页面后预览即可生效。

注意：Squarespace的全站代码注入功能需要商业版及以上套餐支持，如果使用的是基础套餐，直接用单页面代码块的方式部署即可，代码块不要嵌套在其他内容容器内部，避免图片定位出现偏移。

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