如果 Shopify 上 CSS 中的语句不起作用

Question

我正在尝试为 Shopify 上的 flexslider 添加标题。 这是我在 theme.liquid 上的代码

          {% for i in (1..10) %}
          {% capture display_slideshow %}display_slideshow_{{ i }}{% endcapture %}
          {% capture slide %}slideshow_{{ i }}.jpg{% endcapture %}
          {% capture link %}image_{{ i }}_link{% endcapture %}
          {% capture alt %}image_{{ i }}_alt{% endcapture %}
          {% capture caption %}image_{{ i }}_caption{% endcapture %} {% comment %} <-- I am adding this one {% endcomment %}

          {% if settings[display_slideshow] %}
             <li class="slide">
                    <img src="{{ slide | asset_url }}" data-url="{{ settings[link] }}" class="slide-img" alt="{{ settings[alt] }}" />  
             <p class="flex-caption">{{ settings[caption] }}</p>  {% comment %} <-- I am adding this one {% endcomment %}
          </li>
          {% endif %} 
      {% endfor %}

我的商店.css.liquid

我正在添加

{% if settings.caption %}

.flex-caption
{
    position:absolute;
    right:0;
    bottom:20px;
    z-index:1;
    background:rgba(0, 0, 0,0.6); 
    padding:20px 0 10px 10px;
    height:33px;
    width:500px;
    color:#FFF;
}

{% endif %}

即使没有应用标题，它仍然显示背景。

Answer 1

我会尝试为每张幻灯片添加一个标题文本框，然后检查 settings.caption != "" （不是空字符串）。

对于没有的幻灯片，简单地不输出标题元素，而不是与 css 类混淆，这可能是一个更简单的选择。

在此处阅读更多信息http://docs.shopify.com/themes/theme-templates/settings#settings-object-in-liquid

希望这会有所帮助。