創(chuàng)建自己的主題(theme)

寫一個新的主題

This topic was updated for the Orchard 1.0 release.

一個Orchard主題定義了一個應用程序的顯示通常用來訂制一個Orchard網(wǎng)站的個性化顯示。一個主題可以通過模塊重寫樣式表，圖片，層或者內(nèi)容模板。另外，一個主題可以包含重寫代碼。

這篇文章將顯示如何創(chuàng)建一個主題和主題開發(fā)的簡介

為了不盲目下手，我們可以先嘗試通過在現(xiàn)有主題上的更改來實現(xiàn)創(chuàng)建一個新的主題。Orchard提供了一個叫做"TheThemeMachine"的主題。它可以很容易的被用作父主題。想了解更多關于使用父主題的信息可以參見Customizing the Default Theme.

生成一個新的主題

你需要先下載并安裝Code Generation才可以使用代碼生成工具。這個工具通常是默認安裝的，想知道更多關于Command-line code generation的信息可以查看Command-line code generation.

想要通過代碼生成工具生成一個新主題的代碼結構你需要打開 Orchard command-line 工具。然后輸入以下命令:

codegen theme MyFirstTheme

codegen 命令將會創(chuàng)建主題的代碼結構并且給這個主題命名為 MyFirstTheme.代碼生成工具將生成一下文件夾。

theme_structure.PNG

創(chuàng)建的文件只有 Theme.txt 和 Views\Web.config Theme.txt 是這個主題的清單。Web.config 是一個配置文件供ASP.NET MVC 渲染視圖用。 你基本上不需要修改這些配置文件。

創(chuàng)建主題的樣式

在 Styles文件夾中,創(chuàng)建一個名稱為Site.css的文件. (你也可以取任何其他的名字，只要擴展名為.css)

下面的例子展示了一個樣式表。想得到關于這個樣式表的更多結構信息清參見 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)建一個布局

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

這個文件定義了基本生成網(wǎng)頁的基本結構。想獲取更多有關布局文件的信息請參見 Template Files and their Locations.

添加一個主題圖片

你可以提供一個縮圖圖片代表你的新主題。它將顯示在 Admin Panel中。 圖片文件必須叫做Theme.png 并且它必須被放置在主題的根目錄下。這樣這個縮略圖將能代表我們新建的主題。

NewTheme2_thumbnail.png

提交新建的主題

要提交一個新的主題, 在 Dashboard中，點擊 Themes. 在 Available下，選擇新主題并且點擊 Set Current.

themes_newThemeImage_675.png

Manage Themes 管理頁面將重新顯示 MyFirstTheme 作為當前主題頁。

ok，現(xiàn)在你可以看看你的新主題的樣子了。

翻譯僅供學習之用，如有缺漏請不吝指正。鑒于能力有限定有諸多曲解或不完整的地方，請海涵。

個人blog地址：http://www.cnblogs.com/falcon-fei/

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25贊 708
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,699評論 19贊 139
  • 一連幾天陰雨，按說夏天，應該喜歡涼爽，可風一刮，有點冷，象骨縫里有風的感覺。總希望雨會停，風不在吹，不是別的什么，...
    悲傷時下雪閱讀 540評論 2贊 5
  • 大眾飲品黑咖啡 去越南旅游的人如果有一個心愿單的話，那么上面一定有喝一杯滴漏咖啡。滴漏式咖啡是法國殖民時期留下的最...
    蔓延022閱讀 319評論 0贊 0
  • 我可能是第四期讀寫班的NO.one了，當然是指年齡。掐指算來已經(jīng)工作31年了，雖然工作順利，平平穩(wěn)穩(wěn)，但回顧來路...
    fieldsky閱讀 201評論 0贊 0

友情鏈接更多精彩內(nèi)容