Anatomy of a theme（剖析主題）

主題使得Orchard用戶可以按照他們的需要和設(shè)計(jì)目標(biāo)自定義渲染網(wǎng)站。模板可以通過Orchard模塊執(zhí)行重寫樣式表，圖片，布局或者任何內(nèi)容模板的目標(biāo)。

主題在哪里

一個(gè)主題是一個(gè)包含一套合適文件的文件夾。這個(gè)文件夾必須處在位于你網(wǎng)站根目錄的Themes文件夾下面。

TheThemeMachine

名稱叫做TheThemeMachine的主題是一個(gè)Orchard內(nèi)置主題。你可以通過這個(gè)主題來學(xué)習(xí)Orchard的主題相關(guān)知識(shí)。同一些主題一樣，你可以在 Themes 文件夾下找到它。

TheThemeMachine.PNG

TheThemeMachine 被設(shè)計(jì)為一個(gè)干凈的，時(shí)尚的主題。并且是一個(gè)不錯(cuò)的學(xué)些如何訂制或開發(fā)新主題的切入點(diǎn)。這篇文章將使用此主題作為例子。

主題的組成結(jié)構(gòu)

這部分將描述一個(gè)主題的必備和可選元素。

描述清單

一個(gè)有效的主題必須包含一個(gè)描述清單（mainfest）。描述清單是一個(gè)叫做 Theme.txt 的文本文件，你可以在該主題的根目錄下找到它。下面是 TheThemeMachine 的描述清單（mainfest）：

Name: The Theme Machine
Author: jowall, mibach, loudej, heskew
Description: Orchard Theme Machine is a flexible multi-zone theme that provides a solid foundation to build your site. It features 20 collapsible widget zones and is flexible enough to cover a wide range of layouts.
Version: 1.8.1
Tags: Awesome
Website: http://orchardproject.net
Zones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer

這個(gè)文件的開始部分給了主題一個(gè)有好的名稱，描述，作者，和標(biāo)簽。Zones字段提供了一個(gè)所有可以被添加到模板或?qū)拥目臻g（zones）名稱。各種各樣的界面元素可以被注入到空間（zones）中，但是最常用的是部件（widgets）。不是所有的空間都需要列在清單文件中，只有那些打算使用的部件（widgets）。

TheThemeMachineZoneScreenshot.PNG

這個(gè)圖例展示了19個(gè)空間（zones），這比你一般情況下站點(diǎn)所用到的要多。這些空間包header和footer，他們是位于頁面頂部和底部的區(qū)域。這里有一個(gè)導(dǎo)航空間，通常情況下導(dǎo)航菜單會(huì)插入到這個(gè)空間中。Featured空間通常情況下你會(huì)放一個(gè)網(wǎng)站的banner在此處。BeforeMain和AfterMain在main zones的上面和下面。AsideFirst 和 AsideSecond都是位于邊上的工具條通常位于main content的左邊和右邊。在頁面的正中央有一個(gè)Messages 空間是用來發(fā)送通知的。跟著BeforeContent的是Content和 AfterContent空間。在頁面的底部是TripelFirst，TripelSecond, 和 TripelThird。如果你想有3列在底部的話你可以使用他們。FooterQuad*空間是當(dāng)你希望有4列的時(shí)候使用的。

所有在TheThemeMachine主題中的空間都是可裝配的，這意味著將只渲染那些包含內(nèi)容的空間。

圖標(biāo)或者縮略圖

所有的主題都應(yīng)該包含一個(gè) Theme.png文件。這個(gè)圖片應(yīng)該至少為 400x400像素并且代表這個(gè)主題在主題畫廊（theme gallery）或者在主題管理頁面中顯示。它通常是一個(gè)網(wǎng)站頁面所用主題的縮略圖。

部件空間預(yù)覽

部件（widget）區(qū)域的預(yù)覽圖片可以被添加到主題中。這個(gè)圖片應(yīng)當(dāng)被放置在主題的根目錄中，并且名稱需要為ThemeZonePreview.png。這應(yīng)當(dāng)是一個(gè)400像素寬的顯示不同空間和他們名稱的圖片。你可以在TheThemeMachine中找到例子。

WidgetZonePreview.PNG

靜態(tài)資源

