專案名稱 Theme architecture

簡介

語言 : Liquid + JavaScript

主旨 :介紹 shopify theme

快速開始

環境建立

• shopify 線上編輯器
• 將 shopify 商店檔案下載下來編輯 請參考wiki: https://github.com/DashingDigit001/WikiPage/wiki/localshopify

專案建立

使用範例

Theme:

1. The layout file

2. The templates

3. The sections

4. The blocks

Layout:

• 裡面會有兩個 Liquid object
  • content_for_header
  • content_for_layout

Templates:裝 section 的地方

Sections:可以把它當成vue中的components

1. sections 資料夾下新增一個 test.luquid

2. 在 templates\index.json 加入

   {
       "sections":{
           "test":{
               "type":"test",
               "settings":{}
           }        
       }
       "order":[
   	    "test"
       ]
   }
   

Blocks:寫在 section 的 {% schema %} 中，可以把它當成 vue 中的 data

Settings:

• settings_data.json:記錄現在網站一些CSS設定

• settings_schema.json:寫在這邊的內容是可以讓使用者在 theme editor 中直接設定想要的屬性