Section-文件结构

关于section

section是一个页面结构单位，譬如：首页的轮播图部分，就可以看做是一个section，对于模版装修，section对应的就是一个装修卡片，section作为一个独立的个体，包含：

• html
• 自己的js和css文件
• 可以在里面写js和css片段
• 可以使用liquid的变量，tag，以及if等控制语法
• schema（schema是用于商家端后台，模版装修，渲染配置项，关于schema更新信息参看：schema）

打开文件：sections/header.liquid 这个就是一个section文件

详细讲解

下面以页头文件为例子：

• 文件：sections/header.liquid为例子进行讲解

一：模版装修，查看卡片效果

1.模版装修，头部卡片

• 左边是页头卡片，点击后，右侧将出现该卡片的内容内容
• 中间是前台模版部分，进行更改配置后，这里将即时查看更改后的效果
• 右侧是卡片的配置内容

二：文件内容解析

打开页头卡片对应的文件：sections/header.liquid

• 为什么页头卡片对应这个文件？可以打开sections/header-group.liquid 查看里面的配置, 可以看到里面加载了header （"type": "header"）,关于sections详细查看：Sections详解

1.加载css和js

• css文件使用了filter：asset_url和stylesheet_tag
• js文件使用了filter：asset_url和script_tag
• 关于liquid filter，更多参看：Filter-System（系统）

{{ 'header.css' | asset_url | stylesheet_tag }}
{{ 'mega-menu.js' | asset_url | script_tag: defer: 'defer' }}
{{ 'header.js' | asset_url | script_tag: defer: 'defer' }}
{{ 'localization-form.js' | asset_url | script_tag: defer: 'defer' }}

2.卡片的自定义css

{% if section.settings.custom_css %}
    {%- style section.id -%}
        {{ section.settings.custom_css |  card_custom_css: section.id }}
    {%- endstyle -%}
{% endif %}

如果用户在页头的模版装修部分，进行了自定义css的添加，那么上面的代码将加入css

• 为了css不要相互污染，系统会自定义加入该section的id，因此这里加的css代码，只能本卡片使用（使用filter：card_custom_css）

3.卡片css代码

• 使用style tag 定义一段css代码（里面可以通过 {{ }}标签，引用系统的变量）

{% style %}
    :root {
    --logo-width-desktop: {{ section.settings.logo_max_width }}px;
    --logo-width-mobile: {{ section.settings.mobile_logo_max_width }}px;
    --logo-width-sticky: {{ section.settings.sticky_logo_max_width }}px;
    --logo-height-sticky: {{ section.settings.sticky_logo_max_width | divided_by: logo_aspect_ratio }}px;
    --header-transparent-text-color: {{ section.settings.transparent_text_color | rgb }};
    }
{% endstyle %}

4.HTML自定义标签

• 通过第1步骤，可以看到引用了js文件，js文件写的js是卡片的交互事件，是通过自定义标签来绑定js事件的
• 可以看到里面有很多data-开头的属性, 这些基本都是js传递数据的
• 更多详细参看：JS & HTML自定义标签

<f-header
        data-section-id="{{ section.id }}"
        data-section-type="header"
        data-page="{{ request.path | strip }}"
        data-header-design="{{ section.settings.header_design }}"
        {% if request.design_mode == true %}
            data-design-mode="true"
        {% endif %}
        class="f-header m:block{% if transparent_on_top %} transparent-on-top{% endif %}"
        data-transparent="{{ transparent_on_top }}"
        data-sticky="{{ section.settings.sticky_header }}"
>

</f-header

说明：

• 对于{{ section.id }} 这是使用系统变量，liquid渲染的时候， 会替换成变量的值
• 另外，您可以看到很多的liquid的语法，有tag，filter，您需要先学习一下liquid的语法
• liquid tag参看：liquid tag
• liquid filter参看：Filter过滤器

5.引用snippets小部件

{% render 'header__topbar', header: section %}

说明：

• render相当于将小部件的内容，粘贴到该代码处。

6.html部分

在html部分，您可以看到，使用了很多liquid的语法，进行处理html内容，您需要先看一下liquid的语法，否则会看不懂、

7.log部分

• 这个是在开发模式下，打印系统变量，您可以在chrome浏览器下（检查模式，打开开发框，在console部分，打印出来系统变量）查看系统变量，方便开发
• 更多参看：开发者模式-log

{% if base_data_json -%}
    <script>
        console.log('this is 【header】 base data json');
        console.log({{ base_data_json }});

    </script>
{% endif -%}

8.schema部分

• 在页面的最后面，将看到schema的配置，这个里面是一个很大的json结构

{% schema %}

{% endschema %}

每一个section，就是在模版装修对应的一个卡片，点击卡片后，右侧出现卡片的配置信息，卡片的配置结构是通过schema进行渲染的， 更多关于schema的信息，参看:schema