寫(xiě)一個(gè)新的主題
This topic was updated for the Orchard 1.0 release.
一個(gè)Orchard主題定義了一個(gè)應(yīng)用程序的顯示通常用來(lái)訂制一個(gè)Orchard網(wǎng)站的個(gè)性化顯示。一個(gè)主題可以通過(guò)模塊重寫(xiě)樣式表，圖片，層或者內(nèi)容模板。另外，一個(gè)主題可以包含重寫(xiě)代碼。
這篇文章將顯示如何創(chuàng)建一個(gè)主題和主題開(kāi)發(fā)的簡(jiǎn)介
為了不盲目下手，我們可以先嘗試通過(guò)在現(xiàn)有主題上的更改來(lái)實(shí)現(xiàn)創(chuàng)建一個(gè)新的主題。Orchard提供了一個(gè)叫做"TheThemeMachine"的主題。它可以很容易的被用作父主題。想了解更多關(guān)于使用父主題的信息可以參見(jiàn)Customizing the Default Theme.
生成一個(gè)新的主題
你需要先下載并安裝Code Generation才可以使用代碼生成工具。這個(gè)工具通常是默認(rèn)安裝的，想知道更多關(guān)于Command-line code generation的信息可以查看Command-line code generation.
想要通過(guò)代碼生成工具生成一個(gè)新主題的代碼結(jié)構(gòu)你需要打開(kāi) Orchard command-line 工具。然后輸入以下命令:
codegen theme MyFirstTheme
codegen 命令將會(huì)創(chuàng)建主題的代碼結(jié)構(gòu)并且給這個(gè)主題命名為 MyFirstTheme.代碼生成工具將生成一下文件夾。
創(chuàng)建的文件只有 Theme.txt 和 Views\Web.config Theme.txt 是這個(gè)主題的清單。Web.config 是一個(gè)配置文件供ASP.NET MVC 渲染視圖用。 你基本上不需要修改這些配置文件。
創(chuàng)建主題的樣式
在 Styles文件夾中,創(chuàng)建一個(gè)名稱(chēng)為Site.css的文件. (你也可以取任何其他的名字，只要擴(kuò)展名為.css)
下面的例子展示了一個(gè)樣式表。想得到關(guān)于這個(gè)樣式表的更多結(jié)構(gòu)信息清參見(jiàn) 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
***************************************************************/
為你的主題創(chuàng)建一個(gè)布局
在Views文件夾中，添加一個(gè)布局文件 (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>
這個(gè)文件定義了基本生成網(wǎng)頁(yè)的基本結(jié)構(gòu)。想獲取更多有關(guān)布局文件的信息請(qǐng)參見(jiàn) Template Files and their Locations.
添加一個(gè)主題圖片
你可以提供一個(gè)縮圖圖片代表你的新主題。它將顯示在 Admin Panel中。 圖片文件必須叫做Theme.png 并且它必須被放置在主題的根目錄下。這樣這個(gè)縮略圖將能代表我們新建的主題。
提交新建的主題
要提交一個(gè)新的主題, 在 Dashboard中，點(diǎn)擊 Themes. 在 Available下，選擇新主題并且點(diǎn)擊 Set Current.
Manage Themes 管理頁(yè)面將重新顯示 MyFirstTheme 作為當(dāng)前主題頁(yè)。
ok，現(xiàn)在你可以看看你的新主題的樣子了。
翻譯僅供學(xué)習(xí)之用，如有缺漏請(qǐng)不吝指正。鑒于能力有限定有諸多曲解或不完整的地方，請(qǐng)海涵。
個(gè)人blog地址：http://www.cnblogs.com/falcon-fei/
