0
点赞
收藏
分享

微信扫一扫

shopify中 liquid使用记录


文章目录

  • ​​引入 liquid 文件 include​​
  • ​​引入 asset目录下的 资源​​
  • ​​引入 js​​
  • ​​引入图片​​
  • ​​liquid 定义变量​​
  • ​​过滤器文档​​
  • ​​添加默认值​​
  • ​​使用 liquid 变量​​
  • ​​传入liquid文件变量​​
  • ​​liquid文件中使用变量​​
  • ​​liquid文件中 嵌入js 并使用变量​​
  • ​​将多个liquid变量组合成一个变量​​
  • ​​liquid中添加style​​
  • ​​条件控制​​
  • ​​case/when 相当于 switch​​
  • ​​循环​​
  • ​​if 语句​​
  • ​​if​​
  • ​​else​​
  • ​​elseif​​

引入 liquid 文件 include

{%- if xxxxx -%}
{% include 'media-360', path360: product.metafields.custom_fields.path_360,height: height %}
{%- endif -%}

上面代码表示

if 表达式成立
引入 文件 ​​​media-360.liquid​​​ 在该文件中可以拿到的变量 ​​path360: product.metafields.custom_fields.path_360,height: height​

引入 asset目录下的 资源

引入 js

<script src="{{ 'jquery-2.2.3.min.js' | asset_url }}"></script>

引入图片

<img 
src="{{ '360-degrees.png' | asset_url }}"
alt="">

liquid 定义变量

{%- assign featured_media = product.price -%}

​​过滤器文档​​
添加默认值

使用过滤器 default
​​​|​​之后即为过滤条件

{%- assign featured_media = product.price | default: 100 -%}

使用 liquid 变量

传入liquid文件变量

引入​​media-360.liquid​​并传入了两个变量

{% include 'media-360', path360: 'fuck',height: height %}

liquid文件中使用变量

media-360.liquid文件中使用变量

<div style="max-width:{{ height }}px; max-height:{{ height }}px;" />

liquid文件中 嵌入js 并使用变量

<script>
const path360 = "{{ path360 }}"
console.log(path360);
</script>

<div style="max-width:{{ height }}px; max-height:{{ height }}px;" />

<script>
console.log("{{ height }}");
</script>

将多个liquid变量组合成一个变量

​​https://liquid.bootcss.com/tags/variable/​​​​capture​​的变量都是 string类型

{% capture image_size %}
{{ height }}x{{ height }}
{% endcapture %}

解释: 加入 height变量的值为200。则将 字符串 200x200 赋值给变量 image_size

{% capture media_class %}product-featured-media
{% endcapture %}

liquid中添加style

.lqiudi文件中直接添加 style标签

<style>
.watermark {
width: 30%;
height: 30%;
}
</style>

<div class="watermark">
<img
src="{{ '360-degrees.png' | asset_url }}"
alt="Load and play video in Gallery viewer, 1-Turn Easy Jar Opener">
</div>

条件控制

​​https://liquid.bootcss.com/tags/control-flow/​​

case/when 相当于 switch

{% case section.settings.media_size %}
{% when 'small' %}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign height = 1090 -%}
{%- assign enable_image_zoom = false -%}
{% endcase %}

循环

{%- for media in product.media -%}
{% include 'media', media: media %}
{%- endfor -%}

if 语句
if

{% if product.title == 'Awesome Shoes' %}
These shoes are awesome!
{% endif %}

else

{% if customer.name == 'kevin' %}
Hey Kevin!
{% else %}
Hi Stranger!
{% endif %}

elseif

{% if customer.name == 'kevin' %}
Hey Kevin!
{% elsif customer.name == 'anonymous' %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}


举报

相关推荐

0 条评论