Shopify的主題結(jié)構(gòu)分析（一）

主題模板結(jié)構(gòu)

其實(shí)在更改Shopify的主題代碼或者模板配置項(xiàng)時(shí)，我們對(duì)于Shopify主題結(jié)構(gòu)和代碼的結(jié)構(gòu)不了解，所以有時(shí)候只知道在哪個(gè)位置修改哪些內(nèi)容，雖然更改了但是其實(shí)并不理解為什么要在這個(gè)位置更改，也更不知道代碼或者配置為什么是這樣設(shè)置出來(lái)的。為了應(yīng)對(duì)我們不斷增加的需求，以下就讓我們開始熟悉Shopify更深一層的結(jié)構(gòu)層次吧。

在我們平時(shí)改Shopify的主題模板時(shí)候，無(wú)論是Shopify自帶的配置項(xiàng)或者是修改Shopify的主題代碼文件。我們總是能看到Shopify的整個(gè)模板結(jié)構(gòu)，例如下列（圖1-1）中的結(jié)構(gòu)層級(jí)。最常見的是Header和Footer兩個(gè)模塊，且我們可以發(fā)現(xiàn)基本每個(gè)頁(yè)面都會(huì)出現(xiàn)而且是公用設(shè)置項(xiàng)的。

圖1-1

我們可以打開主題的代碼修改部分，我這邊使用的是系統(tǒng)默認(rèn)主題Debut，且每個(gè)主題模板的不同，結(jié)構(gòu)層級(jí)和數(shù)量也不同?？梢赃@么認(rèn)為，付費(fèi)的主題模板可選的模塊（Section）和可配置項(xiàng)遠(yuǎn)遠(yuǎn)比免費(fèi)的多。也就是通過付費(fèi)模板的設(shè)置你可以改出更多的東西，當(dāng)然只要你會(huì)改代碼的樣式，免費(fèi)的模板主題也能改得比付費(fèi)的更加好。

我們可以再看下代碼部分的結(jié)構(gòu)。（圖1-2）

圖1-2

在（圖1-2）中我們可以看到代碼的主體結(jié)構(gòu)分為L(zhǎng)ayout,Templates,Sections,Snippets,Assets,Config,Locales這七大部分?；舅械闹黝}模板也只有這七個(gè)代碼模塊。

Layout指的是布局，也就是通用的布局樣式，舉個(gè)例子在Layout下的theme中引入了header section和footer section，所以為什么我們會(huì)在每個(gè)頁(yè)面中都能看到公用的的header和footer（圖2-1）。

圖2-1

Templates可以理解成每個(gè)頁(yè)面，例如商品頁(yè)面，購(gòu)物車頁(yè)面等等，通常建立在Layout的布局下。

Sections也就是每個(gè)功能模塊了，例如（圖2-1）中的Featured colletion,Slideshow等等。在Templates代碼中通常通過{%section''%}來(lái)引用section。

Snippets是相對(duì)于Sections更小的模塊，它可能是Section下的一小部分功能模塊，通常是{%include''%}來(lái)引入。

Assets中通常放置相關(guān)的引入文件，例如js文件，css文件和一些圖片素材。

Config中是描述整個(gè)主題的通用設(shè)置，舉個(gè)例子（圖2-2）中的字體顏色，字體樣式等等。而相對(duì)于單個(gè)section的設(shè)置項(xiàng)通常寫在對(duì)應(yīng)section文件的下面。（圖2-3）

圖2-2

圖2-3

Locales,如果你的店鋪營(yíng)業(yè)對(duì)象是一些比較不常見的國(guó)家，你又想要將自己主題語(yǔ)言換成對(duì)應(yīng)的國(guó)家，這時(shí)候就應(yīng)該在Locales中進(jìn)行配置，這里面存放的是相對(duì)的語(yǔ)言模板，語(yǔ)言模板的配置細(xì)節(jié)會(huì)在后續(xù)更新哦。

通過以上的介紹，就可以大概了解到整個(gè)主題和代碼結(jié)構(gòu)了，后面如果有需求修改某個(gè)位置的代碼，也可以準(zhǔn)確的找到修改的位置了。