如何用Liquid在Shopify创建静态作品集并解决404错误

一、先解决404问题 #

• 必须在Shopify后台创建对应页面：
  1. 进入「在线商店」→「页面」，点击「添加页面」
  2. 标题填对应名称（比如「联系我」），Handle必须设为小写的contact/portfolio/services（这是Liquid判断的核心依据）
  3. 页面内容可以留空，状态设为「可见」，保存

二、用Liquid实现专属内容加载 #

有两种方案，推荐第二种更易维护：

方案1：在主page.liquid模板中用分支判断 #

找到主题的page.liquid模板（路径：模板→page.liquid），替换页面内容区域的代码：

{% comment %} 页面专属Sections渲染 {% endcomment %}
{% case page.handle %}
  {% when 'contact' %}
    {% section 'contact-section' %}
  {% when 'portfolio' %}
    {% section 'portfolio-section' %}
  {% when 'services' %}
    {% section 'services-section' %}
  {% else %}
    {{ page.content }} {% comment %} 默认显示后台编辑的页面内容 {% endcomment %}
{% endcase %}

（用case比嵌套if-else更简洁易读）

方案2：使用自定义页面模板（推荐） #

每个页面单独用专属模板，逻辑更清晰，后期扩展性强：

1. 在代码编辑器中，进入「模板」→「添加新模板」
2. 类型选「页面」，名称填contact，点击「创建模板」
3. 在新建的page.contact.liquid中写入：

{% section 'contact-section' %}

4. 重复上述步骤，创建page.portfolio.liquid和page.services.liquid，分别对应加载各自的sections
5. 回到后台对应页面，在「模板」下拉菜单中选择对应的自定义模板（比如「page.contact」），保存

三、优化配置建议 #

• 模块化拆分：每个sections只负责单一功能，比如contact-section只放联系表单和联系方式，不要混其他内容，方便单独修改和复用
• 统一布局继承：确保所有页面都继承主题的theme.liquid布局（默认模板都会自动继承），保持header、footer等通用元素一致
• 避免冗余判断：用自定义模板替代大量分支判断，新增页面时只需创建新模板，不用修改主模板代码
• 严格匹配handle：Liquid的page.handle是严格区分大小写和字符的，确保后台页面handle和模板中的判断完全一致（比如都是contact，不是Contact或contact-us）
• 测试页面状态：确保后台页面状态为「可见」，如果设为「隐藏」会直接返回404
• 复用通用组件：如果多个页面有相同元素（比如面包屑、页面标题），可以把这些抽成单独的snippet，在各个模板中引用，减少重复代码

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