向 Shopify 流动链接添加课程？答案

【问题标题】：Add a class to a Shopify liquid link?向 Shopify 流动链接添加课程？
【发布时间】：2018-01-30 20:39:59
【问题描述】：

我正在尝试为我的客户生成一个注销链接，但想为该链接应用一个类。

{{ 'layout.customer.log_out' | t | customer_logout_link }}

以上液体代码生成

<a href="/account/logout" id="customer_logout_link">Log out</a>

我想添加一个类属性。例如，

<a href="/account/logout" class="CLASS-NAME" id="customer_logout_link">Log out</a>

【问题讨论】：

【解决方案1】：

您可以使用replace 过滤器将类添加到链接，您的代码将如下所示

{{ 'layout.customer.log_out' | t | customer_logout_link | replace: '<a', '<a class="my_class"' }}

【讨论】：

【解决方案2】：

您不能直接将类添加到链接过滤器，但您可以添加自己的链接。

所以下面的代码{{ 'layout.customer.log_out' | t | customer_logout_link }}会被转换成。

<a href="/account/logout" id="customer_logout_link">{{ 'layout.customer.log_out' | t }}</a>

你可以添加任何你喜欢的课程。

过滤器customer_logout_link 只是编写标准链接的简写。如果您打算使用按钮的标准 HTML 结构之外的任何内容，只需将其写为标准 html 链接即可。

【讨论】：

【解决方案3】：

为了两全其美，您仍然可以利用动态 url 并将其拆分为您自己的 html，方法是在液体中添加 route 作为href。 See Shopify documentation on routes

<a href="{{ routes.account_logout_url }}" class="my_class" >
  {{ 'layout.customer.log_out' | t }}
</a>

【讨论】：