ZKEACMS使用Bootstrap 3作为基础,方便扩展出自己的主题。
ZKEACMS使用LESS设计主题,通过简单的修改变量值就能快速生成出一套个性化的主题。
每一个主题的目录结构如下
css目录下是各组件的样式文件,所有的样式文件合并到Theme.less文件中,最后生成Theme.css样式文件。
Library.Less 是预定义的变量。可以在这里修改主题的主色调、字体、颜色、边距、导航的颜色、高度、边框等其它一些配置信息。
通过修改这些变量的值,可以快速生成一个不同风格的主题。
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),然后选择编译:
纸壳CMS的所有组件、板块都有对应的默认模板。在制作主题的过程中,难免会遇到HTML结构不一至的情况,这时候就可以在对应的主题下添加显示模板来替换默认的模板。将组件的模板放入主题目录下的Views
目录即可:
例如,如果覆盖文章列表模板,可以在Views
目录下放入Widget.ArticleList.cshtml
或者Widget.ArticleList.fluid
,这样当选用该主题时,文章列表将会优先使用主题目录下的视图模板:
模板优先级最高的是主题目录下的模板,其次才是默认模板,查找模板的顺序如下:
{CurrentTheme}
/Views/{Module}
/{Controller}
/{Action}
{CurrentTheme}
/Views/{Controller}
/{Action}
{CurrentTheme}
/Views/{ViewName}
{CurrentTheme}
当前主题,{Module}
路由中的定义值,例如后端所有页面的Module值为admin
。
所以主题模板不仅能替换组件的视图,还可以替换Action
对应的视图。
可以使用以下链接下载包含所有默认组件模板的主题,可以使用Razor或者Fluid:
注意:主题中仅包含需要修改的模板文件即可。另,该功能仅包含企业版中。
查看更多:http://www.zkea.net/codesnippet/detail/theme-template.html
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
表示当前主题是否正在被使用,因为要使用新主题开发,所以仅激活新主题,并将其它主题设为非活动状态。
最后,主题新建好以后,需要主动做一次样式编译,往后每一次修改都会自动编译了:
如果你的主题不是基于Bootstrap
创建的,请在你的主题样式中引入theme-base.css
:
@import url("/css/theme-base.css");