shopfiy 二次开发之 html 标签

shopfiy 是使用 liquid 模板语言开发的，里面有一些非常实用的标签，不管是在 html 结构中，还是在 css 样式中都可以使用，非常方便。

常用标签

{{ ‘smirking_gnome.gif‘ | asset_url | img_tag }}

编译后：

<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />

html结构中使用

<img class="mid-pic" src="{{ ‘app.png‘ | asset_url }}"

css bacground

background-image: url({{ ‘app.png‘ | asset_url }});

给 img  添加 class / alt 属性

{{ ‘app.png‘ | asset_url | img_tag: ‘Smirking Gnome‘, ‘cssclass1 cssclass2‘ }}

编译后：

<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/app.png?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />

css 外部分引用

{{ ‘shop.css‘ | asset_url }}

定尺寸的图片

{{ ‘logo.png‘ | asset_img_url: ‘300x‘ }}

文件地址

{{ ‘size-chart.pdf‘ | file_url }}

付款按钮

{{ form | payment_button }}

javascript 标签

{{ ‘shop.js‘ | asset_url | script_tag }}

css 标签

{{ ‘viewer.min.css‘ | asset_url | stylesheet_tag }}

时间标签

{{ article.published_at | time_tag }}

产品变体图片

{{ variant.image.src }}

产品变体名称

{{ variant.title }}

产品变体URL 地址

{{ variant.url }}

产品创建时间

{{ product.created_at }}

产品图片

{{ product | img_url }}

选中的产品变体

{{ product.selected_variant.id }}

rgba 颜色值 

{{ ‘#7ab55c‘ | color_to_rgb }}