一、主题目录
Layout ————— 存放theme,liquid文件,布局模板,全局文件围绕此文件来渲染
Templates ————— 模板文件,对应每个模板的jason数据
Sections ————- 区块代码文件夹,二次开发主要在此文件夹新建、编辑,文件类型为liquid
Snippets ————- 一些重复的代码片段,供sections引用
Assets —————- 静态资源文件夹(放入第三方库,图片等等)
Config ————– 配置主题文件
Locales ————— 存放多语言文件
包含主题布局模板,默认情况下是 theme.liquid
content_for_header,content_for_index,content_for_layout
{{ content_for_header }}对象 这个对象必须放在Layout/theme.liquid模板的
内,它将Shopify所需的所有脚本动态加载到文档头中。这些脚本包括Shopify分析,Gооgle Analytics(分析)以及Shopify应用所需的脚本{{ content_for_layout }} 这个对象必须放在Layout/theme.liquid模板的
内。它动态加载由其他模板(例如index.liquid或)生成的内容product.liquid{{ content_for_index }} 对象 这个对象此对象必须包含在中templates/index.liquid中。它包含的是在主页上呈现的动态内容部分
二、新建区块步骤
1、进入代码编辑模块,在文件夹Section下,带点击“Add a new section”,文件名称为Test(名称可以根据需要取)
2、复制下面这个文件,作为开发内容
*
{%- schema -%}
{
“name”: “Table”,
“tag”: “section”, //编辑区域顶部标题
“settings”: [
{
“type”: “text”, //配置区域的类型,此处为文本输入,输入内容为锚点文案
“id”: “text_anchor_1”, //配置区域的id都唯一
“label”: “anchor text 1”, //对应文本输入的标题
“default”: “Overview” //默认值
},
],
“blocks”: [ //局部区块
{
“type”: “col”,
“name”: “col”,
“settings”: [
]
}
],
“presets”: [
{
“name”: “Table”,
“category”: “Homepage”,
“blocks”: [
]
}
]
}
{%- endschema -%}
{%- javascript -%}
{%- endjavascript -%}
3、一个前台配置的表格
{%- liquid
assign sid = section.id
assign se_stts = section.settings
assign se_blocks = section.blocks
assign col = se_stts.col_wide
assign more_url = se_stts.b_link
if col == “1”
assign col_wide_class = “col_text1”
assign col_wide_class_left = “col_rigth1”
elsif col == “2”
assign col_wide_class = “col_text2”
assign col_wide_class_left = “col_rigth2”
elsif col == “3”
assign col_wide_class = “col_text3”
assign col_wide_class_left = “col_rigth3”
elsif col == “4”
assign col_wide_class = “col_text4”
assign col_wide_class_left = “col_rigth4”
elsif col == “5”
assign col_wide_class = “col_text5”
assign col_wide_class_left = “col_rigth5”
elsif col == “6”
assign col_wide_class = “col_text6”
assign col_wide_class_left = “col_rigth6”
elsif col == “7”
assign col_wide_class = “col_text7”
assign col_wide_class_left = “col_rigth7”
elsif col == “8”
assign col_wide_class = “col_text8”
assign col_wide_class_left = “col_rigth8”
endif
-%}
{{se_stts.header}}
//{%- for block in se_blocks -%}标签内容为,for循环,主要是循环blocks,配置里面的内容,必须有结束标签
{%- for block in se_blocks -%}
{%- liquid
assign bk_stts = block.settings
assign col_color = bk_stts.col_color
assign col_bottom_border = bk_stts.col_bottom_border
assign col_font_weight = bk_stts.col_font_weight
if col_color == “1”
assign col_blc_color = “col_blackgound”
else
assign col_blc_color = “”
endif
if col_bottom_border == “1”
assign col_boder = “col_boder”
else
assign col_boder = “”
endif
if col_font_weight == “1”
assign font-weight = “font-weight”
else
assign font-weight = “”
endif
-%}
{{bk_stts.title_des}}
{{bk_stts.text_des}}
{%- endfor -%}
{%-liquid
if more_url != blank
assign more_learn = “”
else
assign more_learn = “col_hide”
endif
-%}
{%- schema -%}
{
“name”: “Table”,
“tag”: “section”,
“class”: “t4s-section t4s-section-all t4s_bk_flickity t4s_tp_cdt t4s-collection-banner t4s_tp_cd”,
“settings”: [
{
“type”: “header”,
“content”: “1. General options”
},
{
“id”: “header”,
“type”: “text”,
“label”: “header”,
“default”:”Table”
},
{
“type”: “url”,
“id”: “b_link”,
“label”: “Learn More”
},
{
“type”: “select”,
“id”: “col_wide”,
“label”: “col wide”,
“default”: “1”,
“options”: [
{
“value”: “1”,
“label”: “1/10”
},
{
“value”: “2”,
“label”: “3/20”
},
{
“value”: “3”,
“label”: “1/5”
},
{
“value”: “4”,
“label”: “1/4”
},
{
“value”: “5”,
“label”: “1/4”
},
{
“value”: “6”,
“label”: “3/10”
},
{
“value”: “7”,
“label”: “2/5”
},
{
“value”: “8”,
“label”: “1/2”
}
]
}
],
“blocks”: [
{
“type”: “col”,
“name”: “col”,
“settings”: [
{
“type”: “text”,
“id”: “title_des”,
“label”: “title”,
“default”:”Table”
},
{
“type”: “text”,
“id”: “text_des”,
“label”: “text”,
“default”:”Table”
},
{
“type”: “select”,
“id”: “col_color”,
“label”: “col background”,
“default”: “2”,
“options”: [
{
“value”: “1”,
“label”: “add”
},
{
“value”: “2”,
“label”: “none”
}
]
},
{
“type”: “select”,
“id”: “col_bottom_border”,
“label”: “col bottom border”,
“default”: “2”,
“options”: [
{
“value”: “1”,
“label”: “add”
},
{
“value”: “2”,
“label”: “none”
}
]
},
{
“type”: “select”,
“id”: “col_font_weight”,
“label”: “col font weight”,
“default”: “2”,
“options”: [
{
“value”: “1”,
“label”: “add”
},
{
“value”: “2”,
“label”: “none”
}
]
}
]
}
],
“presets”: [
{
“name”: “Table”,
“category”: “Homepage”,
“blocks”: [
{ “type”: “col”}
]
}
]
}
{%- endschema -%}
{%- javascript -%}
{%- endjavascript -%}