Shopify 的主题开发-目录结构起步

Shopify 的主题开发-目录结构起步

为什么我建议你先看目录

• 节约时间，快速帮助你找到需要的内容，用问题去解决
• 快速匹配已学的框架，比如我们在学习 Vue或者其他框架的时候都有一些约定俗成的目录结构，这些概念是通用的

目录结构

Shopify 的主题也就是指在线商店的样式，风格，组织性这些方面的内容。在开发的时候需要遵循一定的目录结构。这些内容包括了基本的代码还有额外的一些静态资源。

.
├── assets 
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

1. 对应到 layout file
2. 对应到 template所设置的内容
3. 对应到 section groups 所添加的section 分组
4. 对引导 sections 单个 setction
5. 对应到 blocks 每一个 section 所能包含的
6. snippets,可以用来放置一些可复用的代码文件。
7. locales,也就是我们常说的i18n,支持国际化。

除了基本目录之外，代码主题部分和前端开发类似，包含有基本的

• 代码部分：Liquid(一种HTML预处理器)，css，js，
• 静态文件资源：图片，视频，文字等
• 配置文件：一些json数据，当用户适用 theme editor 的时候的一种交流方式

theme editor 上的自定义部分

也就是当用户拖拽的时候，你需要告诉用户哪些可以拖拽，哪些可以设置，这个需要创建多个sections和 blocks来预先定义。除了拖拽部分，还有关于设置的这部分内容，也可以有下面两个地方配置。

• config > settings_schema.json

• 在sections中定义好{% schema %} 标签。

每一个主题都应该包含有许多用于自定义的，和一些默认展示的模板内容，就比如 home,page 和 products等页面，当然他们也能对应有许多不同的变体（有种类似不同主题的意思）。