一個(gè)主題通常包含許多靜態(tài)資源，不如 CSS 樣式文件，js，或者圖片。這些文件必須在下面文件夾中:

  • CSS 文件必須在該主題的 \Styles 文件夾中。
  • js文件應(yīng)當(dāng)在該主題的 \Scripts 文件夾中。任何放在這個(gè)文件夾下的js文件應(yīng)當(dāng)是僅和你的主題有關(guān)系的自定義腳本文件，不應(yīng)當(dāng)是可復(fù)用的?？蓮?fù)用的腳本文件應(yīng)當(dāng)包含在一個(gè)不同的模塊中。比如jQuery模塊。
  • Images should be in \Content\Images folders. If your theme contains few images,
  • 圖片應(yīng)當(dāng)被放在\Content\Images文件夾中。如果你的主題包含少量圖片，可以將他們保存在同一層。但是，如果你有大量的圖片，推薦你將他們組織在子文件中。

Note 啟用文件，每個(gè)包含靜態(tài)資源的文件夾，比如樣式文件，圖片文件，js都需要包含一個(gè)web.config 文件，它包含如下內(nèi)容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>

    <handlers accessPolicy="Script,Read">
      <!--
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
      -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

文檔

Document.cshtml文件通常不會(huì)在主題中被找到，因?yàn)樾枰膭?dòng)這個(gè)文件的情況很少。如文檔類型（DOCTYPE）、<head>標(biāo)簽等。主題中如果不包含此文件，默認(rèn)調(diào)用~\Core\Shapes\Views\下的Document.cshtml文件，當(dāng)然我們也可以把這個(gè)文件復(fù)制到主題的Views目錄下，來重寫文檔定義

布局

布局是body元素中的最外層形狀。舉個(gè)例子來說，這是一個(gè)標(biāo)準(zhǔn)的定義一個(gè)主組件區(qū)域的位置。你可以在這篇文章中的Markup部分閱讀到有關(guān)markup在布局中的細(xì)節(jié)。

一個(gè)主題可以包含許多布局文件，即便如此當(dāng)前布局僅能有一個(gè)被支持并且包含在TheThemeMachine主題中，即 Layout.cshtml。舉例來說，一個(gè)主題可以添加專門的布局，如Layout-Blog.cshtml或者Layout-HomePage.cshtml，他們會(huì)被在blog或homepage中被用來代替默認(rèn)layout。這有一個(gè)擴(kuò)展提供這些布局的形狀后補(bǔ)。

對(duì)于自己擁有的模塊和主題如何提供一個(gè)基于訂制標(biāo)準(zhǔn)的布局候補(bǔ)例子請(qǐng)看Switching the Layout in Orchard CMS.

形狀模板

在Orchard中，當(dāng)一個(gè)Web頁面呈現(xiàn)為Html時(shí)，出現(xiàn)的
在Orchard中，在一個(gè)頁面被渲染到HTML之前，它是作為一個(gè)樹型結(jié)構(gòu)的形狀shapes集合（Shapes）建立的。 Shapes相當(dāng)于一個(gè)頁面的Model，它里面包含了這個(gè)頁面上的所有對(duì)象，如：區(qū)域、菜單、菜單項(xiàng)和Widgets等

每一個(gè)shape都可以通過模板渲染，可以在主題中重寫。模板與形狀有著相同的名字，舉個(gè)例子，如果Menu.cshtml存在，它用來渲染一個(gè)Menu形狀。

TheThemeMachine主題有著兩套形狀模板，BadgeOfHonor 和 Branding，他們使用下面的代碼從Layout.cshtml構(gòu)建并注入到 Header 和 Footer區(qū)域中。

// Site name and link to the home page
WorkContext.Layout.Header.Add(New.Branding(), "5");
// Powered by Orchard
WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5");

Note 模板是渲染形狀的兩種方法中的一種。除模板之外，你還可以通過代碼定義如何渲染，通過定義一個(gè)包含Shape屬性的方法。你可以在CoreShapes.cs中找到這種方法。這通常在模塊中完成，但是主題也可以很好的完成。

內(nèi)容項(xiàng)模板

主題可以通過在它下面的\Views\Items_文件夾中添加模板重寫內(nèi)容項(xiàng)渲染。模板名稱應(yīng)當(dāng)是 Content-{content type name}.cshtml 或者 Content-{content type name}.{display type}.cshtml.舉個(gè)例子來說，一個(gè)重寫博客提交渲染的模板應(yīng)當(dāng)為\Views\Items\Content-BlogPost.cshtml，一個(gè)重寫博客摘要的模板應(yīng)當(dāng)為\Views\Items\Content-BlogPost.Summary.cshtml.

部分模板

