Anatomy of a theme(剖析主题)

主题使得Orchard用户可以按照他们的需要和设计目标自定义渲染网站。模板可以通过Orchard模块执行重写样式表,图片,布局或者任何内容模板的目标。

主题在哪里

一个主题是一个包含一套合适文件的文件夹。这个文件夹必须处在位于你网站根目录的Themes文件夹下面。

TheThemeMachine

名称叫做TheThemeMachine的主题是一个Orchard内置主题。你可以通过这个主题来学习Orchard的主题相关知识。同一些主题一样,你可以在 Themes 文件夹下找到它。

TheThemeMachine.PNG

TheThemeMachine 被设计为一个干净的,时尚的主题。并且是一个不错的学些如何订制或开发新主题的切入点。这篇文章将使用此主题作为例子。

主题的组成结构

这部分将描述一个主题的必备和可选元素。

描述清单

一个有效的主题必须包含一个描述清单(mainfest)。描述清单是一个叫做 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

这个文件的开始部分给了主题一个有好的名称,描述,作者,和标签。Zones字段提供了一个所有可以被添加到模板或层的空间(zones)名称。各种各样的界面元素可以被注入到空间(zones)中,但是最常用的是部件(widgets)。不是所有的空间都需要列在清单文件中,只有那些打算使用的部件(widgets)。

TheThemeMachineZoneScreenshot.PNG

这个图例展示了19个空间(zones),这比你一般情况下站点所用到的要多。这些空间包header和footer,他们是位于页面顶部和底部的区域。这里有一个导航空间,通常情况下导航菜单会插入到这个空间中。Featured空间通常情况下你会放一个网站的banner在此处。BeforeMainAfterMain在main zones的上面和下面。AsideFirstAsideSecond都是位于边上的工具条通常位于main content的左边和右边。在页面的正中央有一个Messages 空间是用来发送通知的。跟着BeforeContent的是ContentAfterContent空间。在页面的底部是TripelFirst,TripelSecond, 和 TripelThird。如果你想有3列在底部的话你可以使用他们。FooterQuad*空间是当你希望有4列的时候使用的。

所有在TheThemeMachine主题中的空间都是可装配的,这意味着将只渲染那些包含内容的空间。

图标或者缩略图

所有的主题都应该包含一个 Theme.png文件。这个图片应该至少为 400x400像素并且代表这个主题在主题画廊(theme gallery)或者在主题管理页面中显示。它通常是一个网站页面所用主题的缩略图。

部件空间预览

部件(widget)区域的预览图片可以被添加到主题中。这个图片应当被放置在主题的根目录中,并且名称需要为ThemeZonePreview.png。这应当是一个400像素宽的显示不同空间和他们名称的图片。你可以在TheThemeMachine中找到例子。

WidgetZonePreview.PNG

静态资源

一个主题通常包含许多静态资源,不如 CSS 样式文件,js,或者图片。这些文件必须在下面文件夹中:

  • CSS 文件必须在该主题的 \Styles 文件夹中。
  • js文件应当在该主题的 \Scripts 文件夹中。任何放在这个文件夹下的js文件应当是仅和你的主题有关系的自定义脚本文件,不应当是可复用的??筛从玫慕疟疚募Φ卑谝桓霾煌哪?橹?。比如jQuery模块。
  • Images should be in \Content\Images folders. If your theme contains few images,
  • 图片应当被放在\Content\Images文件夹中。如果你的主题包含少量图片,可以将他们保存在同一层。但是,如果你有大量的图片,推荐你将他们组织在子文件中。

Note 启用文件,每个包含静态资源的文件夹,比如样式文件,图片文件,js都需要包含一个web.config 文件,它包含如下内容:

<?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文件通常不会在主题中被找到,因为需要改动这个文件的情况很少。如文档类型(DOCTYPE)、<head>标签等。主题中如果不包含此文件,默认调用~\Core\Shapes\Views\下的Document.cshtml文件,当然我们也可以把这个文件复制到主题的Views目录下,来重写文档定义

布局

布局是body元素中的最外层形状。举个例子来说,这是一个标准的定义一个主组件区域的位置。你可以在这篇文章中的Markup部分阅读到有关markup在布局中的细节。

一个主题可以包含许多布局文件,即便如此当前布局仅能有一个被支持并且包含在TheThemeMachine主题中,即 Layout.cshtml。举例来说,一个主题可以添加专门的布局,如Layout-Blog.cshtml或者Layout-HomePage.cshtml,他们会被在blog或homepage中被用来代替默认layout。这有一个扩展提供这些布局的形状后补。

