Shopify主题开发系列-目录结构浅谈

1,871 阅读2分钟

今天来写一下Shopify目录结构 以流行的brooklyn主题为例

image.png

assets目录

/assets目录下主要是放js、css、图片资源,这里不多说了,懂得都懂。

config目录

/config目录下有两个json文件settings_data.json、settings_schema.json

settings_data.json:

"current": 当前已选择了的所有 sections的配置

这里是一些自定义主题的配置信息,比如content_for_index对应的section配置。

settings_schema.json:

它控制主题编辑器中菜单的组织和内容,Liquid中的全局settings对象可以访问settings_schema.json文件中定义的所有变量,具体可参考官方文档:https://shopify.dev/docs/themes/settings
layout目录

layout目录包含主题布局模板,默认情况下是 theme.liquid,要注意的是 {{ content_for_header }} 必须放在 内,{{ content_for_layout }} 必须放在 内。

locales目录

locales目录用于为主题提供翻译的内容。

sections目录

sections组成主题的一个个可复用的模块,静态的 section 才可以通过 {{ section 'section name' }} 引入, 动态的 section 只有通过在 index.liquid 中引入 content_for_index 才可以在 json 中引用。

这里讲一下sections模块里面的schema,基本上每个sections模块都可以有schema标记,schema标记必须包含有效的JSON。这里定义的json可以用于customize主题。

您可以在部分的schema标签中定义以下属性:

name--------展示的名字

class--------添加额外的 class 在 section 的 p 上

settings--------settins 的 id 在这个 section 里是唯一的,可以在这个 section 里通过 {{ section.settings.[id] }} 拿到对应的 settings。全局 settings 对象可以在 sections 拿到。不过不可以在外面拿 sections 的内部的 section.settings。

blocks

tag-----------可以指定该部分的包装器的HTML标签

blocks--------可以在其架构中定义块。块是可以在一个节中添加,删除和重新排序的设置和内容的容器。块必须具有name和type。块type可以是主题开发人员设置的任何值。块settings的格式与相同settings_schema.json。

limit----------默认情况下,运营人员可以多次将同一块添加到部分中。如果需要,您可以为一个块设置一个限制,以便只能将其加起来达到一定次数:

max_blocks-------默认状态下后台运营人员可以添加到节中的块数没有限制,但是您可以在节模式中指定最大块数:

presets----------section 的默认配置。与 settings_data.json 的配置没有关系。

default---------静态包含在主题模板中的节,可以在架构中定义其默认配置:没有 name 或者 category

snippets目录

snippets可以理解为比section更小的代码块,它可以被引入section, template,提高代码的复用。

templates目录

templates定义了header和footer之间的内容,会动态的替换layout/中的content_for_layout

config.yml

里面包含了主题配置,如password、theme_id、store、、、