文件結構
本節介紹Warp 7 源文件是怎樣組織實現一個主題的.
| 文件夾/文件 | 說明 |
/css |
主題的所有CSS文件,來管理主題顯示樣式 |
/css/custom.css |
自定義的CSS文件,使用這個文件可以方便的進行個性化樣式控制,這個文件優先于其他CSS文件進行生效。也就是說,在這里面進行的控制,會覆蓋其他CSS文件中的樣式。 |
/css/ie8.css |
針對落后的IE8瀏覽器,可以在這里進行一些顯示效果的修復。 |
/css/theme.css |
這是主題的默認CSS文件,這些Css值來自 less/theme.less 文件. |
/images |
管理所有針對這個主題的圖片 |
/js |
包含這個主題的所有 JavaScript 文件. |
/js/theme.js |
負責所有JavaScript效果和所有JavaScript功能。 |
/layouts |
包含風格布局的核心文件。 |
/layouts/theme.php |
提供完整的基本主題布局的HTML標記.了解更多請關注 style="color: #0096d7; vertical-align: middle;" title="Theme layout">Theme layout. |
/layouts/theme.config.php |
包括布局計算和重組主題 CSS 和 JS 文件. |
/layouts/widget.php |
負責顯示所有部件的變化. 了解更多請關注 Widgets/Modules. |
/less |
主題的所有 LESS 文件在這里存放. |
/less/uikit |
包括所有 UIkit 主題 LESS 文件, 這個前端顯示架構基于Warp構建. |
/less/bootstrap |
包括所有Bootstrap 相關的 LESS 文件 (僅針對Joomla 3). |
/less/theme.less |
在這里定義主題樣式和導入UIkit樣式. 這個文件將被編譯成CSS并保存在 /css 文件夾,每次你在模板管理中點擊Compile LESS 按鈕.同時所有樣式將保存在/styles/STYLE-NAME/css 文件夾. |
/less/customizer.json |
這里定義哪一個樣式定制器參數將像是在默認或高級模式。在這里可以添加更多自定義字段,比如字體、文本顏色等。 |
/less/bootstrap.less |
定義所有 Bootstrap 相關文件的參數值 (僅限Joomla 3). 就像 /less/theme.less 一樣,每次你點擊Compile LESS 時.它將被編譯到 CSS |
/styles |
在這個文件里你可以找到高級樣式設定值,和你自己定義的樣式 style="color: #0096d7; vertical-align: middle;" title="Customization">custom style. |
/styles/STYLE-NAME/style.less |
通過編輯器生成的自定義 LESS變量.每次點擊 Compile LESS 會將你自己定義的樣式編譯成新的css文件到保存在 /styles/STYLE-NAME/css. 這里所列出的是在定制器中所設定的所有值。 |
/styles/STYLE-NAME/css |
包括為您樣式創建的所有 CSS 文件,例如 theme.css 文件和 bootstrap.css 文件.所有這些文件是通過編輯器和編譯生成的。 |
/warp |
這個文件夾包括 Warp 7 核心框架文件. |
/CHANGELOG.md |
這里列出所有Warp版本更新信息。 |
/config.xml |
Warp管理界面顯示內容.你可以在這里進行界面漢化, 更多信息請閱讀 style="color: #0096d7; vertical-align: middle;" title="Config.xml">Config.xml. |
/config.json |
存儲保存主題設置。這個文件將自動生成只要你保存你的設置。 |
/config.default.json |
默認主題設置的備份文件,在主題設置出問題時可以恢復使用 |
/config.php |
這里可以管理哪些文件夾中的css文件或js文件被加載.如果你要自己定義一些js文件可以參考這個文件的存放。 |
/templateDetails.xmltheme.xml |
這個包含了模板信息,例如模板名稱、發布日期、目錄和模塊設置等。在Joomla中是templateDetails.xml 文件,在WordPress中是 theme.xml. |
/warp.php |
這個文件加載Warp框架核心文件. |
/favicon.ico |
這是瀏覽器小標。 |
/apple_touch_icon.png |
如果你在手機上顯示.將顯示這個圖片。想要改變它,很簡單直接替換即可. |





