如何在BigCommerce（Blueprint）分类页面列出子分类？Stencil代码失效

嘿，我懂你现在的困扰——Stencil Classic Next主题里能用的子分类展示代码，放到Blueprint框架里就罢工了对吧？这俩框架的模板引擎完全不一样：Stencil用的是Handlebars，而Blueprint基于Velocity模板语法，变量结构和语法规则都有差异，咱们来把代码改成适配Blueprint的版本。

先搞懂核心差异 #

你原来的代码依赖Stencil的breadcrumbs数组结构和Handlebars的{{#each}}循环逻辑，但Blueprint里：

• 变量引用用$开头（比如$current_category而不是categories）
• 条件判断用#if()，循环用#foreach()
• 面包屑的变量是$breadcrumbs，是一个有序列表，索引从0开始

适配方案1：显示当前分类的子分类 #

如果你想在当前分类页面直接展示它的子分类，把这段代码放到Blueprint主题的category.html（或category.tpl，看主题具体命名）中你想要的位置（比如侧边栏、主内容区顶部）：

<!-- 检查当前分类是否存在子分类 -->
#if ($current_category.children.size() > 0)
  <h5>$current_category.name</h5>
  <ul class="navList">
    <!-- 遍历所有子分类 -->
    #foreach ($child in $current_category.children)
      <li class="navList-item">
        <a class="navList-action" href="$child.url" alt="$child.name" title="$child.name">$child.name</a>
      </li>
    #end
  </ul>
#end

适配方案2：匹配原代码逻辑——显示面包屑父分类的子分类 #

如果你想实现原代码里的逻辑：当当前分类是面包屑中的第二个层级（也就是父分类）时，显示它的子分类，用这段代码：

<!-- 确保面包屑至少有2个层级（首页 + 父分类） -->
#if ($breadcrumbs.size() >= 2)
  #set ($parent_category = $breadcrumbs.get(1))
  <!-- 检查父分类是否包含子分类 -->
  #if ($parent_category.children.size() > 0)
    <h5>$parent_category.name</h5>
    <ul class="navList">
      #foreach ($child in $parent_category.children)
        <li class="navList-item">
          <a class="navList-action" href="$child.url" alt="$child.name" title="$child.name">$child.name</a>
        </li>
      #end
    </ul>
  #end
#end

部署提示 #

1. 登录你的BigCommerce后台，进入「Storefront」>「My Themes」，找到Blueprint主题点击「Advanced」>「Edit Template Files」
2. 找到对应的category.html文件，把代码插入到合适的位置（比如侧边栏的Sidebar区块内）
3. 保存后刷新分类页面，就能看到子分类正常展示了

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