Skip to content

The default Orchard theme is called The Theme Machine. It is designed as a versatile starting point for customizing and developing themes.

默认的Orchard主题称为主题机器。它被设计为定制和开发主题的多功能起点。

This article introduces The Theme Machine and demonstrates how to create your own theme by customizing The Theme Machine style sheet (Site.css).

本文介绍主题机，并演示如何通过自定义主题机样式表（Site.css）来创建自己的主题。

Introducing the Theme Machine

介绍主题机器

The Theme Machine provides a flexible and powerful foundation for themes. The following image shows the file structure.

主题机为主题提供灵活而强大的基础。下图显示了文件结构。

The files at the heart of the Theme Machine are the layout page (Layout.cshtml) and style sheet (Site.css).

Theme Machine核心的文件是布局页面（Layout.cshtml）和样式表（Site.css）。

Overview of the Layout Page

布局页面概述

The layout page defines multiple zones. Each zone has a conditional statements, so that it renders if and only if it has content. If you don't provide the content, the rendered page will not contain the zone. The following images show the zones.

布局页面定义了多个区域。每个区域都有一个条件语句，因此当且仅当它具有内容时才会呈现。如果您不提供内容，则呈现的页面将不包含该区域。以下图像显示了区域。

All the zones in The Theme Machine

This live demo site shows the anatomy of a theme.

[此现场演示网站]（https://orchard-theme-machine-designer.azurewebsites.net/“主题机器设计师”）显示主题的解剖结构。

  • Zones and their children have an aqua background,

  • 区域和他们的孩子有水色背景，

  • widgets & content-items have a red border, and

  • 小部件和内容项目有一个红色边框，和

  • a gradual lightening from black indicates the topography.

  • 从黑色逐渐闪电表明地形。

  • You can click through the menu to view zones collapse when they lack content.

  • 您可以单击菜单以查看缺少内容时的区域折叠。

You will typically provide content for zones by using the Admin Panel.

您通常会使用管理面板为区域提供内容。

Overview of the CSS Styles

CSS样式概述

The style sheet (Site.css) for the Theme Machine provides an extensive set of styles for fine-grained control of the look and feel of your website. The style sheet groups styles to make it easier for you to locate a style that you want to customize. The following table shows the groupings and describes the type of styles available to you.

主题机器的样式表（Site.css）提供了一组广泛的样式，可以精细控制网站的外观。样式表将样式分组，以便您更轻松地找到要自定义的样式。下表显示了分组并描述了可用的样式类型。

Grouping | Description

分组|描述

--------- | ------------------------------------------------------------------------------------------------------------

  • | -------------------------------------------------- -------------------------------------------------- --------

General | Contains the default styles for the body, headings, lists, and text elements.

一般|包含正文，标题，列表和文本元素的默认样式。

Forms | Contains styles related to HTML forms, such as form, legend, fieldset, label, and input.

表格|包含与HTML表单相关的样式，例如表单，图例，字段集，标签和输入。

Structure | Contains page layout styles for each of the zones defined in the Theme Machine.

结构|包含主题计算机中定义的每个区域的页面布局样式。

Main | Contains styles defined for blog posts, comments, tagged search, and search results.

主要|包含为博客帖子，评论，标记搜索和搜索结果定义的样式。

Secondary | Contains additional layout styles for secondary content in aside zones, tripel zones, and footer quad zones.

中学|包含旁边区域，三重区域和页脚四区域中辅助内容的其他布局样式。

Widgets | Contains styles for selected widgets such as the search widget, edit-mode widgets, and content mode.

小部件|包含所选小部件的样式，例如搜索小部件，编辑模式小部件和内容模式。

Pager | Contains styles related to a pager shape.

寻呼机|包含与寻呼机形状相关的样式。

Misc | Contains styles for miscellaneous formatting, such as small, large, quiet, and highlight.

杂项|包含各种格式的样式，例如小，大，静音和高亮。

Creating a Child Theme

创建子主题

You can create your own theme by customizing the Theme Machine. However, you should not edit the Theme Machine files directly. Instead, you should create a child theme and copy any files that you intend to change into the child theme. You don't need to copy any files that you do not intend to change -- a child theme inherits from its parent theme, and overrides just the files from the parent theme that you have customized. When your child theme is active as the current theme, Orchard first looks to that theme to resolve files, and if not found, it will look to the parent (BaseTheme) to find the files instead (and so on... even your parent theme can have it's own parent).

您可以通过自定义主题计算机来创建自己的主题。但是，您不应直接编辑Theme Machine文件。相反，您应该创建子主题并将要更改的任何文件复制到子主题中。您不需要复制任何您不打算更改的文件 - 子主题从其父主题继承，并仅覆盖您自定义的父主题中的文件。当您的子主题作为当前主题处于活动状态时，Orchard首先查找该主题以解析文件，如果找不到，它将查找父（BaseTheme）以查找文件（依此类推...甚至您的父级）主题可以拥有它自己的父母）。

The process of creating a child theme is this:

