Shopify开发之目录结构

每个商店主题下有7个目录,在templates目录下有一个customers文件夹,一共8个目录。除此之外,不能有其他的目录。如下:
└── theme
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers
1. assets

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

{{ 'custom.js' | asset_url }}
2. config

config目录包含主题的配置文件。 配置文件在主题编辑器的主题设置区域中定义设置,并存储它们的值。

config目录下有两个配置文件:

└── theme
    ...
    ├── config
    |   ├── settings_data.json
    |   └── settings_schema.json
    ...
  • settings_data.json
    包含settings_schema.json中保存的设置值。

  • settings_schema.json
    控制主题编辑器的“主题设置”区域的组织和内容。

3. layout

layout目录包含主题的布局文件,模板文件通过这些文件呈现。

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

{{ content_for_layout }}
4. locales

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

5. sections

sections目录包含一个主题的sections。

section是Liquid文件,它允许您创建可重用的内容模块,商家可以对其进行定制。它们还可以包含允许商家在一个区域内添加、删除和重新排序内容的区块。

6. snippets

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

{%- render 'icon-caret' -%}
7. templates

templates目录下的每一个json文件是一个模板,每一个模板对应着一个页面。

json模板是存储要呈现的section列表及其相关设置的数据文件,每一个section是一个块级元素,可以在后台的主题编辑器中添加、删除、排序这些块。

json文件里面是一个对象,模板对象有五个属性:

属性名数据类型是否必须描述
namestring非必须模板名称
layoutstring | false非必须指定模板所属的布局文件;也可以设为false,表示不需要模板。默认布局文件为:theme.liquid
wrapperstring非必须如果指定了一个标签名(div、main、section三选一),则会动态生成这个标签,并把sections全部塞入到这个标签元素里面。也可以给这个标签指定id或类名等,例如:div#wrapper.wrapper[data-attr=“wrapper”]
sectionsObject必须定义各个section对象,详细section对象见下表。一个模板文件里最多只能有20个section,每一个section最有只能有16个block。
orderArray必须定义sections的顺序

json示例

{
  "name": "Default product template",
  "layout": "product",
  "wrapper": "div#div_id.div_class[attribute-one=value]",
  "sections": {
    "main": {
      "type": "product"
    }
  },
  "order": [
    "main"
  ]
}

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对象结构如下:

sections: {
  <SectionID>: {
    "type": <SectionType>,
    "disabled": <SectionDisabled>,
    "settings": {
      <SettingID>: <SettingValue>
    },
    "blocks": {
      <BlockID>: {
        "type": <BlockType>,
        "settings": {
          <SettingID>: <SettingValue>
        }
      }
    },
    "block_order": <BlockOrder>
  }
}

section对象示例:

# templates/product.json
{
  "name": "Default product template",
  "sections": {
    "main": {
      "type": "product",
      "settings": {
        "show_vendor": true
      }
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值