Bigcommerce模板URL全等if条件判断不生效问题排查

代码存在3个核心问题 #

• 运算符使用错误：Bigcommerce的Stencil模板引擎不支持在{{#if}}里直接传'==='字符串做全等判断，你写的逻辑实际是判断url、'==='、拆分出来的字符串三个值是否都为真值，自然永远返回false。
• 当前页面URL获取方式极不稳定：你通过拆分head.meta_tags拿链接的逻辑非常不可靠，head.meta_tags包含了OG图片、canonical、站点验证等所有meta标签，拆分出来的href大概率不是当前页面的URL，匹配自然失败。
• URL格式不统一：就算碰巧拿到了当前页面的链接，也会出现相对路径/绝对路径、末尾带不带斜杠的格式差异，无法匹配成功。

正确实现方案 #

直接用Stencil内置的全局变量page.url获取当前页面的标准相对路径，配合eq助手做相等判断即可，示例代码如下：

{{#if (eq url page.url)}}
activePage
{{/if}}

如果需要兼容末尾斜杠的差异，可以统一去掉末尾斜杠后再比较：

{{#if (eq (replace url /$/ '') (replace page.url /$/ ''))}}
activePage
{{/if}}

如果是在导航循环的子作用域里，需要给page.url加父级作用域标识：

{{#each navigation.items}}
  <a href="{{url}}" class="{{#if (eq url ../page.url)}}activePage{{/if}}">{{name}}</a>
{{/each}}

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