tag：主题-Theme
主题-Theme
- include
- render
- javascript
- section
- sections
include
包含某个snippets文件（小部件）
语法：
{% include 'filename' %}
include的用法和render是一样的，详细看下面的render
render
关于render：
- 呈现
代码片段或应用程序块。(也就是snippets里面的文件，也可以叫做小部件) - 在
代码片段和应用块内部，您无法直接访问在代码片段或应用块外部创建的变量。但是，您可以将变量指定为参数， 以便将外部变量传递给代码片段。 - 在fecify中，
代码片段小部件文件，都放到了snippets文件夹里面，您可以在sections下的卡片文件里面使用render直接引入 - 也可以在snippets文件夹的一个
代码片段文件里面，使用render引入另外一个代码片段文件，也就是说snippets文件夹下的文件，是可以使用render相互引用的 - 引用后，
代码片段文件里面的内容，将嵌入到引用的地方，相当于代码嵌入进来。
虽然您无法直接访问已创建的变量，但可以访问全局对象，以及任何可在代码片段或应用程序块外部直接访问的对象。
- 例如，产品模板内的 snippet 或 app block 可以访问product对象，而某个部分内的 snippet 或 app block 可以访问section对象。
在代码片段或应用程序块之外，您无法访问在代码片段或应用程序块内创建的变量。
1.语法：
- filename: 要呈现的代码片段的名称，不带
.liquid扩展名
{% render 'filename' %}
2.参数：for
- 不常用
{% render 'foo' for collection.products %}
会对 collection.products 里的每一个元素执行一次（render 'foo'），并且把当前项赋值给变量名 foo, 您在foo.liquid里面可以直接使用，譬如：{{ foo.title }}
举例：
{% render 'foo' for collection.products %}
snippets文件：foo.liquid
- collection.products是一个数组，对数组进行循环，每一个子项，执行一次 render 操作，foo就是子项的值，譬如：
{{ foo.title }}
<div class="product">
<h3>{{ foo.title }}</h3>
<span>{{ foo.price }}</span>
</div>
3.参数：with
- 不常用
语法：
{% include 'foo' with 'bar' %}
举例：
// 1.数据
{
"bar": {
"title":"Macbook Pro",
"price":19999
}
}
// 2.模版
{% include 'foo' with bar %}
// 3.snippet：foo.liquid
<h2>{{ foo.title }}</h2>
<p>{{ foo.price }}</p>
// 4.结果
<h2>Macbook Pro</h2>
<p>19999</p>
4.将变量传递给代码片段
- 常用
语法：
{% render 'filename', variable: value %}
可以将外部变量，传递到代码片段小部件文件，在小部件文件里面可以直接使用该变量
举例：
// 1.数据
{
"my_product":{
"title":"product my title",
"price":23.33
}
}
// 2.代码
{% render 'product-card', product: my_product, show_price: true %}
// 3.snippet：product-card.liquid
<div class="card">
<h3>{{ product.title }}</h3>
{% if show_price %}
<p>{{ product.price | currency_code }}</p>
{% endif %}
</div>
// 4.输出
<div class="card">
<h3>product my title</h3>
<p>$23.33</p>
</div>
javascript
js片段
语法：
- javascript_code:JavaScript 代码。
{% javascript %}
javascript_code
{% endjavascript %}
和直接使用<script></script>标签不同的是
1.使用{% javascript %},代码片段将不在当前位置显示，而是放到HTML页面的最后面执行（js放到最后可以加快渲染UI）
2.对js代码会进行压缩（去掉回车，空白等无效字符，减少体积）
section
加载section文件
- 一般都是在layout/theme.liqud入口文件里面使用
- 加载section文件（sections文件夹里面的文件），也就是一个liquid文件
1.语法
{% section 'js-group' %}
将会加载section文件：sections/js-group.liquid文件
说明：
- fecify目前，只有在layout/theme.liqud入口文件使用section标签
关于section更多信息，参看：Section深度解析
sections
加载section group
- 加载一个section group，打开该文件，可以看到是一个json格式的文件，里面是配置信息，譬如：sections/header-group.liquid
- 这个json文件里面，配置了多个section，进而加载多个section，因此是一个组合
- 一般页面的头部header，footer会用到sections
语法：
{% sections 'header-group' %}
对应的文件是：sections/header-group.liquid，打开这个文件，可以看到里面是一个json，有2个子项
- name：section group的名称
- sections：配置的子项，每一个子项是一个section
对section的更多信息，参看: Sections详解