Squarespace开发中如何跳出squarespace:query标签作用域引用外部变量

squarespace:query标签默认是封闭作用域，模板渲染阶段内部无法直接访问标签外的上下文变量，这是平台的原生设计，没有直接跳出作用域的方法。你目前通过category属性传值过滤的逻辑本身符合平台规则，只是业务语义上不够规范，以下是两种更标准的实现方案：

方案1：自定义字段+filter属性服务端过滤（推荐） #

这种方案是平台原生支持的服务端过滤方式，不会占用分类的业务属性，语义更清晰，性能最优：

• 首先给series-1集合的所有内容项新增一个自定义字段，比如命名为seriesTag，字段值和你页面customContent.seriesName的取值一一对应
• 将query标签的category参数替换为filter参数，优化后代码如下：

<div class="infosection" data-info-section="Series">
  <p id="seriesTitle">
    {customContent.seriesName}
  </p>
  <p id="seriesBlurb">
    <squarespace:query collection="series-1" filter="seriesTag:{customContent.seriesName}" limit="1">
      {.section items.0}
        {excerpt}
      {.end}
    </squarespace:query>
  </p>
</div>

• 说明：squarespace:query的属性参数本身支持插入外部上下文变量，这个是官方允许的合法用法，不属于临时兼容方案。

方案2：全局JS变量中转适配复杂过滤场景 #

如果你的过滤逻辑比较复杂，需要同时匹配多个外部变量，无法通过单个filter参数实现，可以用全局变量做中转，客户端二次过滤，实现代码如下：

<!-- 外部作用域先把需要的变量挂载到全局 -->
<script>
  window.pageContext = {
    seriesName: "{customContent.seriesName}",
    // 可按需添加更多需要的外部变量
  }
</script>
<div class="infosection" data-info-section="Series">
  <p id="seriesTitle">
    {customContent.seriesName}
  </p>
  <p id="seriesBlurb"></p>
</div>
<squarespace:query collection="series-1" limit="100">
  <script>
    // query内部可以直接访问全局变量做过滤
    const matchedItem = {@|json}.items.find(item => item.seriesTag === window.pageContext.seriesName)
    if (matchedItem) {
      document.getElementById('seriesBlurb').textContent = matchedItem.excerpt
    }
  </script>
</squarespace:query>

注意事项 #

• 不要尝试在query标签内部的模板语法（即{}包裹的渲染逻辑）中访问外部变量，该部分的上下文在构建阶段已经被限定为query返回的数据集，无法获取外部作用域内容
• 第一种方案是平台原生支持的标准实现，优先选择该方案，只有当过滤规则无法通过filter参数实现时再用第二种客户端方案

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