背景

在之前,纸壳CMS的主题仅仅只是CSS样式,并不支持在主题下使用模板来构建不同的HTML结构。现在我们对主题功能做了增强,可以在主题下添加各自的模板,这样在制作主题时,就会更加自由。不仅如此,新的主题引擎还允许替换系统中所有Action对应的视图。

所以新的主题引擎可以修改包括后端在内的系统中的所有界面风格。

主题模板

纸壳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

注意事项

  1. 主题中仅包含需要修改的模板文件即可。
  2. 当把其它插件中的视图模板复制到Views目录用vistal studio编辑时,会提示找不到类型引用的情况,可以不用管它,程序是可以正常运行的。如果为了可以更友好的输入代码,可以在插件目录制作好后再复制到主题的Views目录下。

发布和预编译

纸壳CMS发布的时候会预编译程序中的所有视图文件以得到更好的性能。但为了主题可以更方便的替换和时时生效,我们设置了在发布的时候阻止预编译主题相关的视图。如果还是希望预编译它们,可以移除ZKEACMS.WebHost.csproj中的下列配置:

<ItemGroup>
  <MvcRazorFilesToCompile Include="**\*.cshtml" Exclude="wwwroot\themes\**\*.cshtml;" />
</ItemGroup>

安全相关

由于主题是可以上传安装的,而Razor几乎无所不能,所以为了安全,防止有人在主题模板中加入危险的C#代码,我们推荐您关闭主题的Razor模板功能,而仅使用Fluid模板。关闭的方式很简单,打开ZKEACMS.Fluid插件目录下的appsettings.json配置文件,将RazorViewEngine的值改为false即可。