主題可以重寫部分內(nèi)容的渲染。慣例原則與內(nèi)容項(xiàng)模板一致。部分模板必須在\Views\Parts中，并且名字為該部分形狀的名字。比如，評(píng)論的渲染可以通過創(chuàng)建\Views\Parts\Comments.cshtml文件進(jìn)行重寫。

字段模板

字段渲染同樣可以被重寫。你可以重寫一個(gè)文本字段（text field）的展現(xiàn)但不能重寫一個(gè)特殊文本（specific text field）字段的展現(xiàn)。重寫一個(gè)字段模板，需要在\Views\Fields下創(chuàng)建{field type name}.cshtml 或 {field type name}.{display type}.cshtml 文件。比如，文本字段可以被\Views\Fields\Common.Text.cshtml模板重寫。

候補(bǔ)

候補(bǔ)是一個(gè)有關(guān)系的形狀集合，有著相應(yīng)的模板或者層文件可以使你在主題中控制不同類型內(nèi)容的渲染。比如，你可以使用候補(bǔ)讓home page應(yīng)用一個(gè)層，讓子頁面使用另一個(gè)層，或者你可以使用兩種不同的方式渲染元素，一種是元素都在一個(gè)頁面中，另一種是他們都在一個(gè)博客帖子中。

想獲取更多信息, 見 Alternates.

重寫部件

部件的渲染同樣可以被重寫。在\Views 中創(chuàng)建一個(gè)叫做widget-{widget type}.的模板。舉個(gè)例子，你可以通過將widget-htmlwidget.cshtml放到 你主題的\Views文件夾中 重寫HTML 部件的渲染并且在內(nèi)容周圍添加一個(gè)紅色的框框。

<div style="border:1px red solid">
@Display(Model.Content)
</div>
OverridingWidgetRendering.PNG

注意這僅僅是一個(gè)簡單的例子，正常情況下添加一個(gè)框架最好用CSS。

布局文件

一個(gè)主題可以通過在根目錄中包含一個(gè)placement.info文件來改變形狀的渲染。 placement.info 文件是一個(gè)XML文件。下面是一個(gè)例子：

<Placement>
    <!-- widgets -->
    <Place Parts_Blogs_BlogArchives="Content:before"/>
    <Place Parts_Blogs_RecentBlogPosts="Content:after"/>
    <!-- default positioning -->
    <Match ContentType="Blog">
        <Match DisplayType="Summary">
            <Place Parts_Blogs_Blog_Description="Content:before"
                   Parts_Blogs_Blog_BlogPostCount="Meta:3"/>
        </Match>
    </Match>
</Placement>

標(biāo)記

在每個(gè)文件中的標(biāo)記受你選擇的視圖引擎約束。在Orchard中的默認(rèn)視圖引擎是Razor (.cshtml files)，
快速指導(dǎo)可以在Template File Syntax Guide.中找到。

在模板內(nèi)部，Model對(duì)象代表當(dāng)前形狀被渲染。這意味著如果你在使用消息形狀，它有一個(gè)Message 屬性，你可以通過在模板內(nèi)部寫@Model.Message來顯示它。

Orchard提供Display方法，它可以渲染一個(gè)形狀。舉個(gè)例子來說，如果你看到 layout.cshtml文件，你可以看看那些空間是如何用諸如@Display(Model.Content)渲染的。

最后，你同樣可以查看看諸如@Html.RegisterScript("mystyle.css") 或者 @Html.RegisterScript("myscript.js")等各種模板。這些注冊(cè)是必須的因?yàn)檫@些腳本和樣式文件是共享資源。相同的link 或者 script元素不應(yīng)該渲染兩次即使是在多種模塊或在不同示例中需要相同文件的相同組件中。

主題和代碼

多數(shù)主題會(huì)由一個(gè)樣式表，少量模板（通常是layouts），和少許圖片組成。他們除了在模板文件中包含簡單代碼之外不存在額外代碼。對(duì)于更高級(jí)的主題，你可能需要提供設(shè)置，創(chuàng)建個(gè)性化形狀，或者在代碼中重寫形狀。

為了解決這些情況，可能需要?jiǎng)?chuàng)建一個(gè)類似于模塊的主題，并且包含一個(gè).csproj工程文件。它將描述如何編譯包含在其中的代碼。想要獲取更多有關(guān)模塊開發(fā)的信息請(qǐng)看Walkthrough: Writing An Orchard Module 和 Creating a Module with a Simple Text Editor。

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

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

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