内容
在过去的几周中，我一直为Viewport Industries，Elliot Jay Stocks公司和我去年成立的Shopify主题构建。我们选择Shopify的原因如下：
- 它使我们能够销售数字和物理产品
- 它是完全托管的，这意味着无需担心服务器
- 它支持许多与我们的银行完美集成的支付网关
- 它基于主题，这意味着我们可以轻松地重复使用现有网站的HTML，CSS和JavaScript
Shopify使用称为Liquid的模板引擎将数据从商店输出到模板中。 Liquid也许是您以前从未使用过的Shopify主题的一种成分，并且可能令人反感。不过，好消息是，开始实际上并不难。
如果您曾经使用过Smarty，ERB或Twig，那么您将熟悉以下内容。如果没有，请不要担心：这只是学习一些简单规则的问题。将Liquid技能添加到网络开发工具包后，您将可以立即开始为客户构建主题。
主题文件和文件夹
Shopify主题不过是许多文件（扩展名为.liquid的HTML文件，CSS，JS，图像等）和文件夹。主题可以根据您的需要进行外观和工作：确实没有任何限制。这是主题的基本结构：
- 资产
- 配置
- 版面
- 主题液体
- 片段
- 范本
- 404.液体
- 液体
- blog.liquid
- 车液
- 收集液
- 指数液体
- 页面液体
- 产品液体
- 搜索液体
使用这些文件，您可以创建最基本的主题。当然，您可能希望添加一些CSS，JavaScript和一些图像。您已将它们放在资产文件夹中。 （值得注意的是，您当前在资产文件夹中不被允许使用子文件夹。）
有关主题如何工作的更多信息，以及有关config和snippets文件夹的信息，我建议您从Shopify Wiki上的“从头开始”主题和“主题设置”中阅读。
另外，您可以注册免费的合作伙伴计划，创建测试店并检查测试店管理区域中可用的许多免费主题之一，只需转到“主题”菜单中的主题编辑器即可。
将URL映射到模板
Shopify主题通过将当前URL映射到特定模板来工作。例如，如果我们正在查看具有以下URL的产品...
http://www.unitedpixelworkers.com/products/indianapolis
...然后Shopify会知道使用您的 产品液体 模板。因此，您只能使用上面列出的文件名作为模板。
Shopify除了知道要显示与当前URL相关的模板之外，还为我们提供了许多非常具体的变量。这些被称为“模板变量”，使我们能够在模板中显示数据。
例如，在我们的product.liquid模板中，我们可以访问适当命名的 产品 多变的。这意味着我们可以在模板中输出产品的名称，描述，价格和可用性。我们将结合Liquid和模板变量，使用与我们产品相关的数据填充模板。
有关可用模板变量的完整列表，请访问Mark Dunkley的Shopify备忘单。
液体：基础
Liquid在这里使我们作为主题设计师的生活更加轻松。它执行此操作的主要方法之一是使用布局。布局是包含常见页面元素（例如页眉，主导航，页脚等）的理想选择。
在上面的文件夹结构中，您会注意到一个名为 主题液体 在布局文件夹中。您可以将theme.liquid视为我们的主模板。我们所有其他模板，例如product.liquid，都呈现在此主模板中。如果需要，可以有多个布局，但默认布局应始终称为theme.liquid。
我还没有看到United Pixelworkers的theme.liquid文件，但是您可以想象它包含下面红色标记的区域的标记。
这是基本的theme.liquid布局的外观：
- ！DOCTYPE html>
- html>
- 头>
- {{content_for_header}}
- title>页面标题转到此处/标题>
- / head>
- 身体>
- {{content_for_layout}}
- / body>
- / html>
您会注意到两个用大括号括起来的词组： {{content_for_header}} 和 {{content_for_layout}}。这些是我们在实践中使用Liquid的第一个例子。
Shopify经常使用{{content_for_header}}将特定文件添加到文档的head>部分：例如，添加跟踪代码。 {{content_for_layout}}是显示URL映射的模板内容的位置。例如，如果我们正在查看产品页面，则我们的product.liquid文件将替换布局文件中的{{content_for_layout}}。
了解积液
现在，我们已经了解了布局的基础知识，是时候来看一下模板了。商店都是关于产品的，所以让我们来看看 产品液体.
这是product.liquid模板的一个非常简单但实用的示例。
- h2> {{product.title}} / h2>
- {{ 产品描述 }}
- {％，如果product.available％}
- 表单action =“ / cart / add” method =“ post”>
- 选择id =“ product-select” name ='id'>
- {％为product.variants％中的变体％}
- 选项value =“ {{variant.id}}”> {{variant.title}}-{variant.price} / option>
- {％endfor％}
- /选择>
- 输入type =“ submit” name =“ add” value =“添加到购物车” id =“购买” />
- / form>
- {％ 别的 ％}
- p>该产品不可用/ p>
- {％ 万一 ％}
这里有许多关键的Liquid概念在起作用。让我们按顺序查看它们。
输出
代码的第一行包含短语 {{product.title}}。呈现后，将输出产品的标题，您现在知道该标题由URL确定。在下面的“ United Pixelworkers”示例中，产品标题简称为“ Indianapolis”。
Liquid使用点语法格式。在这种情况下，{{product.title}}等同于产品模板变量及其title属性。我们可以使用相同的方式输出产品说明 {{ 产品描述 }}.
这在Liquid术语中称为 输出。所有输出均由双大括号表示，如下所示：{{your_output}}。
逻辑
在代码的下一行，您会注意到一个大括号中的语句，后跟一个％：在这种情况下， {％，如果product.available％}。这是Liquid中另一个重要的概念，称为 逻辑。再往下看，您会注意到{％else％}，最后是{％endif％}语句。
这 如果声明 使我们能够根据一个或多个条件来指示模板显示的内容：在这种情况下，是否可以使用我们的产品。实际上，这是在说：“如果有我们的产品，请显示与该产品有关的信息；否则，将显示一条消息，让用户知道其缺货”。
Liquid中的所有逻辑语句均使用大括号百分比表示法，即{％if…％}。只要记住适当地关闭您的陈述，否则您就会遇到麻烦。例如：
- {％，如果product.available％}
- 在此处显示“添加到购物车”按钮
- {％ 别的 ％}
- 显示有关产品何时下次可用的消息
- {％ 万一 ％}
筛选器
液体使我们能够以多种方式操纵我们的产出。其中之一是使用过滤器。进入过滤器的内容将以另一种方式从另一端出来。
查看上面的product.liquid示例，您会注意到 { 钱 }。变体是用于描述产品变体的术语：例如，不同的颜色和尺寸。这里有趣的是，我们使用过滤器来更改价格输出-在这种情况下，通过使用货币过滤器。这将导致商店的货币符号被添加到价格的前面。
其他过滤器包括 strip_html，它将从给定的文本中剥离所有HTML标记，然后 情况 它将转换为大写。
您也可以将过滤器连接在一起。例如：
- {article.content}
在这种情况下，我们采用商品模板变量的content属性，并将其传递给strip_html过滤器，最后传递给truncate过滤器。您会注意到，截断过滤器使我们可以指定最终输出要多长时间：在这种情况下，为20个字符。
过滤器还使我们能够快速创建模板中的脚本和图像元素。这是使用过滤器输出带有相关alt标签的图像的快速方法：
- {asset_url}
在Shopify主题中使用它会导致在模板中呈现以下img元素：
- img src =“ / files / shops / your_shop_number / assets / logo.png” alt =“网站徽标” />
这 asset_url 过滤器非常有用，因为它可以返回当前主题的完整路径 资产 文件夹。使用此过滤器可以使您在多个商店中应用主题，而不必担心路径。
下一步是什么？
希望这几个例子向您展示Liquid并没有那么复杂。当然，您可以使用它做更多的工作，但是通过掌握输出，逻辑和过滤器，您可以很好地理解构建Shopify主题所需的大部分内容。
更多资源和灵感
- 有用的入门Shopify教程
- 马克·邓克利（Mark Dunkley）的Shopify备忘单
- Blankify：Shopify入门主题
- 教程：从头开始构建主题
- Shopify合作伙伴计划
- 40个鼓舞人心的Shopify商店
