在Squarespace环境中隐藏指定元素的HTML修改失效求助

常见原因及对应修复方案 #

1. 确保代码在DOM完全加载后执行 #

Squarespace大量内容是动态渲染的，页面刚加载就跑JS很可能找不到目标元素。试试这两种适配方案：

• 监听原生DOM加载完成事件：

document.addEventListener('DOMContentLoaded', function() {
  const parentBlock = document.getElementById('block-yui_3_17_2_1_1697649009477_55853');
  if (parentBlock) {
    const dateElement = parentBlock.querySelector('.summary-thumbnail-event-date');
    if (dateElement) {
      dateElement.style.display = 'none';
    }
  }
});

• 用Squarespace内置的加载事件，更适配平台动态渲染逻辑：

window.sqs.DOMContentLoaded(function() {
  const parentBlock = document.getElementById('block-yui_3_17_2_1_1697649009477_55853');
  if (parentBlock) {
    const dateElement = parentBlock.querySelector('.summary-thumbnail-event-date');
    if (dateElement) {
      dateElement.style.display = 'none';
    }
  }
});

2. 检查选择器是否失效 #

那个长串ID是Squarespace自动生成的，预览和正式发布环境可能不一样，别依赖它。换个稳定的方式：

1. 在Squarespace编辑器里找到目标区块，打开「区块设置」→「高级」，给它加个自定义类名（比如custom-event-block）
2. 修改JS代码用新选择器：

window.sqs.DOMContentLoaded(function() {
  const parentBlock = document.querySelector('.custom-event-block');
  if (parentBlock) {
    const dateElement = parentBlock.querySelector('.summary-thumbnail-event-date');
    if (dateElement) {
      dateElement.style.display = 'none';
    }
  }
});

3. 用CSS替代JS（更稳定） #

如果只是隐藏元素，CSS比JS靠谱得多，完全避开动态加载的坑：
还是先给父区块加custom-event-block自定义类，然后在后台「设计」→「自定义CSS」里粘贴这段代码：

.custom-event-block .summary-thumbnail-event-date {
  display: none !important;
}

4. 检查代码注入位置 #

Squarespace的代码要放到正确位置才生效：

• 仅针对单个页面：进入对应页面设置→「高级」→「页面代码注入」
• 全局生效：进入后台设置→「高级」→「代码注入」
• 建议把JS代码放在「页脚」区域，确保DOM已经渲染得差不多了

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