在页面模板中创建的 Shopify/liquid 代码段未在产品模板中正确加载

问题描述

我创建了一个可以在任何页面模板中按预期加载的代码段。当我在产品模板中包含相同的片段时，样式会改变并且链接消失了。在页面模板和产品模板中包含代码段是否有不同的规则？产品模板是否从与页面模板不同的文件中提取样式信息？

这是我创建的片段，名为“shop-world-nav”

<nav id="shop-world-nav" class="navbar navbar-expand-lg navbar-dark">
  

  
  <div class="shop-navbar-brand" class="navbar-brand" id="learn-logo">
              <h3 class="nav-title-shop-menu" style="color: #fff;">Shop Menu</h3>
            </div>
         
      
      <button id="learn-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="dropdown-toggle"></span>
      </button>

      <div class="collapse navbar-collapse shop-world-collapse sticky-top" id="navbarSupportedContent">
          <ul id="shop-world-navbar" class="w-100 navbar-nav mr-auto" style="margin-top: 0">
                

            
            {% for link in linklists.shop-world-nav.links %}
                {% if link.links != blank %}
                  <li class="nav-item dropdown">
                    <a href="{{ link.url }}" class="nav-link dropdown-toggle" href="#" role="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {{ link.title }}
                     
                    </a>
                    <div class="dropdown-menu shop-world-nav-dropdown-menu" aria-labelledby="navbarDropdown">
                      {% for childlink in link.links %}
                          <a href="{{ childlink.url }}" class="dropdown-item shop-world-dropdown-item">
                            {{ childlink.title }}
                          </a>
                      {% endfor %}
                    </div>
                  </li>
                {% else %}
                  <li  class="nav-item">
                    <a href="{{ link.url }}" class="nav-link">
                      {{ link.title }}
                    </a> 
                  </li>
                {% endif %}
              {% endfor %}
            </ul>          
      </div>

  
        
</nav>

包含在这样的页面模板中，一切都按预期工作： (image of navbar as designed)

{% include 'shop-world-nav' %}


{% render 'shogun-products',content: page %}

<h1 class="page-title">{{ page.title }}</h1>

<!-- <p>testing</p> -->
<div class="rte">
  {{ page.content }}
</div>

但是当像这样包含在产品页面中时，文本就消失了： (image of navbar missing text,as rendered on a product page)

{% include 'shop-world-nav' %}


{% render 'shogun-products',content: page %}

<h1 class="page-title">{{ page.title }}</h1>

<!-- <p>testing</p> -->
<div class="rte">
  {{ page.content }}
</div>



{% render 'shogun-products',content: product %}


          {% include 'ba-po-params' %}
        
{% include 'shogun-products',content: product %}
{{product.Metafields.shogun.above}}
{% include 'breadcrumbs' %}
{% section 'module-product' %}
{% section 'static-product-recommendations' %}


{{product.Metafields.shogun.below}}

<!-- <p>testing</p> -->
{% render 'product_infox' %}

解决方法

让我们开始调试： 首先，注释掉这段代码，看看是否有任何差异。如果出现错误，则可能是其他代码对其有影响。

不进入下一步；

{% render 'shogun-products',content: product %}


          {% include 'ba-po-params' %}
        
{% include 'shogun-products',content: product %}
{{product.metafields.shogun.above}}
{% include 'breadcrumbs' %}
{% section 'module-product' %}
{% section 'static-product-recommendations' %}


{{product.metafields.shogun.below}}

<!-- <p>testing</p> -->
{% render 'product_infox' %}

我发现您使用 include 和 render 不一致。事实上，它们完全不同。

include 标签的工作方式与渲染标签类似，但它允许 代码段内的代码来访问和覆盖变量 在其父模板中。 include 标签已被弃用 因为它处理变量的方式会降低性能和 使主题代码更难阅读和维护。

说到这里，将 {% include 'ba-po-params' %} 更改为 {% render 'ba-po-params' %} 并更改为其他的，看看是否有任何差异。