请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

解剖主题(Theme)


 
英文原文:http://docs.orchardproject.net/Documentation/Anatomy-of-a-theme
 
Orchard用户可以使用主题来自定义网站的外观,使之符合网站的需求和设计目标。主题可以针对模块中的样式表,图像,布局或者任何内容模板进行改写。
 

主题的位置

主题包括一系列特定命名的文件和目录。这些目录文件必须在Orchard网站根目录下的Themes目录中。
 

TheThemeMachine

Orchard内置一个叫做TheThemeMachine的主题。你可以通过学习这个主题来了解Orchard主题的设计。和其他主题一样,他也在Themes目录下面。
 
TheThememMachine主题被设计成一个简洁的现代化主题,可以作为开发新的自定义主题的起始点。本文使用这个主题作为演示。
 

解刨主题

本节介绍一个主题的必须和可选元素。
 

主题清单(manifest)

一个合法的主题必须包含一个清单文件用于向系统描述他自己。清单文件是一个被命名为Theme.txt的文本文件,他的位置在主题的根目录下面。以下是TheThemeMachine的清单文件:
Name: The Theme MachineAuthor: jowall, mibach, loudej, heskewDescription: Orchard Theme Machine is a flexible multi-zone theme that provides a solid foundation to build your site. It features 20 collapsible widget zones and is flexible enough to cover a wide range of layouts.Version: 0.1Tags: AwesomeWebsite: http://orchardproject.netZones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer

在清单文件的起始部分,定义了主题的名称,描述,作者和一些标签。在Zones部分,定义了一个供主题布局(Layout)和部件(Widge)使用的区域列表。区域(Zone)是一个可以包含任何模板或者布局的容器。各种各样的UI元素可以插入到区域中,而最常见的就是部件(Widge)。并不是所有的区域名称都要在清单中列明,只要列明那些包含部件的区域即可。

以上展示了一共19个区域,一般情况下,你只是需要其中的一部分。其中,这些区域中包含一个Header和一个Footer,他们分别在页首和页尾。菜单一般插入到Navigation中,而网站横幅可以放到Featured中。上面的BeforeMain和下面的AfterMain围绕着中间一些主要的区域。网站的侧边栏则可以放到主区域旁边的AsideFirst和AsideSecond中。在页面的中间有一个叫Messages的区域,提示信息可以放在这里。在他的下面分别是BeforeContent,Content和AfterContent区域,其中Content区域是页面主要内容所在的地方。再往下可以看到TripelFirst,TripleSecond和TripelThird区域,如果你想页面底部有三列内容就可以使用他们,或者使用FooterQuad*区域变成4个列。
所有在TheThemeMachine主题中的区域都是可折叠的,换句话来说,这些区域只有在有内容的时候才会显示,没有内容则是隐藏的。
 

图标或缩略图



所有的Orchard主题应该包含一个Theme.png文件。这个图标应该至少400x400像素,他会在Gallery或者在后台管理页面中显示。一般来说,他是一个用该主题显示的一个页面的缩略图。
 

部件区域预览图

另外,一个部件区域预览图可以加入到主题中。这个图标文件应该放在主题的根目录中,并命名为ThemeZonePreview.png。他的大小应该为400x400像素,并且包含所有不同的区域和区域的名称。以下是TheThemeMachine中的例子:

 

静态资源

一个主题一般包含一些静态资源,比如CSS样式表,JavaScript脚本或者是图片。这些文件必须放在以下的目录:
  • CSS样式表应该放在主题的 \Styles 目录中。
  • JavaScript脚本应该放在主题的 \Scripts 目录中。所有放在此目录下面的脚本应该为自定义的,且仅和当前主题相关,而不是具有重用性质的脚本。可重用的脚本应该放在独立的模块中,jQuery模块就是一个例子。
  • 图像文件应该放在 \Content\Images 目录中。如果你的主题之包含小量的图片,最好把它们放在同一层次的目录中。如果有很多图片的话,建议分类放在不同的子目录中。
注意:要使静态文件起作用,这些放静态资源的目录应该包含一个web.config文件,他的内容如下:
<?xml version=1.0 encoding=UTF-8?><configuration>  <system.web>    <httpHandlers>      <!-- iis6 - for any request in this location,           return via managed static file handler -->      <add path=* verb=* type=System.Web.StaticFileHandler />    </httpHandlers>  </system.web>  <system.webServer>    <handlers accessPolicy=Script,Read>      <!-- iis7 - for any request to a file exists on disk,           return it via native http module.           accessPolicy 'Script' is to allow for a managed 404 page. -->      <add name=StaticFile path=* verb=* modules=StaticFileModule           preCondition=integratedMode resourceType=File           requireAccess=Read />    </handlers>  </system.webServer></configuration>
 

Document模板

在主题中通常不包含Document.cshtml这个文件,因为很少原因去改写这个模板。多数主题可以返回到SafeMode主题的/Views目录下的Document.cshtml文件中。这个文件主要定义了body标签以外的内容。换句话说,他定义了doctype标签(Orchard 默认文档类型是HTML5),html标签,head标签(比如head中的meta标签),script标签,样式表link标签。(这和上面说的Header区域不一样,Header区域是body标签中第一个区域)。Document.cshtml同时也包含了title标签的定义。最后,他也定义了body标签和Tail区域在哪里显示。
 

Layout模板

