主题模板结构
其实在更改Shopify的主题代码或者模板配置项时,我们对于Shopify主题结构和代码的结构不了解,所以有时候只知道在哪个位置修改哪些内容,虽然更改了但是其实并不理解为什么要在这个位置更改,也更不知道代码或者配置为什么是这样设置出来的。为了应对我们不断增加的需求,以下就让我们开始熟悉Shopify更深一层的结构层次吧。
在我们平时改Shopify的主题模板时候,无论是Shopify自带的配置项或者是修改Shopify的主题代码文件。我们总是能看到Shopify的整个模板结构,例如下列(图1-1)中的结构层级。最常见的是Header和Footer两个模块,且我们可以发现基本每个页面都会出现而且是公用设置项的。
图1-1
我们可以打开主题的代码修改部分,我这边使用的是系统默认主题Debut,且每个主题模板的不同,结构层级和数量也不同。可以这么认为,付费的主题模板可选的模块(Section)和可配置项远远比免费的多。也就是通过付费模板的设置你可以改出更多的东西,当然只要你会改代码的样式,免费的模板主题也能改得比付费的更加好。
我们可以再看下代码部分的结构。(图1-2)
图1-2
在(图1-2)中我们可以看到代码的主体结构分为Layout,Templates,Sections,Snippets,Assets,Config,Locales这七大部分。基本所有的主题模板也只有这七个代码模块。
Layout指的是布局,也就是通用的布局样式,举个例子在Layout下的theme中引入了header section和footer section,所以为什么我们会在每个页面中都能看到公用的的header和footer(图2-1)。
图2-1
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)
图2-2
图2-3
Locales,如果你的店铺营业对象是一些比较不常见的国家,你又想要将自己主题语言换成对应的国家,这时候就应该在Locales中进行配置,这里面存放的是相对的语言模板,语言模板的配置细节会在后续更新哦。
通过以上的介绍,就可以大概了解到整个主题和代码结构了,后面如果有需求修改某个位置的代码,也可以准确的找到修改的位置了。
当然主题代码修改的相关教程我们也会在陆续更新的!!
除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢!
SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业。
我们的网站:https://sfsup.cn
商务合作:[email protected]