七、制作主题（一） Writing a New Theme

主题定义了网站的外观。一个主题能重写任何模块提供的CSS,图片、布局、内容模板。另外，主题能包含重写了模块中的目标代码的代码。

本文展示了如何创建主题，打算介绍主题的开发并保持设计的简单。

开始之前你能根据已存在的父主题创建一个主题，Orchard提供一个简单使用的”TheThemeMacine“父主题。

 

Generating a New Theme

首先要启用Code Generation功能，然后在命令行窗口输入下面命令：

codegen theme MyFirstTheme 

命令为新主题MyFirstTheme创建了代码结构：

 

创建的文件仅是Theme.txt和Views/Web.config。Theme.txt是主题的manifest，Web.config是ASP.NET MVC渲染Views文件夹中的任何视图时需要的配置文件，很少会修改这个文件。

Creating Styles for Your Theme

在Styles文件夹下创建Site.css(可以命名为任何以.css为扩展名的任何文件名）

/*
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

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

这个文件定义了呈现web页面的基本结构。

 

Adding a Theme Image

可以提供一个主题的缩略图，会显示在管理面板，必须命名为Theme.png

 

 

Applying a New Theme

在管理面板-》主题管理中，启用这个主题。

 

现在可以打开网站查看新主题了。