创建子主题的过程如下：

  1. Generate the child theme's code structure using the command-line CodeGen utility.

1.使用命令行CodeGen实用程序生成子主题的代码结构。

  1. Copy the files you want to change from the Theme Machine to your child theme.

2.将要更改的文件从主题计算机复制到子主题。

  1. Edit the files in the new child theme.

3.编辑新子主题中的文件。

  1. Apply the new theme to your website.

4.将新主题应用到您的网站。

Generating the Theme Structure

生成主题结构

To generate the code structure for your new theme, we are going to use the Code Generation feature, which can be obtained from the Gallery > Modules page in the admin panel. Once you have installed and activated the code generation feature, you will be able to generate a new theme from the Orchard command-line. Refer to the Using the command-line interface topic if you need to know more about using commands in Orchard.

要为新主题生成代码结构，我们将使用代码生成功能，可以从管理面板中的 Gallery > Modules 页面获取。安装并激活代码生成功能后，您将能够从Orchard命令行生成新主题。如果您需要了解有关在Orchard中使用命令的更多信息，请参阅[使用命令行界面]（使用命令行界面）主题。

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

打开Orchard命令行实用程序并输入以下命令： 

codegen theme MyTheme /BasedOn:TheThemeMachine

If you are using Visual Studio for editing (or if you plan for your Theme to eventually contain code files too), you may also want specify the CreateProject and IncludeInSolution options as follows:

如果您使用Visual Studio进行编辑（或者如果您计划主题最终也包含代码文件），您可能还需要指定CreateProject和IncludeInSolution选项，如下所示： 

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

This line tells Orchard to create the code structure for a new theme, sets the name of the theme to MyTheme, and directs Orchard to base the theme on TheThemeMachine. The CodeGen command generates the following folder structure:

该行告诉Orchard为新主题创建代码结构，将主题名称设置为_MyTheme_，并指示Orchard将主题基于_TheThemeMachine_。 CodeGen命令生成以下文件夹结构：

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

创建的唯一文件是Theme.txt和Views \ Web.config文件。 Theme.txt文件（主题清单）是管理员面板查找主题名称等信息的位置。这也是指定BaseTheme的地方。 Web.config是ASP.NET MVC用于呈现放置在Views文件夹中的任何视图所需的配置文件。您很少需要在Web.config文件中进行更改。

Copying Files from the Theme Machine

从主题计算机复制文件

To keep this example simple, the only file you will customize will be the Site.css file. Copy the Site.css file from TheThemeMachine\Styles folder to the MyTheme\Styles folder.

为了简化此示例，您将自定义的唯一文件是Site.css文件。将Site.css文件从TheThemeMachine \ Styles文件夹复制到MyTheme \ Styles文件夹。

Currently, you must also copy the TheThemeMachine\Views\Layout.cshtml file to the MyTheme\Views folder. (It's anticipated that this step will not be required in later releases.)

目前，您还必须将TheThemeMachine \ Views \ Layout.cshtml文件复制到MyTheme \ Views文件夹。 （预计在以后的版本中不需要此步骤。）

Customizing Theme Files

自定义主题文件

After copying the files you want to customize into your new theme folder, you can make changes to those files. You can also create new files as needed. In this example, the only change you will make is the background color for the body of the page.

将要自定义的文件复制到新主题文件夹后，可以对这些文件进行更改。您还可以根据需要创建新文件。在此示例中，您将进行的唯一更改是页面正文的背景颜色。

In the Site.css file that you copied, find the body style in the General section. Then change the background color from #fff to #fff8dc as shown in the following example:

在您复制的Site.css文件中，在 General 部分中找到 body 样式。然后将背景颜色从＃fff 更改为＃fff8dc ，如以下示例所示： 

body {

  font-size: 81.3%;

  color: #434343;

  background: #fff8dc;

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

}

This will change the background color to cornsilk, which is a light yellow.

这会将背景颜色改为cornsilk，这是一种淡黄色。

You can also provide a thumbnail image of your new theme in the theme's root folder. The image file must be named Theme.png. The image will be displayed in the Admin Panel to help users select a theme.

您还可以在主题的根文件夹中提供新主题的缩略图。图像文件必须命名为Theme.png。该图像将显示在管理面板中，以帮助用户选择主题。

The following image was copied from TheThemeMachine and changed to show the light-yellow background color.

以下图像是从TheThemeMachine复制并更改为显示浅黄色背景颜色。

Applying Your New Theme

应用你的新主题

In the Admin Panel, under Themes, select Installed. The Installed tab will display the new theme under the Available Themes:

在管理员面板中，在主题下，选择已安装。 Installed 选项卡将在 Available Themes 下显示新主题：

Click Set Current. The Installed tab is redisplayed showing MyTheme as the current theme.

单击设置当前。重新显示已安装选项卡，显示 MyTheme 作为当前主题。

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

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

Change History

改变历史

  • Updates for Orchard 1.8

  • Orchard 1.8的更新 *

    • 9-8-14: Updated screen shots for Customizing Default Theme.