文件结构
本节介绍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.xml theme.xml |
这个包含了模板信息,例如模板名称、发布日期、目录和模块设置等。在Joomla中是templateDetails.xml 文件,在WordPress中是 theme.xml . |
/warp.php |
这个文件加载Warp框架核心文件. |
/favicon.ico |
这是浏览器小标。 |
/apple_touch_icon.png |
如果你在手机上显示.将显示这个图片。想要改变它,很简单直接替换即可. |