ZKEACMS使用Bootstrap 3作为基础,方便扩展出自己的主题

主题设计

ZKEACMS使用LESS设计主题,通过简单的修改变量值就能快速生成出一套个性化的主题。

每一个主题的目录结构如下

Theme

  • css
    • Article.less
    • Base.less
    • Bootstrap.less
    • Carousel.less
    • Library.less
    • ......
    • Theme.less
  • fonts
  • images
  • thumbnail.jpg

Theme.less

css目录下是各组件的样式文件,所有的样式文件合并到Theme.less文件中,最后生成Theme.css样式文件。

Library.Less

Library.Less 是预定义的变量。可以在这里修改主题的主色调、字体、颜色、边距、导航的颜色、高度、边框等其它一些配置信息。

通过修改这些变量的值,可以快速生成一个不同风格的主题。

Thumbnail.jpg

thumbnail.jpg 是主题缩略图。

主题的编译

ZKEACMS的主题使用的是LESS开发的,在修改完LESS的文件以后,并不会马上生成对应的CSS文件,需要通过编译以后才会生成对应的CSS文件。当然,如果您不喜欢使用LESS,可以直接修改Theme.css文件,但请注意同时压缩一个Theme.min.css文件。这是因为ZKEACMS在产线环境时会自动切换使用压缩的文件。

如果您也是使用Visual Studio,我们推荐您安装Web Compiler(https://github.com/madskristensen/WebCompiler)这个工具来编译你的LESS文件。

安装好这个工具以后,就可以右键你的主题文件(Theme.less),然后选择编译:

主题下载与安装

ZKEACMS主题的官方下载地址是 http://www.zkea.net/zkeacms/theme 。在下载好主题以后,请不要尝试使用任何工具打开它。

在下载好主题以后,就可以到后台主题安装了(/admin/Theme)。

预览主题

点击主题的图片,即可预览该主题。

切换主题

点击主题的名字,可快速切换主题。

主题打包

在开发环境,进入主题菜单,就可以看到打包主题的图标,点击即可打包主题。打包好的主题要发送给其它人安装使用。