样式是最外层的形状,用来控制如何呈现body标签里面的内容的。比如说,你可以在样式里面定义主要的部件区域。下面,你可以通过阅读本文 标记 节的内容,来了解详细布局模板中是如何定义标记的。
即使在TheThemeMachine主题中,当前包含并只支持一个叫Layout.cshtml的布局文件,但是一个主题中是可以包含许多个布局文件的。譬如说,一个主题可以添加特定的布局文件,例如Layout-Blog.cshtml或者Layout-HomePage.cshtml,当显示博客或者主页的时候,默认的布局文件就会被替换成以上两个。以上这个布局替换功能是由一个扩展完成的。可以注意到,布局模板的命名方式为Layout-{layout name}.cshtml。每个布局模板都可以包含不一样的区域和排列这些布局的标签。
关于如何为模块和主题提供可选择性的布局例子,你可以参照:Switching the Layout in Orchard CMS
 

Shape模板

在一个页面HTML输出之前,Orchard首先会通过树状结构把形状(Shape)组织起来。形状是一堆灵活的对象,这些对象描述了如何呈现页面。比如区域,菜单,菜单项和部件,他们都是形状的一种。
每个形状都可以用过模板来呈现,并且他们可以通过主题来改写。呈现形状的模板和形状的有一样的名字。比如说,如果Menu.cshtml存在的话,他将会被用于输出Menu形状的Html.
在TheThemeMachine主题中,有两个形状模板分别是:BadgeOfHonor和Branding。他们都是在Layout.cshtml文件中创建的,并使用以下代码分别插入到Header和Footer区域:
// Site name and link to the home pageWorkContext.Layout.Header.Add(New.Branding(), 5);// Powered by OrchardWorkContext.Layout.Footer.Add(New.BadgeOfHonor(), 5);

注意:模板只是呈现形状的两种方式其中之一。除开模板,你还可以在方法上面使用[Shape]特性通过代码来呈现形状。请查看CoreShapes.cs中包含的例子。用代码呈现的方式一般用于模块中,不过在主题中也可以这样做。

 

Item模板

主题可以通过在 \Views\Items 目录中包含模板来改写内容项(Content Item)的呈现方式。模板的命名应该为:Content-{content type name}.cshtml 或者 Content-{content type name}.{display type}.cshtml。比如说,一个用来改写blog post的模板应该命名为:\Views\Items\Content-BlogPost.cshtml。如果用来改写blog post的summary的话,应该为:\Views\Items\Content-BlogPost.Summary.cshtml
 

Part模板

模板可以用来改写内容块(Content Part)的呈现方式。命名规则和改写内容项(Content Item)的命名规则相似。内容块的模板必须放在 \Views\Parts 下面,并且必须命名块(Part)的名称。比如说,comments的呈现方式可以通过创建\Views\Parts\Comments.cshtml模板来改写。
 

Field模板

字段(Field)的呈现同样可以被改写,只是还不能在实例级别上进行覆盖。换句话来说,你可以改写一个text字段的外观,但不是某个特定的text字段的外观。你可以通过在 \Views\Fields 中创建一个{field type name}.cshtml 或者 {field type name}.{display type}.cshtml 模板文件来进行改写。比如说,改写text字段的呈现可以在创建\Views\Fields\Common.Text.cshtml模板。
 

模板替换(Alternates)

部件(Widge)的呈现同样可以通过在 \Views 目录下创建名称为widget-{widget type}的模板来改写。比如说,你可以在主题中的 \Views 目录下创建一个叫 widget-htmlwidget.cshtml 的模板来给HTML部件加一个红色的边框:
<div style=border:1px red solid>@Display(Model.Content)<div>
 

注意:这只是一个简单的例子,一般加边框可以用过更改样式表来实现。


 

位置(Placement)文件

 
一个主题可以在主题的根目录下面加入一个叫做 placement.info 的文件来更改形状(Shape)的显示位置。placement.info 是一个XML文件,如下:
<Placement>    <!-- widgets -->    <Place Parts_Blogs_BlogArchives=Content:before/>    <Place Parts_Blogs_RecentBlogPosts=Content:after/>    <!-- default positioning -->    <Match ContentType=Blog>        <Match DisplayType=Summary>            <Place Parts_Blogs_Blog_Description=Content:before                   Parts_Blogs_Blog_BlogPostCount=Meta:3/>        </Match>    </Match></Placement>
 

标记(Markup)

每个文件中的标记受制于你选择的显示引擎。Orchard默认使用Razor (.cshtml)引擎。关于他,请查看快速指南:Template File Syntax Guide
在一个模板里面,Model对象表示当前所呈现的形状(Shape)。这意味着,如果你在处理一个包含Message属性的message形状,你可以在模板中通过标签 @Model.Message 来显示这个属性。
作为一个重要的补充,在Orchard里面Display方法可以用来显示一个形状。比如说在layout.cshtml里面,你可以看到是利用他是如何呈现一个区域(Zone)的,例如:@Display(Model.Content)。
最后,在不同的模板里面,你可以看到一些模板方法调用,比如@Html.RegisterScript(mystyle.css) 或者 @Html.RegisterScript(myscript.js)。这些注册方法的调用是必须的,因为脚本和样式表是共享资源。即使在多个模块或者同一个部件的多个实例中引用同样的样式或者脚本,相同的link和script标记不应该出现两次。
 

主题里面写代码

大多数的主题一般只包含一个样式表,多个模板(一般是布局模板)和一些图片,除了在模板里面的一些简单的代码外没有其他代码文件。对于高级主题来说,你可能需要通过代码来实现提供一些设置,自定义的形状(Shape)或者改写形状。
为了解决这些情况,那么可以像创建模块一样来创建主题,并包含.csproj文件来编译主题所包含的代码。关于模块的开发,可以参见Walkthrough: Writing An Orchard ModuleCreating a Module with a Simple Text Editor

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。