自定义默认主题

Orchard默认的主题叫做The Theme Machine。这是一个非常简单，易于二次开发的主题。

这篇文章，会讲述The Theme Machine主题以及如何基于该主题创建自己的主题。

the Theme Machine主题

The Theme Machine主题提供了一个主题需要的基础文件及结构：

对于The Theme Machine主题， layout 页面 (Layout.cshtml) 和style sheet (Site.css)是最重要的两个文件。

Layout页面

Layout页面将整个页面分成了多个小块。每个小块都包含了自己的内容（如果没有内容，就不会渲染），下面的图片，显示了各个块的分布：

你能够在后台控制块中的内容

CSS 样式

Site.css文件提供了一套方便控制前台页面显示的样式。Site.css文件的样式都进行了分组，以方便你进行自定义。下面的表格对各个分组进行了说明：

Grouping	Description
General	提供了body、headings、lists、text元素默认的样式。
Forms	提供了HTML表单的样式，比如 form, legend, fieldset, label, 和input.
Structure	提供了各个块的样式。
Main	提供了博客、评论、标签、查询控件的样式。
Secondary	提供aside zones, tripel zones, 和 footer quad zones的样式
Widgets	提供了各种部件的样式，比如search widget, edit-mode widgets和content mode。
Pager	提供了分页部件的样式
Misc	其他了一些其他的样式，比如：small, large, quiet, 和 highlight。

创建子主题

你可以自定义The Theme Machine主题，但是，并不是直接对其进行修改，而是创建一个基于The Theme Machine主题的自定义主题。你只需要将需要更改的文件拷贝到子主题中，然后更改，如果子主题作为当前主题，Orchard会首先在子主题中获取需要的文件，如果不存在，会在父主题中获取。

创建自主题的步骤如下：

1. 通过CodeGen命令创建自主题。
2. 将需要更改的文件，由The Theme Machine主题中复制到子主题中。
3. 在子主题中，对文件进行更改
4. 将子主题设置为当前主题

   生成子主题：

   首先，你需要启用Code Generation特性。然后进入控制台输入相应的命令。详情请见： Using the command-line interface 。

   进入控制台，跳转到Orchard站点对于的bin目录下面，输入Orchar.exe，进入Orchard控制台，然后输入下面的命令，创建MyTheme子主题：

   codegen theme MyTheme /BasedOn:TheThemeMachine

   如果你使用的Visual Studio，想将主题直接加入项目中，需要在加上CreateProject 和IncludeInSolution 选项：

   codegen theme MyTheme /BasedOn:TheThemeMachine /CreateProject:true /IncludeInSolution:true

   我们可以看到，在我们的站点的Themes文件夹中，多了一个MyTheme文件夹：

   

   它里面只有Theme.txt 和 Views\Web.config 两个文件。 Theme.txt文件是对主题的描述，你可以在后台的主题管理页面看到，其中有个BaseTheme属性，表明了它的付主题是哪一个。Web.config 是ASP.NET MVC的配置文件，你一般不需要编辑它。

   从the Theme Machine中复制需要更改的文件

   我们将Site.css文件和Layout.cshtml文件复制到MyTheme主题中，注意，复制过来后，目录结构要一致，即Site.css文件要复制到MyTheme\Styles 文件夹中，Layout.cshtml文件要复制到MyTheme\Views 文件夹中。

   自定义主题文件：

   将需要更改的文件复制到子主题以后，你就可以进行更改了，当然，也可以在子主题中任意添加、删除文件

   比如，我们更改默认的Body背景颜色。

   打开Site.css file文件，找到body节点，将背景色由#fff 改为 #fff8dc :

   body {

   font-size: 81.3%;

   color: #434343;

   background: #fff8dc;

   font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;

   }

   你可以创建一张缩略图，命名为Theme.png，放在子主题的根目录下，这样，在主题管理页面，你就能看到该主题的缩略图。

   

   使用你的主题

   进入后台主题管理页面，你就能看到你创建的MyTheme主题了

   

   点击"设为当前"，刷新主页，你就可以看到效果了。