Shopify的主題結(jié)構(gòu)分析(一),shopify的基本知識《購物》的主題結(jié)構(gòu)分析(一)主題模板結(jié)構(gòu)其實在修改Shopify的主題代碼或者模板配置項的時候,我們并不知道主題代碼的結(jié)構(gòu)和Shopify的代碼,所以有時候我們只知道在哪里修改什么內(nèi)容。我們雖然改了,但是并不真正理解為什么要在這個位置改,甚至不知道為什么代碼或......
主題模板結(jié)構(gòu)
其實在修改Shopify的主題代碼或者模板配置項的時候,我們并不知道主題代碼的結(jié)構(gòu)和Shopify的代碼,所以有時候我們只知道在哪里修改什么內(nèi)容。我們雖然改了,但是并不真正理解為什么要在這個位置改,甚至不知道為什么代碼或者配置要這樣設置。為了滿足我們?nèi)找嬖鲩L的需求,我們先來熟悉一下Shopify的深層結(jié)構(gòu)。
平時我們更改Shopify的主題模板時,無論是Shopify自帶的配置項,還是修改了Shopify的主題代碼文件。我們總能看到Shopify的整個模板結(jié)構(gòu),比如下面的結(jié)構(gòu)層次(圖1)。最常見的模塊是頁眉頁腳,我們可以發(fā)現(xiàn)基本上每一頁都會出現(xiàn),設置項目也很常見。
圖1
我們可以打開主題的代碼修改部分。我這里用的是系統(tǒng)默認的主題出道,每個主題模板都有不同的結(jié)構(gòu)層次和編號??梢哉f付費主題模板的可選版塊和可配置項目遠比免費的多。也就是通過設置付費模板可以改變更多的東西。當然,只要你能改變代碼的風格,免費模板的主題也可以比付費模板改得更好。
我們可以再看看代碼部分的結(jié)構(gòu)。(圖12)
圖12
在圖12中,我們可以看到代碼的主要結(jié)構(gòu)分為七個部分:布局、模板、部分、代碼片段、資產(chǎn)、配置和區(qū)域設置。所有的基本主題模板都只有這七個代碼模塊。
版面指的是布局,也就是總的布局風格。比如header section和footer section都是在layout下的主題中引入的,那么為什么在每一頁中都能看到常見的頁眉和頁腳呢(圖2)。
圖2
模板可以理解為每一個頁面,比如產(chǎn)品頁面,購物車頁面等。,通常是在布局的布局下構(gòu)建的。
版塊是每個功能模塊,如圖2中的特色收藏、幻燈片等。模板代碼中的{%section%}通常會引用節(jié)。
Snippets是比Sections更小的模塊??赡苁荢ection下的少量功能模塊,通常由{%include%}引入。
資產(chǎn)通常包含相關(guān)的導入文件,如js文件、css文件和一些圖片資料。
Config是描述整個主題的一般設置。比如圖22中的字體顏色,字體風格等等。與單個節(jié)相關(guān)的設置項通常寫在相應的節(jié)文件下面。(圖23)
圖22
圖23
語言環(huán)境,如果您的商店的業(yè)務目標是一些不常見的國家,并且您想將您的主題語言更改為相應的國家,那么您應該在存儲相關(guān)語言模板的語言環(huán)境中進行配置。語言模板的配置詳細信息將在以后更新。
通過上面的介紹,我們可以對整個主題和代碼結(jié)構(gòu)有一個大概的了解。如果某個位置有修改代碼的需要,我們也可以準確的找到修改的位置。
特別聲明:以上文章內(nèi)容僅代表作者本人觀點,不代表ESG跨境電商觀點或立場。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。
二維碼加載中...
使用微信掃一掃登錄
使用賬號密碼登錄
平臺顧問
微信掃一掃
馬上聯(lián)系在線顧問
小程序
ESG跨境小程序
手機入駐更便捷
返回頂部