shopify目錄結構

下面是典型的shopify工程目錄

my-shop
  ├── assets/  /* store all website images, css, js, fonts */
  ├── config/
  ├── config.yml
  ├── layout/
  ├── locales/
  ├── sections/
  ├── snippets/
  ├── templates/
  └── theme.lock

• assets/ 下主要是一些css, js 等資源文件

• layout/ 裏面主要是theme.liquid文件，這個文件定義了整個網站的結構佈局，資源文件會被引入到這裏，我們會在裏面定義一些header, footer，中間是一些動態的template,會被content_for_layout替換，從這點上來看，shopify是個SPA

• locales是用來做多站點的，默認的是en即英文

• templates定義了header和footer之間的內容，會動態的替換layout/中的content_for_layout

• sections中模塊會被引入template 中; 有些section會動態的被templates/index.liquid中的content_for_index替換，每個sections都會在schema(config/settings_schema.json)中定義一些局部變量

• snippets可以理解爲比section更小的代碼塊，它可以被引入section, template，提高代碼的複用．

• config/ 文件下的settings_schema.json存儲的是一些全局的變量，settings_data.json存儲的是整個網站的數據
  如果你想在assets目錄下創建子目錄，像下面這樣就會報錯

assets
 ├── gift-card.js
 ├── gift-card.scss.liquid
 ├── image
 │   ├── ajax-loader.gif
 │   └── ico-select.svg.liquid
 ├── lazysizes.js
 ├── match-media.min.js
 ├── password.js
 ├── theme.js
 ├── theme.scss.liquid
 └── vendor.js

在assets目錄下創建子目錄如圖片文件夾可以對資源進行更好的分類管理，但是這種方式會導致theme watch出現422錯誤

原文鏈接
https://www.lqcreate.cn/shopify