七、制作主题(一) 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
在管理面板-》主题管理中,启用这个主题。
现在可以打开网站查看新主题了。