**設計主題是Magento的應用程序的一個重要組成部分。本主題介紹了Magento的主題文件結構。** **Magento的主題定位** 店面主題是通常位于app/design/frontend/<Vendor>/下 雖然在技術上它們可以存在于其他目錄。例如Magento的內置主題可以在位于vendor/magento/theme-frontend-<theme_code>當Magento的實例從composer庫部署。 每個主題都必須存儲在一個單獨的目錄： ~~~ app/design/frontend/<Vendor>/ ├── <theme1> ├── <theme2>/ ├── <theme3> ├--... ~~~ **主題組件** Magento的主題目錄的結構通常會像如下： ~~~ <theme_dir>/ ├── <Vendor>_<Module>/ │ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ ├── layout/ │ │ ├── override/ │ ├── templates/ ├── etc/ ├── i18n/ ├── media/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ ├── composer.json ├── registration.php ├── theme.xml ~~~ 讓我們在每一個特定的子目錄一探究竟。 下面描述的目錄和文件的結構是最延長之一。它可能與你的店的結構一致。 `/<Vendor>_<Module> 自選 模塊特定的風格，布局和模板。` `/<Vendor>_<Module>/web/css/source 自選模塊特定的樣式（.css和/或.LESS文件）。通用樣式模塊都在module.less文件，樣式部件都在widgets.less。` `/<Vendor>_<Module>/layout 自選布局文件，這些文件擴展默認模塊或父主題布局。` `/<Vendor>_<Module>/layout/override/base 自選 布局覆蓋默認模塊布局` `/<Vendor>_<Module>/layout/override/<parent_theme> 自選 布局重寫該模塊的父主題布局` `/<Vendor>_<Module>/templates 自選 該目錄包含覆蓋此模塊的默認模塊模板或父主題模板主題模板。自定義模板也存儲在這個目錄中。` `/etc/view.xml 如果存在于父主題需要一個主題，但可選 此文件包含所有店面產品圖片和縮略圖圖像配置。` `/i18n 自選 .csv文件的翻譯。` `/media 必需 該目錄包含一個主題預覽（你的主題截圖）。` `/web 自選 這可以直接從前端裝入靜態文件` `/web/css/source 自選 該目錄包含了援引從 Magento的UI庫全局元素，并theme.less文件，覆蓋默認的變量的值混入主題更少的配置文件。 ` `/web/css/source/lib 自選 重寫存儲在UI庫文件查看文件 lib/web/css/source/lib ` `/web/fonts 自選 主題字體 ` `/web/images 自選 主題圖片 ` `/web/js 自選 主題js` `/composer.json 描述了主題的依賴關系和一些元信息。將出現在這里，如果你的主題是一個composer包。 ` `/registration.php 必須 需要在系統中注冊的主題。 ` `/theme.xml 必須 該文件是強制性的，因為它聲明了一個主題為系統組件。它包含基本元信息，如主題名稱和父主題名稱，是主題是從現有的主題繼承。該文件由Magento的系統能夠識別的主題。` **主題文件** 除了配置文件和主題的元數據文件，所有主題文件分為以下兩類： 1.靜態視圖文件 2.動態視圖文件 靜態視圖文件 一組是由服務器返回到瀏覽器按原樣不經任何處理的主題文件，被稱為一個主題的靜態文件。靜態文件可以位于一個主題目錄如下： ~~~ <theme_dir>/ ├── media/ ├── web │ ├── css/ (except the "source" sub-directory) │ ├── fonts/ │ ├── images/ │ ├── js/ ~~~ 靜態文件和其他主題文件之間的主要區別是，靜態文件出現網頁作為對文件的引用上，而其它主題文件參加頁面生成，但網頁作為文件上明確地被引用。這可以通過從店面的直接鏈接訪問靜態視圖文件，是有區別的公共主題文件。 要對瀏覽器的公共靜態文件發布到/pub/static/frontend/<Vendor>/<theme>/<language>/css/目錄實際上訪問。 動態視圖文件 查看正在處理或以提供結果到客戶機由服務器執行的文件。它們是：.LESS文件，模板布局。動態視圖文件位于一個主題目錄，如下所示： ~~~ <theme_dir>/ ├── Magento_<module>/ │ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ ├── layout/ │ │ ├── override/ │ ├── templates/ ├── web/ │ ├── css/ │ │ ├── source/ ~~~