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)。

预览主题

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

切换主题

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

主题打包

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

创建新主题

创建一个主题,例如名为ZKEA。首先复制默认的主题,并重命名为ZKEA:

然后往主题表里面初始化一条记录:

UPDATE dbo.CMS_Theme SET IsActived=0

INSERT INTO dbo.CMS_Theme( ID ,Title ,Url ,UrlDebugger ,Thumbnail ,IsActived ,Status )
VALUES  ( N'ZKEA' , N'ZKEA' , N'~/themes/ZKEA/css/Theme.min.css' , N'~/themes/ZKEA/css/Theme.css' , N'~/themes/ZKEA/thumbnail.jpg' , 1 ,1)

注意:IsActived表示当前主题是否正在被使用,因为要使用新主题开发,所以仅激活新主题,并将其它主题设为非活动状态。

最后,主题新建好以后,需要主动做一次样式编译,往后每一次修改都会自动编译了: