一、主题目录
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模板的<head> 内,它将Shopify所需的所有脚本动态加载到文档头中。这些脚本包括Shopify分析,Gооgle Analytics(分析)以及Shopify应用所需的脚本
{{ content_for_layout }} 这个对象必须放在Layout/theme.liquid模板的<body> 内。它动态加载由其他模板(例如index.liquid或)生成的内容product.liquid
{{ content_for_index }} 对象 这个对象此对象必须包含在中templates/index.liquid中。它包含的是在主页上呈现的动态内容部分
二、新建区块步骤
1、进入代码编辑模块,在文件夹Section下,带点击“Add a new section”,文件名称为Test(名称可以根据需要取)
2、复制下面这个文件,作为开发内容
*<style>标签内,编写样式
*<div>标签内,展示网页的内容,配置后台编辑模块,还需搭配liquid语言。
*{%- liquid -%}标签内,为对象申明
*{%- schema -%}标签,定义shopify后台编辑区域
*setting定义全局配置
{%- liquid
assign sid = section.id
assign se_stts = section.settings
assign se_blocks = section.blocks
-%}
<style></style>
<div></div>
{%- 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
-%}
<div class=”t4s-container” style=”margin-top:60px;margin-bottom:30px;”>
<div class=”t4s-top-heading t4s_des_title_ t4s-text-center”>
<h3 class=”t4s-section-title t4s-fs-md-40″>
<span>{{se_stts.header}}</span>
</h3>
</div>
</div>
<div class=”t4s-container” style=”margin-bottom:60px;”>
//{%- 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
-%}
<div class=”col_text {{col_blc_color}} {{col_boder}}”>
<div class=”{{col_wide_class}} {{font-weight}} text_des”>{{bk_stts.title_des}}</div>
<div class=”col_table_tr text_des {{col_wide_class_left}}”>{{bk_stts.text_des}}</div>
</div>
{%- endfor -%}
</div>
{%-liquid
if more_url != blank
assign more_learn = “”
else
assign more_learn = “col_hide”
endif
-%}
<div class=”t4s-container button-space {{more_learn}}” >
<a href=”{{more_url}}” class=”More_style”>Learn More</a>
</div>
<style>
.col_hide{
display:none
}
.col_text{
width:100%;
padding:10px 5px;
display:flex;
border-top: 1px solid hsla(216,6%,84%,.5);
}
.col_text1{
width:10%;
}
.col_text2{
width:15%;
}
.col_text3{
width:20%;
}
.col_text4{
width:25%;
}
.col_text5{
width:30%;
}
.col_text6{
width:10%;
}
.col_text7{
width:40%;
}
.col_text8{
width:50%;
}
.col_rigth1{
width:90%;
}
.col_rigth2{
width:85%;
}
.col_rigth3{
width:80%;
}
.col_rigth4{
width:75%;
}
.col_rigth5{
width:70%;
}
.col_rigth6{
width:65%;
}
.col_rigth7{
width:60%;
}
.col_rigth8{
width:50%;
}
.text_des{
word-break:keep-all;
}
.col_blackgound{
background:#F6F6F6;
}
.col_boder{
border-bottom: 1px solid hsla(216,6%,84%,.5);
}
.font-weight{
font-weight:600;
}
@media only screen and (max-width: 769px) {
.col_table_tr{
padding-left:10px
}
}
.button-space{
margin-top: 30px;
}
.More_style{
margin: 0 auto;
width:82px;
color:#222;
display:flex;
justify-content: center;
align-items: center;
font-size:14px;
border-bottom: 1px solid #222;
}
.More_style a:hover{
border-bottom: 1px solid red;
}
</style>
{%- 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 -%}