snippets-小部件

snippets-小部件

1.什么是snippets-小部件

前端开发，对于一些粒度比较小的单位，譬如：一个按钮，svg图，一张图片的渲染，都会进行一下封装，譬如vue里面的组件，然后各个部分可以方便的引入

liquid的小部件（snippets）就是解决这个问题，当然，为了满足需要

• 有比较小的粒度：图片渲染，按钮
• 有比较大的粒度：购物车商品列表

一般而言，很多地方（section）需要用到的部分，就可以分离出来做一个snippets小部件，然后通过render引入

• 譬如：{% render 'filename' %}, 关于render的语法使用，参看：tag：主题-Theme

2.snippets结构

打开文件夹snippets，里面的每一个文件，就是一个snippets小部件文件，snippets结构

• 加载js，css文件
• html代码
• 变量逻辑
• 加载其他的小部件（可以通过{% render 'filename' %}，在当前的小部件里面加载其他的小部件）

3.snippets调用

可以在这些地方调用snippets小部件

• layout：入口文件layout/theme.liquid, 譬如：{% render 'custom-code-body' %}
• section：也是通过render引入（可以通过{% render 'filename' %}，在section里面加载小部件）
• snippets：也是通过render引入（可以通过{% render 'filename' %}，在当前的小部件里面加载其他的小部件）

使用render引入小部件后

• 小部件可以使用系统变量
• 小部件可以使用section里面assign的变量