前段时间子公司让我修正呵呵她们在shopify的店面产业布局,我也是第二次碰触shopify,翻查了好些数据资料。
上面我如是说呵呵shopify的标识符商品目录内部结构。
assets:
config:
layout:
locales:
sections:
snippets:
templates:
config.yml:
assets
img、js、scss 式样 放置的地方性
在 liquid 中能透过 asset_url 以获取相关联的 url,eg:
// 聚合 theme 式样 link条码
{{ theme.scss.css | asset_url | stylesheet_tag }}
config
settings_data.json:
sections 里头的小东西
"current": 现阶段已优先选择了的大部份 sections
"presets": 能在 Add section 商品目录中看见的默认的 section
没 id 讹传。
已经优先选择了确定选项,取得确定的选项值。
商家使用自定义主题页面配置的信息的放置处。
settings_schema.json:
列出主题的大部份设置。
id 是唯一的。
创建选项给用户去优先选择。
使用在式样里头,透过全局的 settings 能拿到相关联的值
附:
settings_data 和 settings_schema 有什么不同?
layout
包含主题产业布局模板,默认情况下是 theme.liquid
{{ content_for_header }} 必须放在 <head> 内。
{{ content_for_layout }} 必须放在 <body> 内。
locales
用于为主题提供翻译的内容。
sections
组成主题的一个个可复用的模块。
能使用全局对象,tags,过滤器。
schema:
presets.category: 用于 section 的进行分类
sections 不能使用外面定义的变量, sections 内的变量不能被外面使用
section 不能包含另一个 section
全局的 settings 定义在 settings_schema.json 中
静态的 section 才能透过 {{ section section name }} 引入, 动态的 section 只有透过在 index.liquid 中引入 content_for_index 才能在 json 中引用
static sections:
已经固定在用户的主题里的,比如 header
dynamic sections:
能动态地加入到用户主题中,在主题编辑器中,能配置多个相同的 sections,调整展示顺序。
不能使用 {{% section %}} 加进 sections 到主题文件中。shopify 会将 sections 展示到 theme editor 中。content_for_index 必须被包含在 index.liquid template 中。
每一个 section 都有一个单独的 schema 条码。
name:
展示的名字
class:
加进额外的 class 在 section 的 div 上
settings:
settins 的 id 在这个 section 里是唯一的,能在这个 section 里透过 {{ section.settings.[id] }} 拿到相关联的 settings。全局 settings 对象能在 sections 拿到。不过不能在外面拿 sections 的内部的 section.settings。
blocks:
每一个 section 包含 settings 和 content:
content 能在 section 里进行加进、移除、重排。
一个 block 要有一个 name 和一个 type。
limit: 最多能加进多少个 block section。
max-blocks:在一个section的content中最多加多少个小的section。
presets:
section 的默认配置。与 settings_data.json 的配置没关系。
如果一个section有多个presets,每一个preset会变成一个单独的备选section提供商家进行加进。(需要将 content_for_index 包含在 index.liquid 中)。
有 presets 的 sections 不能直接在 theme 的 templates 中引入。
presets 必须有一个 name 和 category。在 theme editor 中,section 透过 category 进行组合。
default:
包含在 theme 的 template 中的 section 能在 schema 中定义 section 的默认配置:
没 name 或者 category。
locales:
sections 能使用在 locales 文件夹中定义的全局的 translations。
sections 也能在 schema 中定义它们自己的 translations。
这些 translations 会出现在 language editor 的 Sections tab 中。如果在 Sections tab 中修正了 translations,schema 不会改变,locale 文件夹内的配置会改变。所以 sections 内的 schema 相当于一个默认值。
在 sections 中,translate 和 localize filters 会先找现阶段 section 环境中的 translation,然后是 schema,然后是全局环境。比如:在 sections/header.liquid 中的 {{ title | t }} 会查找 locale file 中的 sections.header.title,然后查找 shema 中的 title,然后是 locale file 中的 title。
sections 能有自己的 javascript 和 stylesheet 条码。写在 {% javascript %} 和 {% stylesheet %} 中。能在 section 的 html 中加各种函数钩子。
当商家自定义 sections 的时候,sections 会在已存在的页面中动态的加入、移除或者重排,不会重新加载整个页面。editor 会在商家自定义的时候触发一些 DOM 事件,用于主题的 JavaScript 监听。
event:shopify:section:load,shopify:section:unload ……
snippets
使用 include 将 snippet 加载到主题中。
include 的 snippets 与父级元素共享变量
templates
config.yml
其它:
两类双括号变量:
1 不带引号,文档 object 中能拿到
{{ settings.favicon }}:settings 是 shopify 提供的
2 带引号
{{ general.meta.tags | t: tags: meta_tags -}} 本地 json 文件里拿到