Shopify专题
商店的模板目录结构
00 分钟
2022-11-22
2023-9-11
type
status
date
slug
summary
tags
category
icon
password
每个商店主题下有7个目录,在templates目录下有一个customers文件夹,一共8个目录。除此之外,不能有其他的目录。如下:

assets

assets目录包含主题中使用的所有资源文件,包括图像、CSS和JavaScript文件。
在模板中使用 asset_url 过滤器来引用主题中的资源文件。例如:

config

config目录包含主题的配置文件。 配置文件在主题编辑器的主题设置区域中定义设置,并存储它们的值。
config目录下有两个配置文件:
  • settings_data.json
包含 settings_schema.json 中保存的设置值。settings_schema.json 可以定义 settings 与其默认值,settings_data.json 保存着在商店后台主题编辑器中修改的模板设置的值。
  • settings_schema.json
控制主题编辑器的“主题设置”区域的组织和内容。
 

layout

layout目录包含主题的布局文件,模板文件通过这些文件呈现。
布局是一种Liquid文件,它允许你在多个页面上都引用同一个布局文件。 例如,多个包含相同头部和底部的页面可以引用同一个布局文件,布局文件的主体内容可以通过以下方式渲染出来:
 

locales

locale目录包含主题的locale文件,这些文件用于提供翻译后的内容。 Locale文件允许您在主题编辑器中提供翻译体验,为在线商店提供翻译,并允许商家在在线商店中定制文本。
 

sections

sections目录包含一个主题的sections。
section是Liquid文件,它允许您创建可重用的内容模块,商家可以对其进行定制。它们还可以包含允许商家在一个区域内添加、删除和重新排序内容的区块。
section支持section特有的 schema 标签 。 这个标签允许您定义一个 section 的各种属性,比如 section 名、任何 block,以及允许主题编辑器定制选项的设置。每一个 section 只能有一个 schema 标签,且不能包含在 liquid 标签中。
schema 标签可以包含以下属性:
属性
说明
name
决定了在主题编辑器中 section 的名称。
tag
定义 section 的标签名,默认为 div。
class
添加到 section 标签的类名。
settings
创建特定 section 的 settings 以允许在主题编辑器中自定义 section。
blocks
创建 section 的块。
max_blocks
每一个 section 最多创建16个块,可以使用 max_blocks 设置可创建块的下限。
presets
section presets 是 section 的默认配置,允许商家通过主题编辑器轻松地将章节添加到 JSON 模板中。它们与 settings_data.json 中定义的主题样式无关。
default
如果您静态呈现一个section,那么您可以用默认对象定义一个默认配置,它具有与 presets 配置相同的属性。
locales
section 可以通过 locale 对象提供自己的翻译字符串集。 这与主题的 locale 目录是分开的,这使得它对于那些打算安装在多个主题或商店上的部分是一个有用的特性。
templates
将 section 限制到指定的模板中。
 

snippets

snippets目录包含较小的可重用代码片段的Liquid文件。 您可以使用Liquid render标记在整个主题中引用这些片段。
 
 

templates

templates目录下的每一个json文件是一个模板,每一个模板对应着一个页面。
json模板是存储要呈现的section列表及其相关设置的数据文件,每一个 section 是一个块级元素,可以在后台的主题编辑器中添加、删除、排序这些块。
json文件里面是一个对象,模板对象有五个属性:
属性名
数据类型
是否必须
描述
name
string
非必须
模板名称
layout
string | false
非必须
指定模板所属的布局文件;也可以设为false,表示不需要模板。默认布局文件为:theme.liquid
wrapper
string
非必须
如果指定了一个标签名(div、main、section三选一),则会动态生成这个标签,并把sections全部塞入到这个标签元素里面。也可以给这个标签指定id或类名等,例如:div#wrapper.wrapper[data-attr="wrapper"]
sections
Object
必须
定义各个section对象,详细section对象见下表。一个模板文件里最多只能有20个section,每一个section最有只能有16个block。
order
Array
必须
定义sections的顺序
json模板对象示例:
section对象各个特性定义如下:
字段
类型
是否必须
描述
<SettingID>
string
-
在block或section的scheme中定义的setting的ID。
<SectionType>
string
必须
要渲染的section文件名,不用写扩展名。
<SectionDisabled>
boolean
非必须
是否渲染这个section。
<BlockID>
string
-
block的id,只接受字母数字。
<BlockType>
string
必须
要渲染的block的类型,在section文件的scheme中定义。
<BlockOrder>
Array
非必须
多个block的id数组,id必须存在对象中,且不能重复。
<SettingID>
string
必须
在block或section的scheme中定义的setting的ID。
<SettingValue>
(multiple)
一个setting的有效值。
section对象结构如下:
产品页面section对象示例:
模板文件也可以是 liquid 文件,liquid 模板可配置性比较差,但 liquid 可以包含代码。