shopify的主题结构分析

image.png

我们可以看到代码的主体结构分为Layout,Templates,Sections,Snippets,Assets,Config,Locales这七大部分。基本所有的主题模板也只有这七个代码模块。
Layout指的是布局，也就是通用的布局样式，举个例子在Layout下的theme中引入了header section和footer section，所以为什么我们会在每个页面中都能看到公用的的header和footer（图2-1）。

image.png

Templates可以理解成每个页面，例如商品页面，购物车页面等等，通常建立在Layout的布局下。

Sections也就是每个功能模块了，例如（图2-1）中的Featured colletion,Slideshow等等。在Templates代码中通常通过{% section'' %}来引用section。

Snippets是相对于Sections更小的模块，它可能是Section下的一小部分功能模块，通常是{% include '' %}来引入。

Assets中通常放置相关的引入文件，例如js文件，css文件和一些图片素材。

Config中是描述整个主题的通用设置，举个例子（图2-2）中的字体颜色，字体样式等等。而相对于单个section的设置项通常写在对应section文件的下面。（图2-3）

image.png