在您的Shopify主题工作中使用片段的提示

如果您使用过服务器端语言，那么您应该已经熟悉部分年代或包括5 .在Shopify，部分年代和包括S被称为片段。为了帮助你理解Shopify是如何使用它们的，这里有一个简短的概述:

• 片段是包含可重用代码块的文件
• 它们位于snippets文件夹中
• 他们有.liquid扩展
• 它们最常用于出现在多个页面上但不横跨整个主题的代码
• 使用Liquid标签将代码片段包含在模板中渲染,例如,{%显示“代码段名称”%}
• 您不需要追加.liquid在引用代码片段名称时使用
• 当包含一个代码片段时，它将有权访问父模板中的变量
• 片段的例子包括社交链接和分页块

在本文中，我们将介绍一些在工作中使用Shopify片段的技巧。

高级代码段使用

代码片段非常有用，它允许您将重复的代码保存在单个文件中。最重要的是，这样做的好处是使我们能够从一个文件更新该代码的所有实例。

我们在设计主题时经常使用片段。我们发现的主要好处是，它们允许我们专注于离散的代码块，而不是处理长文件。它也使合并和工作Shopify部分容易得多。考虑到没有性能劣势，我们发现这是一种很好的工作方式。

当然，每个人都有不同的工作流风格。但是，除了代码片段的美观性和组织性方面的好处之外，您可能还需要考虑使用它们的其他原因。

你可能还喜欢:如何做一个深入的液体渲染分析与Shopify主题检查器。

条件加载代码片段

代码段的另一种用法是条件加载。例如，假设我们想要显示一组特定产品的特别优惠框，每个产品的产品手柄中都有“咖啡杯”。

Shopify中的每个对象都有一个唯一的“句柄”。在WordPress等其他平台中，这被称为“slug”。句柄是对象的url安全表示。每个产品都有一个根据产品标题自动创建的句柄，但是您可以在管理中操纵句柄，使其成为您喜欢的任何句柄。

鉴于其独特的性质，句柄很容易在Shopify模板中使用以进行比较。用一种简单的液体如果语句时，我们可以检查当前产品的句柄，并决定是否包含该代码片段。

这里有一个例子来解释将被放置的概念product.liquid：

{%如果产品。手柄包含“咖啡杯”%}
{%显示“特价”%}
{% endif %}

正如你所看到的，这个如果语句检查当前查看的产品句柄。如果返回值包含咖啡杯然后模板将包含该代码片段特制的。如果返回值不匹配，模板将简单地继续呈现。

这是一个非常简单的条件加载示例，但它展示了我们如何使用Liquid的强大功能，以便根据产品输出不同的标记。通过使用这个简单的方法，您可以创建非常灵活的主题。

命名约定

如前所述，snippets文件夹作为一个大桶，用于存放所有客户端主题的snippet文件。因此，我们倾向于在文件前面加上它们的函数，以使它们的使用更清晰、更容易。

例如:

• product-limited-edition-coffee-cup.liquid
• product-showcase.liquid
• collections-coffee-cups.liquid

您会注意到，这些都非常符合模板命名约定，使它们更容易集成到您的工作流中。

变量作用域

在模板文件中呈现代码片段时，其中的代码不会自动访问使用该代码片段的父模板中的变量标记分配的变量。同样，在代码段内赋值的变量不能被代码段外的代码访问。

但是，如果我们想要使用一个代码片段，并引用一个模板变量，该怎么办呢?为了实现这一点，我们只需使用Liquid标签{% assign %}并将这些变量作为呈现标记上的参数列出。

这里有一个例子:

{% assign my_variable = 'apples' %}
{%渲染'name'， my_variable: my_variable, my_other_variable: 'oranges' %}

代码片段现在可以访问apples变量和oranges变量。我们还可以制作以下格式的液体收集:

{% assign all_products = collections.all.products %} {% render 'snippet'， products: all_products %}

这里还值得注意的是，在代码片段中分配一个在父模板中也被分配的变量并不会覆盖父模板中的值。

你可能还喜欢:Shopify主题开发的基本资源列表。

使用与

为了完善我们对代码片段的了解，让我们花一些时间来看一个使用render标记参数的示例与。这种方法真正展示了代码片段的强大功能，并允许我们创建可在各种应用程序中使用的可重用代码。

为了设置场景，假设我们有一个片段，它允许我们在模板中输出产品集合。这是一个非常基本的例子，我们可以把它保存为collection-product-list.liquid：

自集合变量是全局的，这在任何模板中都可以正常工作。这个代码片段只是输出一个指向商店中每个产品的无序链接列表。

如果我们想让任何一个单独的产品系列都成为可能呢?为了实现这一点，我们需要将代码片段重构为:

您会注意到，不是循环遍历collections.all.products，我们有一个占位符变量，它的名称与我们的代码片段减去.liquid扩展。

让我们看看如何使用这个更通用的代码片段:

{% assign c = collections.all.products %}
{%使用c %显示'collection-product-list'}

首先，我们分配collections.all.products变成液态变量。在这个例子中，它叫做c但你可以随意命名。

接下来我们来看看渲染标记并引用不带.liquid延伸，后面跟着c。的与参数将一个值赋给代码段内与该代码段共享相同名称的变量。虽然这听起来可能令人困惑，但快速看一下上面的例子，其中有以下一行:

{集合-产品-列表中的产品%}

实际上发生的是变量c在代码片段中引用的collection-product-list。因此，我们的代码片段现在可以处理使用与参数。

你可能还喜欢:如何为现代浏览器构建(支持旧浏览器)。

扩展泛型代码段

也可以向代码片段传入多个变量。一个很好的例子可能是要显示的产品数量。的限制子句可以在代码片段中实现这一点为循环。

下面是重构后的代码片段:

下面是我们如何将一个值传递给limit子句来引用:

{% assign c = collections.all.products %}
{%显示带有c的“collection-product-list”，limit_count: 2%}

当代码段被渲染时，它将在第二个循环后退出。这使得我们的代码片段更加通用，并允许我们在各种情况下使用它。

注意，省略此变量将意味着遍历Liquid集合中的所有项目。如果limit_count大于列表中的项数，则会退出为在最后一个列表项之后循环。

的后面用逗号分隔，可以传入更多的变量与参数。例如，你可以这样写:

{%使用c, limit_count: 2, heading_text: '所有产品'显示'collection-product-list' %}

您可以输出heading_text在代码片段中以以下方式:

{{heading_text}}

OB欧宝娱乐APP今天就开始使用代码片段

虽然代码片段最初可能看起来只是武器库中的另一个简单工具，但可以将它们变成主题开发工作中非常强大的一部分，允许您创建可在各种应用程序中使用的可重用标记。