Skip to content

This topic was updated for the Orchard 1.0 release.

本主题已针对Orchard 1.0版本进行了更新。

An Orchard theme defines an application's appearance and is used to customize the look and feel of an Orchard website. A theme can override the style sheets, images, layouts, or content templates provided by any Orchard module. In addition, a theme can contain code that overrides targeted code in a module.

Orchard主题定义应用程序的外观，用于自定义Orchard网站的外观。主题可以覆盖任何Orchard模块提供的样式表，图像，布局或内容模板。此外，主题可以包含覆盖模块中目标代码的代码。

This article shows how to create a theme from scratch. It is intended to be an introduction to theme development and has been kept simple by design.

本文介绍如何从头开始创建主题。它旨在成为主题开发的介绍，并且设计简单。

Instead of starting from scratch, you can create a theme by customizing an existing theme (a parent theme). Orchard provides a theme named "TheThemeMachine" that is designed as an easy-to-use parent for custom themes. For more information about using a parent theme, see Customizing the Default Theme.

您可以通过自定义现有主题（父主题）来创建主题，而不是从头开始。 Orchard提供了一个名为“TheThemeMachine”的主题，该主题被设计为一个易于使用的自定义主题父级。有关使用父主题的更多信息，请参阅[自定义默认主题]（自定义默认主题）。

Generating a New Theme

生成一个新主题

Before you can use the command-line command codegen to generate the code structure for you new theme, you must download and enable the Code Generation feature. This feature is not installed to Orchard by default. For more information, see Command-line code generation.

在使用命令行命令_codegen_为新主题生成代码结构之前，必须下载并启用代码生成功能。默认情况下，此功能未安装到Orchard。有关更多信息，请参阅[命令行代码生成]（命令行脚手架）。

To generate the code structure for a new theme, open the Orchard command-line utility and enter the following command:

要为新主题生成代码结构，请打开Orchard命令行实用程序并输入以下命令： 

codegen theme MyFirstTheme

The codegen command creates the code structure for a new theme and sets the name of the theme to MyFirstTheme. The command generates the following folder structure:

codegen命令为新主题创建代码结构，并将主题名称设置为_MyFirstTheme_。该命令生成以下文件夹结构：

The only files created are the Theme.txt and Views\Web.config files. The Theme.txt file is the theme manifest and is where the Admin Panel (dashboard) looks for information such as the name of the theme. Web.config is a configuration file that ASP.NET MVC requires for rendering any views that are in the Views folder. You seldom have to make changes in the Web.config file.

创建的唯一文件是_Theme.txt_和_Views\Web.config_文件。 _Theme.txt_文件是主题清单，管理面板（仪表板）查找主题名称等信息。 _Web.config_是ASP.NET MVC用于呈现_Views_文件夹中的任何视图所需的配置文件。您很少需要在_Web.config_文件中进行更改。

Creating Styles for Your Theme

为您的主题创建样式

In the Styles folder, create a file named Site.css. (You can name the file anything you want as long as it has a .css extension.)

在_Styles_文件夹中，创建名为_Site.css_的文件。 （只要具有_.css_扩展名，您就可以将文件命名为任何名称。）

The following example shows a stylesheet. (It has been kept simple for this example.) For information about the structure of this stylesheet and other CSS recommendations, see UI Guidelines for Theme Authors.

以下示例显示样式表。 （此示例一直保持简单。）有关此样式表结构和其他CSS建议的信息，请参阅[主题作者的UI指南]（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
***************************************************************/

Adding a Layout to Your Theme

为主题添加布局

In the Views folder, add a layout file (Layout.cshtml) and add the following code and markup:

在_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>

This file defines the basic structure of the rendered web page. For more information about layout pages, see Template Files and their Locations.

此文件定义呈现的网页的基本结构。有关布局页面的更多信息，请参阅[模板文件及其位置]（模板文件及其位置）。

Adding a Theme Image

添加主题图像

You can provide a thumbnail image that represents your new theme, which will be displayed in the Admin Panel. The image file must be named Theme.png and it must be placed in the theme's root folder. The following image represents this new theme.

您可以提供代表新主题的缩略图图像，该图像将显示在管理面板中。图像文件必须命名为_Theme.png_，并且必须放在主题的根文件夹中。下图代表了这个新主题。

Applying a New Theme

应用新主题

To apply a theme, in the Dashboard, click Themes. Under Available, select the new theme and then click Set Current.

要应用主题，请在仪表板中单击主题。在 Available 下，选择新主题，然后单击 Set Current 。

The Manage Themes page is redisplayed showing MyFirstTheme as the current theme.

重新显示管理主题页面，显示 MyFirstTheme 作为当前主题。

You can now go to your website to see the new theme in action.

您现在可以访问您的网站以查看新主题的实际效果。