将 class 添加到 Shopify liquid link？

Question

我正在尝试为我的客户生成注销 link，但想将 class 应用到 link。

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

以上液体代码生成

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

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

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

Answer 1

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

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

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

您可以添加任何 class 您喜欢的内容。

过滤器customer_logout_link只是一个shorthand写标准link。如果您打算使用按钮的标准 HTML 结构之外的任何内容，只需将其记为标准 html link.

Answer 2

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

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

Answer 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>

Add a class to a Shopify liquid link?