[译]：Orchard网站定制——定制主题

标签： Orchard, 官方教程, 中文翻译

2016年11月5日 22:30:00

博客分类: 官方教程

原文链接：Customizing Themes

Orchard中的默认主题叫 The Theme Machine 。它被设计为多功能的，可以从它来进行定制和开发主题。

本文将介绍主题 The Theme Machine 以及示范如何通过自定义The Theme Machine的样式表（Site.css）来创建自己的主题。

The Theme Machine主题介绍

The Theme Machine为主题设计提供了灵活且强大的基础。下图是它的文件结构：

The Theme Machine中的核心文件是布局页面(Layout.cshtml)和样式表(Site.css)。

布局页面概览

布局页面定义多个区域。每个区域都有一个条件语句，所以只有当它含有内容时，他才会呈现出来。如果区域内没有提供内容，显示的页面将不会包含这个区域。下图为布局中的区域：

All the zones in The Theme Machine

注：官方文档此处本有一个示例来展示各个区域部分，但给出的示例链接已经失效，故此处给出官方的Demo网站：Try Orchard。

关于区域的内容则在控制面板中进行添加。

CSS样式概览

The Theme Machine的样式表(Site.css)提供了大量的样式用于更详细的控制网站的外观。样式表中对样式进行了分组，以便于你自定义时更容易地定位样式。下表显示了分组情况以及相应类型样式的描述：

分组-Grouping	描述-Description
General	包含 body, headings, lists, 和 text elements部分的默认样式。
Forms	包含与HTML表单有关的样式，如form, legend, fieldset, label, 和 input。
Structure	包含The Theme Machine中页面布局的每个区域的样式定义
Main	包含blog posts, comments, tagged search, 和 search results的样式定义
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首先查找当前主题文件，如果没有找到，然后去查找父级主题（BaseTheme）——甚至你的每一个父主题还可以有自己的父主题，系统会一层一层查。

创建子主题步骤如下：

用command-line CodeGen工具生成子主题代码结构
从The Theme Machine主题中拷贝需要修改的内容到子主题
编辑子主题的文件
应用新主题到网站

生成主题结构

要为新主题生成代码结构，我们会用到 Code Generation 功能 —— 在控制面板中点击模块就可以看到此功能包含在功能标签下。一旦启用code generation功能后，就可以在Orchard中用命令行生成新主题了。关于更多命令行的内容见：原文：Using the command-line interface、译文：使用命令行界面。

打开Orchard命令行工具，然后输入以下命令：

codegen theme MyTheme /BasedOn:TheThemeMachine

如果你要使用Visual Studio来编辑（或你想让你的主题最终含有代码文件），你或许需要指定CreateProject和IncludeInSolution选项，命令如下：

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

上述命令告诉Orchard创建新主题的代码结构，并将主题名称设为 MyTheme, 并指明其父主题为 TheThemeMachine。最终CodeGen命令将生成如下文件结构：

其中只创建了Theme.txt和Views\Web.config文件。控制面板通过Theme.txt文件（主题清单）来查询信息，如主题名称。这里面同样制定了父主题。 Web.config是ASP.NET MVC渲染Views文件夹中页面所需的配置文件。你几乎不需要修改Web.config文件。

从The Theme Machine中拷贝文件

为了让示例较为简单，你只需要自定义 Site.css 文件。从TheThemeMachine\Styles文件夹中将Site.css文件拷贝到MyTheme\Styles文件夹中。

你还需要拷贝TheThemeMachine\Views\Layout.cshtml文件到MyTheme\Views文件夹中。——新版本中，此步骤非必需。

自定义主题文件

在你将要修改的文件拷贝到新主题文件夹后，你就可以进行修改了。你也可以按需创建一些新文件。在本示例中，我们仅仅修改页面的背景颜色。

在拷贝过来的 Site.css 文件中，查找General部分的body样式。然后，将背景颜色从#fff修改为#fff8dc，代码如下：

body { 
  font-size: 81.3%;
  color: #434343;
  background: #fff8dc; 
  font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

至此，背景颜色将修改为玉米丝色-cornsilk——淡黄色。

你也可以在主题的根文件夹下为新主题添加一个缩略图。其名称必须为Theme.png。此图片会在控制面板中显示，以便于用户选择主题。

下图为从TheThemeMachine拷贝的图片，然后将背景色调为淡黄色：

应用新主题

在控制面板中，点击主题，切换到已安装标签。在已安装标签下，将会在可用下面显示新主题。：

点击设为当前。已安装标签会刷新显示——MyTheme显示为当前主题。

至此，新主题已经在网站中使用。

译：奇葩史

奇葩史的奇葩事