Shopify的主題結構分析（一）

主題模板結構

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

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

圖1-1

我們可以打開主題的代碼修改部分，我這邊使用的是系統(tǒng)默認主題Debut，且每個主題模板的不同，結構層級和數(shù)量也不同?？梢赃@么認為，付費的主題模板可選的模塊（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,如果你的店鋪營業(yè)對象是一些比較不常見的國家，你又想要將自己主題語言換成對應的國家，這時候就應該在Locales中進行配置，這里面存放的是相對的語言模板，語言模板的配置細節(jié)會在后續(xù)更新哦。

通過以上的介紹，就可以大概了解到整個主題和代碼結構了，后面如果有需求修改某個位置的代碼，也可以準確的找到修改的位置了。