三、自定义网站(三) Customizing Themes

Orchard的默认主题叫 Theme Machine,被设计为开发自定义新主题的起点。

下面介绍如何用Teheme Machine css(Site.css)创建自定义主题。

Introducing the Theme Machine

Theme Machine提供了可扩展,功能强大的基础主题。

 

Theme Machine的核心文件是布局页面(Layout.cshtml)和css(Site.css).

Overview of the Layout Page

这个布局页使用条件语句定义了多个zones。条件语句使仅在zones显示提供的内容。如果没有提供内容,显示面将不会包含这个zone。通过管理面板设置选择的zones提供内容。

Overview of the CSS Styles

CSS(Site.css)提供了细粒度的丰富的样式控制。CSS分组可以很容易的定位到你想自定义的样式。

image

Creating a Child Theme

可以由Theme Machine创建自己的主题。然而不应该直接编辑Theme Machine的文件。应该创建一个子主题,然后将文件复制到子主题中。子主题继承父主题时不更改就不需要复制任何文件,仅需要重写你主题中想自定义的文件。当子主题是当前正在使用的主题时,Orchard首先定位主题和解析文件,如果没有找到将到父主题中寻找文件。

创建子主题的过程如下:

  1. 使用命令行工具生成主题代码结构
  2. 从Theme Machine复制你想更改的文件到子主题中
  3. 编辑子主题中的文件
  4. 应用新主题

Generating the Theme Structure

要生成代码架构,需要使用 Code Generation功能,可以从Gallery中获得。

安装和激活code generation功能,通过命令行就能生成代码架构。

Open the Orchard command-line utility and enter the following command:

codegen theme MyTheme /BasedOn:TheThemeMachine

将生成下面的结构

创建的唯一文件是Theme.txt and Views\Web.config files。Theme.txt文件是主题的manifest,是控制面板中可以看到的信息,也是指定了父主题。Web.config是ASP.net MVC呈现Views目录中的Views的请求的配置文件,很少需要更改它。

Copying Files from the Theme Machine

本例中仅修改Site.css文件。从ThemeMachine\Styles目录中复制Site.css到MyTheme\Styles目录中。另外必须复制TheThemeMachine\Views\Layout.cshtml文件到Mytheme\Views目录中。

Customizing Theme Files

可以修改新主题中的文件,也可以根据需要新建文件。本例中仅修改文件,更改网页的背景色。

在Site.css中,修改如下body样式:

body { 
  font-size: 81.3%;
  color: #434343;
  background: #fff8dc; 
  font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
 
你可以提供一个主题的缩略图放在主题的根目录中,图片文件名为Theme.png,这个图片在管理面板主题管理中可以显示。

 

Applying Your New Theme

在主题管理面板中启用新建的主题。

posted @ 2012-03-20 15:33  commanderss  阅读(477)  评论(0编辑  收藏  举报