对于自己拥有的??楹椭魈馊绾翁峁┮桓龌诙┲票曜嫉牟季趾虿估忧肟?a target="_blank" rel="nofollow">Switching the Layout in Orchard CMS.

形状模板

在Orchard中,当一个Web页面呈现为Html时,出现的
在Orchard中,在一个页面被渲染到HTML之前,它是作为一个树型结构的形状shapes集合(Shapes)建立的。 Shapes相当于一个页面的Model,它里面包含了这个页面上的所有对象,如:区域、菜单、菜单项和Widgets等

每一个shape都可以通过模板渲染,可以在主题中重写。模板与形状有着相同的名字,举个例子,如果Menu.cshtml存在,它用来渲染一个Menu形状。

TheThemeMachine主题有着两套形状模板,BadgeOfHonorBranding,他们使用下面的代码从Layout.cshtml构建并注入到 HeaderFooter区域中。

// 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 模板是渲染形状的两种方法中的一种。除模板之外,你还可以通过代码定义如何渲染,通过定义一个包含Shape属性的方法。你可以在CoreShapes.cs中找到这种方法。这通常在模块中完成,但是主题也可以很好的完成。

内容项模板

主题可以通过在它下面的\Views\Items_文件夹中添加模板重写内容项渲染。模板名称应当是 Content-{content type name}.cshtml 或者 Content-{content type name}.{display type}.cshtml.举个例子来说,一个重写博客提交渲染的模板应当为\Views\Items\Content-BlogPost.cshtml,一个重写博客摘要的模板应当为\Views\Items\Content-BlogPost.Summary.cshtml.

部分模板

主题可以重写部分内容的渲染。惯例原则与内容项模板一致。部分模板必须在\Views\Parts中,并且名字为该部分形状的名字。比如,评论的渲染可以通过创建\Views\Parts\Comments.cshtml文件进行重写。

字段模板

字段渲染同样可以被重写。你可以重写一个文本字段(text field)的展现但不能重写一个特殊文本(specific text field)字段的展现。重写一个字段模板,需要在\Views\Fields下创建{field type name}.cshtml{field type name}.{display type}.cshtml 文件。比如,文本字段可以被\Views\Fields\Common.Text.cshtml模板重写。

候补

候补是一个有关系的形状集合,有着相应的模板或者层文件可以使你在主题中控制不同类型内容的渲染。比如,你可以使用候补让home page应用一个层,让子页面使用另一个层,或者你可以使用两种不同的方式渲染元素,一种是元素都在一个页面中,另一种是他们都在一个博客帖子中。

想获取更多信息, 见 Alternates.

重写部件

部件的渲染同样可以被重写。在\Views 中创建一个叫做widget-{widget type}.的模板。举个例子,你可以通过将widget-htmlwidget.cshtml放到 你主题的\Views文件夹中 重写HTML 部件的渲染并且在内容周围添加一个红色的框框。

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

注意这仅仅是一个简单的例子,正常情况下添加一个框架最好用CSS。

布局文件

一个主题可以通过在根目录中包含一个placement.info文件来改变形状的渲染。 placement.info 文件是一个XML文件。下面是一个例子:

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

标记

在每个文件中的标记受你选择的视图引擎约束。在Orchard中的默认视图引擎是Razor (.cshtml files),
快速指导可以在Template File Syntax Guide.中找到。

在模板内部,Model对象代表当前形状被渲染。这意味着如果你在使用消息形状,它有一个Message 属性,你可以通过在模板内部写@Model.Message来显示它。

Orchard提供Display方法,它可以渲染一个形状。举个例子来说,如果你看到 layout.cshtml文件,你可以看看那些空间是如何用诸如@Display(Model.Content)渲染的。

最后,你同样可以查看看诸如@Html.RegisterScript("mystyle.css") 或者 @Html.RegisterScript("myscript.js")等各种模板。这些注册是必须的因为这些脚本和样式文件是共享资源。相同的link 或者 script元素不应该渲染两次即使是在多种??榛蛟诓煌纠行枰嗤募南嗤榧小?/p>

主题和代码

多数主题会由一个样式表,少量模板(通常是layouts),和少许图片组成。他们除了在模板文件中包含简单代码之外不存在额外代码。对于更高级的主题,你可能需要提供设置,创建个性化形状,或者在代码中重写形状。

为了解决这些情况,可能需要创建一个类似于??榈闹魈?,并且包含一个.csproj工程文件。它将描述如何编译包含在其中的代码。想要获取更多有关??榭⒌男畔⑶肟?a target="_blank" rel="nofollow">Walkthrough: Writing An Orchard Module 和 Creating a Module with a Simple Text Editor。

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容