Shopify的主題結(jié)構(gòu)分析（一）,shopify的基本知識-ESG跨境

Shopify的主題結(jié)構(gòu)分析（一）,shopify的基本知識

《購物》的主題結(jié)構(gòu)分析(一)

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

其實(shí)在修改Shopify的主題代碼或者模板配置項(xiàng)的時(shí)候，我們并不知道主題代碼的結(jié)構(gòu)和Shopify的代碼，所以有時(shí)候我們只知道在哪里修改什么內(nèi)容。我們雖然改了，但是并不真正理解為什么要在這個(gè)位置改，甚至不知道為什么代碼或者配置要這樣設(shè)置。為了滿足我們?nèi)找嬖鲩L的需求，我們先來熟悉一下Shopify的深層結(jié)構(gòu)。

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

圖1

我們可以打開主題的代碼修改部分。我這里用的是系統(tǒng)默認(rèn)的主題出道，每個(gè)主題模板都有不同的結(jié)構(gòu)層次和編號?？梢哉f付費(fèi)主題模板的可選版塊和可配置項(xiàng)目遠(yuǎn)比免費(fèi)的多。也就是通過設(shè)置付費(fèi)模板可以改變更多的東西。當(dāng)然，只要你能改變代碼的風(fēng)格，免費(fèi)模板的主題也可以比付費(fèi)模板改得更好。

我們可以再看看代碼部分的結(jié)構(gòu)。(圖12)

圖12

在圖12中，我們可以看到代碼的主要結(jié)構(gòu)分為七個(gè)部分:布局、模板、部分、代碼片段、資產(chǎn)、配置和區(qū)域設(shè)置。所有的基本主題模板都只有這七個(gè)代碼模塊。

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

圖2

模板可以理解為每一個(gè)頁面，比如產(chǎn)品頁面，購物車頁面等。，通常是在布局的布局下構(gòu)建的。

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

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

資產(chǎn)通常包含相關(guān)的導(dǎo)入文件，如js文件、css文件和一些圖片資料。

Config是描述整個(gè)主題的一般設(shè)置。比如圖22中的字體顏色，字體風(fēng)格等等。與單個(gè)節(jié)相關(guān)的設(shè)置項(xiàng)通常寫在相應(yīng)的節(jié)文件下面。(圖23)

圖22

圖23

語言環(huán)境，如果您的商店的業(yè)務(wù)目標(biāo)是一些不常見的國家，并且您想將您的主題語言更改為相應(yīng)的國家，那么您應(yīng)該在存儲相關(guān)語言模板的語言環(huán)境中進(jìn)行配置。語言模板的配置詳細(xì)信息將在以后更新。

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

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