section-装修卡片

section概念

1.section分为2个部分：

• section
• sections：section group，是section的组合，里面包含多个section的配置

2.section和sections都放到了sections文件夹下面：

• 譬如：section文件：sections/video.liquid
• 譬如：sections文件：sections/header-group.liquid

3.sections对应的文件，是一个json格式的配置文件，里面包含的是加载多个section的配置信息，通过这些配置信息进行加载，通过 文件sections/header-group.liquid可以看到里面的内容

关于sections

1.在layout/theme.liquid入口文件，通过标签可以看到模版加载的sections文件

• 只有在入口文件：layout/theme.liquid 里面，才可以引入sections，其他的地方不可以引入

{% sections 'header-group' %}

{% sections 'footer-group' %}

对应的文件为：

• sections/header-group.liquid
• sections/footer-group.liquid

2.打开文件，可以看到结构：

{
  "name": {
    "text": "页头",
    "lang_params": {
      "tw": "Header",
      "en": "頁頭"
    }
  },
  "type": "header",
  "order": [
    "annoucement-m4StTwFROY",
    "header-oPWcuGAeRu"
  ],
  "sections": {
    "annoucement-m4StTwFROY": {},
    "header-oPWcuGAeRu": {}
  }
}

说明：

• name：是sections的名称
• type：是sections的type
• order：sections里面是多个section的子项，每一个子项有一个key，order是section显示的顺序
• sections：里面是多个section的子项的配置，关于section的配置结构，详细参看：Section深度解析

3.sections文件的配置内容，是在商家端后台，进行模版装修，在sections里面加入卡片，配置卡片后，配置信息就保存到这个文件中 ，因此，sections里面的内容一般是不需要手动编辑的。

在模版装修，header部分，footer部分如下图：

添加卡片，或者修改卡片的内容，进行发布后，将保存到sections对应的文件里面

关于section的更多详细，参看：Sections详解

关于section

在liquid语法中，section是一个独立单元，放到sections文件夹下，打开：sections/video.liquid即可看到一个section文件的内容

在页面首页的轮播图部分，视频卡片，都是一个section，在商家端后台，模版装修，添加卡片，每一个装修卡片就对应一个section

1.section结构：

• 引入css和js文件：当前卡片需要引入的css文件和js文件
• css片段：当前section使用的一个css片段
• html代码片段：html代码里面会嵌入liquid的逻辑变量，tag等
• schema：主要用于后台模版装修配置，详细参看：schema

2.section的使用

• 在layout/theme.liquid 里面引入,譬如：{% section 'js-group' %}
• 页面内容部分：在模版装修加入，在商家端后台模版装修，每个页面的content部分，都可以添加卡片，每一个卡片就是对应一个section
• sections：在模版装修加入，在商家端后台模版装修，在sectons（譬如：header，footer），都可以添加卡片，每一个卡片就是对应一个section

更多section的详细，参看：Section深度解析