12年前100行代码开一家店，如今AI逼着Shopify把JSON模板改回了Liquid
内容提要
Shopify将主题架构从JSON模板回归Liquid代码，以提升可读性并适应AI开发。新架构用{% block %}简化结构，{% partial %}实现局部刷新，Standard Actions统一交互，并升级Liquid语法和引入Tailwind。此举旨在让代码更易读，降低AI理解成本，同时保留旧主题兼容性，被视为技术复古运动。
延伸解读
可读性为何成为AI时代的核心资产
文章指出，Shopify将主题架构从JSON模板回归Liquid，核心原因是AI代码助手难以理解碎片化的JSON配置。AI模型在HTML和常见编程语言上训练充分，但对自定义的JSON结构只能猜测。新架构通过减少文件层级、增加类型标注和文档，让代码更易读，从而降低AI的token消耗和幻觉概率。这反映出在AI辅助开发普及的背景下，代码的可读性直接关系到AI工具的有效性，成为技术选型的重要考量。
配置化与可读性的权衡：历史重演
文章回顾了2016年Shopify引入JSON模板的初衷——让非开发者能灵活搭建页面，但代价是代码可读性大幅下降。如今回归Liquid，并非简单倒退，而是吸取了教训：抽象和配置化若脱离可读性，会成为维护负担。新架构在保留灵活性的同时，通过{% block %}、{% partial %}等机制，让代码结构更直观。这提醒开发者，在追求配置化时，需平衡灵活性与可维护性，避免过度抽象。
新架构对开发者和AI的双重友好设计
新主题的多个设计都兼顾了人类和AI的理解需求：{% block %}类似React的props和children，降低了学习曲线；{% partial %}明确了局部刷新边界，便于维护；Standard Actions统一了交互接口，让AI能预测行为；Liquid语法升级更接近主流语言，减少AI犯错。这些设计并非单纯复古，而是利用现代理念重构旧技术，使代码既适合人读，也适合机器理解，体现了未来前端开发的一种趋势。
Q&A
Shopify为什么要把主题架构从JSON模板改回Liquid代码？
因为JSON模板牺牲了代码可读性，开发者难以理解和维护，而且AI代码助手难以理解复杂的JSON配置，导致AI开发效率低下。为了提升代码可读性、降低AI理解成本，Shopify决定将页面结构搬回Liquid文件。
Shopify新主题架构中{% block %}标签有什么作用？
{% block %}标签允许在Liquid模板中直接定义可嵌套的内容块，接受命名参数，并可通过{% doc %}进行类型标注。它简化了页面结构，使开发者无需在多个文件夹中查找引用关系，实现了局部化理解。
Shopify的partials机制是如何实现局部刷新的？
partials机制通过{% partial %}标签标记需要单独刷新的区域，前端使用JavaScript的partials.fetch和partials.apply方法拉取最新HTML并替换旧内容，从而无需重新渲染整个section，提高了响应速度并节省服务器资源。
Shopify的Standard Actions和Standard Events分别是什么？
Standard Actions是将更新购物车、切换商品选项等常见操作包装成统一接口，调用方式一致；Standard Events则是通过统一的事件词汇让主题和App通信，用户操作按标准格式广播。两者共同为前端交互提供了统一字典，便于开发者使用和AI理解。
Liquid语法升级具体包括哪些内容？
Liquid语法升级包括支持布尔表达式、带优先级的infix操作符、数组和对象字面量语法，例如{{ 1 + 1 }}、{{ false && false || true }}、assign products = [shirt, hat, shoes]等，使条件判断和数学运算更直观，也更接近主流编程语言。
Tailwind CSS在Shopify新主题中扮演什么角色？
Tailwind CSS为AI和开发者提供了统一的设计词典，其类名在AI训练数据中高频出现，且基于设计令牌体系，语义化命名（如text-red-500）比十六进制颜色更易理解，有助于AI生成准确的样式建议。同时，Tailwind在Liquid中直接使用类名，无需复杂构建工具。
Shopify新架构如何保证与旧主题的兼容性？
Shopify没有强制重写旧主题，现有主题永远能运行，Liquid本身是永久API。开发者可以选择新建主题使用新架构，或继续使用旧主题，两条路径并行，互不干扰。
