Shopify的主題結構分析（一）,shopify的基本知識

《購物》的主題結構分析(一)

主題模板結構

其實在修改Shopify的主題代碼或者模板配置項的時候，我們并不知道主題代碼的結構和Shopify的代碼，所以有時候我們只知道在哪里修改什么內容。我們雖然改了，但是并不真正理解為什么要在這個位置改，甚至不知道為什么代碼或者配置要這樣設置。為了滿足我們日益增長的需求，我們先來熟悉一下Shopify的深層結構。

平時我們更改Shopify的主題模板時，無論是Shopify自帶的配置項，還是修改了Shopify的主題代碼文件。我們總能看到Shopify的整個模板結構，比如下面的結構層次(圖1)。最常見的模塊是頁眉頁腳，我們可以發現基本上每一頁都會出現，設置項目也很常見。

圖1

我們可以打開主題的代碼修改部分。我這里用的是系統默認的主題出道，每個主題模板都有不同的結構層次和編號。可以說付費主題模板的可選版塊和可配置項目遠比免費的多。也就是通過設置付費模板可以改變更多的東西。當然，只要你能改變代碼的風格，免費模板的主題也可以比付費模板改得更好。

我們可以再看看代碼部分的結構。(圖12)

圖12

在圖12中，我們可以看到代碼的主要結構分為七個部分:布局、模板、部分、代碼片段、資產、配置和區域設置。所有的基本主題模板都只有這七個代碼模塊。

版面指的是布局，也就是總的布局風格。比如header section和footer section都是在layout下的主題中引入的，那么為什么在每一頁中都能看到常見的頁眉和頁腳呢(圖2)。

圖2

模板可以理解為每一個頁面，比如產品頁面，購物車頁面等。，通常是在布局的布局下構建的。

版塊是每個功能模塊，如圖2中的特色收藏、幻燈片等。模板代碼中的{%section%}通常會引用節。

Snippets是比Sections更小的模塊。可能是Section下的少量功能模塊，通常由{%include%}引入。

資產通常包含相關的導入文件，如js文件、css文件和一些圖片資料。

Config是描述整個主題的一般設置。比如圖22中的字體顏色，字體風格等等。與單個節相關的設置項通常寫在相應的節文件下面。(圖23)

圖22

圖23

語言環境，如果您的商店的業務目標是一些不常見的國家，并且您想將您的主題語言更改為相應的國家，那么您應該在存儲相關語言模板的語言環境中進行配置。語言模板的配置詳細信息將在以后更新。

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

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。