theme.liquid多if加载集合CSS仅最后一条生效该如何解决？

问题根因 #

你当前的代码逻辑存在重复加载shop.css的问题：每个独立的if判断都附带了加载shop.css的else分支。当你访问非hitcinders的匹配集合页时，对应自定义CSS会被后续多个else分支加载的shop.css覆盖；只有最后一个判断的hitcinders匹配时，最后加载的是自定义CSS，不会被后续的shop.css覆盖，因此只有它生效。

可行解决方案 #

方案1：合并为单组多分支判断（最优） #

将所有判断合并为一组if/elsif/else逻辑，整个逻辑只会加载1个CSS文件，不存在覆盖问题，代码如下：

{% if template contains 'hammersusa' %}
  {{ 'hammersusa.css' | asset_url | stylesheet_tag }}
{% elsif template contains 'brakefailure' %}
  {{ 'brakefailure.css' | asset_url | stylesheet_tag }}
{% elsif template contains 'lotsofconcerns' %}
  {{ 'lotsofconcerns.css' | asset_url | stylesheet_tag }}
{% elsif template contains 'personalitems' %}
  {{ 'personalitems.css' | asset_url | stylesheet_tag }}
{% elsif template contains 'hammers1' %}
  {{ 'hammers1.css' | asset_url | stylesheet_tag }}
{% elsif template contains 'hitcinders' %}
  {{ 'hitcinders.css' | asset_url | stylesheet_tag }}
{% else %}
  {{ 'shop.css' | asset_url | stylesheet_tag }}
{% endif %}

如果你之前合并else if时出现问题，大概率是判断顺序出错：如果存在短字符串的判断项被长字符串包含的情况，要把更精确的判断放在前面。

方案2：调整原有代码结构，只加载一次shop.css #

如果不想修改原有分支结构，可以把shop.css的加载放在所有判断之前，所有if判断匹配时加载对应自定义CSS覆盖默认样式即可，代码如下：

{# 先加载默认样式 #}
{{ 'shop.css' | asset_url | stylesheet_tag }}

{# 匹配到对应模板时加载自定义样式，覆盖默认配置 #}
{% if template contains 'hammersusa' %}
  {{ 'hammersusa.css' | asset_url | stylesheet_tag }}
{% endif %}
{% if template contains 'brakefailure' %}
  {{ 'brakefailure.css' | asset_url | stylesheet_tag }}
{% endif %}
{% if template contains 'lotsofconcerns' %}
  {{ 'lotsofconcerns.css' | asset_url | stylesheet_tag }}
{% endif %}
{% if template contains 'personalitems' %}
  {{ 'personalitems.css' | asset_url | stylesheet_tag }}
{% endif %}
{% if template contains 'hammers1' %}
  {{ 'hammers1.css' | asset_url | stylesheet_tag }}
{% endif %}
{% if template contains 'hitcinders' %}
  {{ 'hitcinders.css' | asset_url | stylesheet_tag }}
{% endif %}

这个方案的优势是后续新增自定义集合样式时，只需要新增对应的if分支即可，不需要调整原有判断顺序。

内容的提问来源于stack exchange，提问作者Kyle Knoblauch