请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

创建新的主题(Theme)


 
英文原文:http://docs.orchardproject.net/Documentation/Writing-a-new-theme
 
Orchard主题用于定义网站的外观和个性化设置。在主题里面,可以覆盖任何Orchard模块的样式表,图片,布局和内容模板。此外,主题可以包含代码来改写一个模块中的已有的代码。
本文演示了如何从头开始创建一个主题。作为一个入门篇主题开发介绍,这里的设计将保持简要。
除此之外,你可以通过扩展一个父主题(a parent theme)来实现主题的创建。Orchard提供了一个叫”TheThemeMachine”的主题,它是一个专门为开发自定义主题而设计的一个父主题。如果需要了解更多的父主题信息,请查看Customizing the Default Theme
 

创建一个新的主题

在你开始使用命令行codegen去创建一个新的主题之前,你必须下载在并开启Code Generation功能。这个功能默认是没有安装开启的。更多信息请查看Command-line code generation
你可以用命令行方式并通过以下命令去创建一个新的主题:
codegen theme MyFirstTheme

codegen命令会创建一个叫MyFirstTheme的新主题,他的目录结构如下:

在这个结构里面,只自动创建了两个新文件,分别是:Theme.txt和Views\Web.config。Theme.txt文件是这个主题的清单文件,后台管理面板(dashboard)可以通过这个文件得到主题的相关信息,比如主题的名称等。而Web.config是提供给ASP.NET MVC,用来控制Views文件夹下面的视图文件的显示。一般情况下,你很少需要更改Web.config文件。
 

为主题创建样式

在Style文件夹里面,创建一个样式文件并命名为Site.css。(你可以任意命名这个文件,只要保持是.css扩展名即可。)
以下是一个样式例子。(例子已经精简化了)。关于样式结构和其他样式建议,请参照UI Guidelines for Theme Authors
/*Theme: My First ThemeAuthor: Copyright: *//* Colors PaletteBackground: #d3d3d3Text: #000Main Accent: #999Links: #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***************************************************************/
 

为主题加入布局

 
在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>
 
该文件定义了呈现网页的基本结构。 如需更多关于布局页的详细信息,请参阅Template Files and their Locations
 

加入主题缩略图

 
你可以为新创建的主题提供一个缩略图,他将会显示在后台管理面板中。这个缩略图必须命名为Theme.png,并且放在主题的根目录下面。如下:
 

 

应用新主题



 
应用一个主题很简单,在Dashboard里面点击Theme菜单,会显示所有可用的主题列表。然后在Available下面点击想要应用的主题的Set Current按钮即可。

 
应用后页面将会刷新,将会看到MyFirstTheme已经被应用为当前主题了。
你可以去网站看看新的主题是否已经起作用。

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。