概念/述语
从这里开始
数据库
开发入门
程序扩展
使用介绍
其它

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),然后选择编译:

主题模板

纸壳CMS的所有组件、板块都有对应的默认模板。在制作主题的过程中,难免会遇到HTML结构不一至的情况,这时候就可以在对应的主题下添加显示模板来替换默认的模板。将组件的模板放入主题目录下的Views目录即可:

例如,如果覆盖文章列表模板,可以在Views目录下放入Widget.ArticleList.cshtml或者Widget.ArticleList.fluid,这样当选用该主题时,文章列表将会优先使用主题目录下的视图模板:

模板优先级

模板优先级最高的是主题目录下的模板,其次才是默认模板,查找模板的顺序如下:

  1. ~/{CurrentTheme}/Views/{Module}/{Controller}/{Action}
  2. ~/{CurrentTheme}/Views/{Controller}/{Action}
  3. ~/{CurrentTheme}/Views/{ViewName}
  4. 默认

{CurrentTheme}当前主题,{Module}路由中的定义值,例如后端所有页面的Module值为admin

所以主题模板不仅能替换组件的视图,还可以替换Action对应的视图。

可以使用以下链接下载包含所有默认组件模板的主题,可以使用Razor或者Fluid

注意:主题中仅包含需要修改的模板文件即可。另,该功能仅包含企业版中。

查看更多:https://www.zkea.net/codesnippet/detail/theme-template.html

主题下载与安装

ZKEACMS主题的官方下载地址是 https://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");

微信公众号