写一个新的主题
This topic was updated for the Orchard 1.0 release.
一个Orchard主题定义了一个应用程序的显示通常用来订制一个Orchard网站的个性化显示。一个主题可以通过模块重写样式表，图片，层或者内容模板。另外，一个主题可以包含重写代码。
这篇文章将显示如何创建一个主题和主题开发的简介
为了不盲目下手，我们可以先尝试通过在现有主题上的更改来实现创建一个新的主题。Orchard提供了一个叫做"TheThemeMachine"的主题。它可以很容易的被用作父主题。想了解更多关于使用父主题的信息可以参见Customizing the Default Theme.
生成一个新的主题
你需要先下载并安装Code Generation才可以使用代码生成工具。这个工具通常是默认安装的，想知道更多关于Command-line code generation的信息可以查看Command-line code generation.
想要通过代码生成工具生成一个新主题的代码结构你需要打开 Orchard command-line 工具。然后输入以下命令:
codegen theme MyFirstTheme
codegen 命令将会创建主题的代码结构并且给这个主题命名为 MyFirstTheme.代码生成工具将生成一下文件夹。
创建的文件只有 Theme.txt 和 Views\Web.config Theme.txt 是这个主题的清单。Web.config 是一个配置文件供ASP.NET MVC 渲染视图用。 你基本上不需要修改这些配置文件。
创建主题的样式
在 Styles文件夹中,创建一个名称为Site.css的文件. (你也可以取任何其他的名字，只要扩展名为.css)
下面的例子展示了一个样式表。想得到关于这个样式表的更多结构信息清参见 UI Guidelines for Theme Authors.
/*
Theme: My First Theme
Author:
Copyright:
*/
/* Colors Palette
Background: #d3d3d3
Text: #000
Main Accent: #999
Links: #c03
*/
/* Reset
***************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
header, footer, aside, nav, article { display: block; }
/* Clearing Float
***************************************************************/
group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.group {display: inline-block;} /* for IE/Mac */
/* General
***************************************************************/
body {
font: normal 100% Segoe UI,Trebuchet,Arial,Sans-Serif;
height: 100%;
text-align:left;
color:#000;
background: #d3d3d3;
}
/* Headings */
h1,h2,h3,h4,h5,h6,legend {font-weight:normal; font-style: normal;}
h1 {font-size: 160%;}
h2 {font-size: 145%;}
h3 {font-size: 130%;}
h4 {font-size: 120%;}
h5 {font-size: 105%;}
p { margin: 0 0 1em; line-height: 1.538em; }
p img.left { float: left; margin: 0.923em 0.923em 0.923em 0; padding: 0; }
p img.right { float: right; margin: 0.923em 0 0.923em 0.923em; }
a:focus,
a:hover { text-decoration: underline; }
a { color: #c03; text-decoration: none; }
#header {
background:#000;
color: #000;
width:100%;
height:50px;
margin-bottom:40px;
}
#branding h1{
font-size: 140%;
color:#fff;
padding:8px 0 0 40px;
}
/* Structure
***************************************************************/
#layout-navigation
{
width: 960px;
margin: 0 auto;
display: block;
border-bottom: 1px solid #dbdbdb;
}
nav ul
{
padding: 0px;
margin: 0px;
}
nav ul li
{
border:1px solid #dbdbdb;
background:#f6f6f6;
display:block;
float:left;
margin:0 2px -1px 0;
}
nav ul li.current
{
border-bottom: 1px solid #fff;
background:#fff;
}
nav ul a
{
padding:0 18px;
display:block;
float:left;
color: #333;
font-size: 1.077em;
text-decoration:none;
line-height:24px;
}
/* Main
***************************************************************/
#main {
margin:0 auto 40px;
width:600px;
}
/* Secondary
***************************************************************/
/* Forms
***************************************************************/
/* Misc
***************************************************************/
为你的主题创建一个布局
在Views文件夹中，添加一个布局文件 (Layout.cshtml) 并且添加如下代码：
@{
Script.Require("ShapesBase");
Style.Include("site.css");
}
<div id="header">
<div id="branding">
<h1>@T("Welcome to the Playground")</h1>
</div>
</div>
<div id="layout-navigation" class="group">
@Display(Model.Navigation)
</div>
<div id="main">
@Display(Model.Content)
</div>
这个文件定义了基本生成网页的基本结构。想获取更多有关布局文件的信息请参见 Template Files and their Locations.
添加一个主题图片
你可以提供一个缩图图片代表你的新主题。它将显示在 Admin Panel中。 图片文件必须叫做Theme.png 并且它必须被放置在主题的根目录下。这样这个缩略图将能代表我们新建的主题。
提交新建的主题
要提交一个新的主题, 在 Dashboard中，点击 Themes. 在 Available下，选择新主题并且点击 Set Current.
Manage Themes 管理页面将重新显示 MyFirstTheme 作为当前主题页。
ok，现在你可以看看你的新主题的样子了。
翻译仅供学习之用，如有缺漏请不吝指正。鉴于能力有限定有诸多曲解或不完整的地方，请海涵。
个人blog地址：http://www.cnblogs.com/falcon-fei/
