七、制作主题（六） Template file syntax guide
Orchard使用templates和shapes建立views，模板是类拟于ASP.NET MVC的部分views的概念，它们为在页面中呈现shape数据提供了基本的结构，一个模板能包含网页内容 如HTML标签、CSS、JAVASRITP，辅助呈现shape数据。另外，模板能包含服务端代码块因此你能在网页中访问和呈现shape数据。Shapes是表示内容结构的动态的数据模型，如menus,menu items,content items,documents,messages.Shapes为动态views提供数据（相对于MVC中的静态ASP.NET VIEWS），shape模板在运行时呈现。
视图引擎负责解析模板和呈现shape数据到网页中，Orchard默认的视图引擎是ASP.NET MVC3中的Razor。为了Razor视图引擎正确解析模板，你必须使用Razor语法写模板，Razor语法定义了书写网页模板的规则，包含了静态WEB内容和程序代码。
Razor Syntax Primer
Razor语法的简单规则是你能嵌入服务端代码到网页标记中。Razor中最常用的语言是C#，Razor syntax with C#, see Coding with the Razor Syntax.
Razor的扩展名是.cshtml或.vbhtml。
Accessing Orchard Objects in Code
Orchard提供了简易地在代码中访问对象，因为你能直接访问content part对象，不用使用casting或扩展方法。
下面示例展示在一个widget part上如何访问Title属性，
var title = Model.ContentItem.WidgetPart.Title;
下面第二个访问Orchard对象的示例。
@Model.ContentItem.ProfilePart.Picture.Width
Creating Shape Templates
Shape模板是呈现shapes是一段HTML标记，要演示Shape模板是如何使用的，假设你想要在网页上显示一个map，在下面的driver代码中定义了包含显示和编辑map setting的shapes的定义。
using Maps.Models;
using Orchard.ContentManagement;
using Orchard.ContentManagement.Drivers;
namespace Maps.Drivers
{
public class MapPartDriver : ContentPartDriver<MapPart>
{
protected override DriverResult Display(
MapPart part, string displayType, dynamic shapeHelper)
{
return ContentShape("Parts_Map",
() => shapeHelper.Parts_Map(
Longitude: part.Longitude,
Latitude: part.Latitude));
}
//GET
protected override DriverResult Editor(
MapPart part, dynamic shapeHelper)
{
return ContentShape("Parts_Map_Edit",
() => shapeHelper.EditorTemplate(
TemplateName: "Parts/Map",
Model: part));
}
//POST
protected override DriverResult Editor(
MapPart part, IUpdateModel updater, dynamic shapeHelper)
{
updater.TryUpdateModel(part, Prefix, null, null);
return Editor(part, shapeHelper);
}
}
}
Display方法用来显示map，Editor方法用来(使用GET)在关于用户输入编辑视图中显示shape result，(POST)用来使用用户输入的值重新显示编辑视图，这些方法使用了Editor方法的不同重载。
下面示例显示用来显示map的模板：
<img alt="Location" border="1" src="http://maps.google.com/maps/api/staticmap?
&zoom=14
&size=256x256
&maptype=satellite&markers=color:blue|@Model.Latitude,@Model.Longitude
&sensor=false" />
下面示例展示关于editor的模板，这个模板让用户输入latitude and longitude的值：
@model Maps.Models.MapPart
<fieldset>
<legend>Map Fields</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Longitude)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Latitude)
@Html.ValidationMessageFor(model => model.Latitude)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Longitude)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Longitude)
@Html.ValidationMessageFor(model => model.Longitude)
</div>
</fieldset>
@Html.LabelFor表达式使用shape属性的名字创建labels。@Html.TextBoxFor表达式使用关于shape的用户输入的值创建text boxes。@Html.ValidationMessageFor表达式当用户输入错误时显示消息。
Layout and Document Templates
Layout和document模板是定义网页结构的特殊模板。每个网页都有一个Layout shape（动态对象）与它关联。Layout shape定义网页内容的zones，layout和document模板决定 Layout shape在网页上zones如何定义。
layout模板（Layout.cshtml）勾画出网页的body中的zones。document模板（Document.cshtml）包裹在layout模板周围，勾画网页的剩余部分。
默认。Layout shape在document模板中定义三个zones(Head,Body,Tail)，和layout模板(Content)的一个shape。document模板中，Head zone用来定义网页的header，Body zone定义layout模板插入到哪里，Tail zone定义网页的footer。
下面是一个典型的document模板：
@using Orchard.Mvc.Html;
@using Orchard.UI.Resources;
@{
RegisterLink(new LinkEntry {Type = "image/x-icon", Rel = "shortcut icon",
Href = Url.Content("~/modules/orchard.themes/Content/orchard.ico")});
Script.Include("html5.js").AtLocation(ResourceLocation.Head);
var title = (Request.Path != Request.ApplicationPath && !string.IsNullOrWhiteSpace((string)Model.Title)
? Model.Title + WorkContext.CurrentSite.PageTitleSeparator
: "") +
WorkContext.CurrentSite.SiteName;
}
<!DOCTYPE html>
<html lang="en" class="static @Html.ClassForPage()">
<head>
<meta charset="utf-8" />
<title>@title</title>
@Display(Model.Head)
< script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script>
</head>
<body>
@* Layout (template) is in the Body zone at the default position *@
@Display(Model.Body)
@Display(Model.Tail)
</body>
</html>
下面示例是典型的layout模板，注意：layout模板引用了zones，除了Content zone，这此新zone被添加到Layout shape（如果content被添加到这个zone)。
@* Html.RegisterStyle("site.css"); *@
@{
Model.Header.Add(Display.Header(), "5");
Model.Header.Add(Display.User(), "10");
Model.Header.Add(Model.Navigation, "15");
}
<div id="page">
<header>
@Display(Model.Header)
</header>
<div id="main">
<div id="messages">
@Display(Model.Messages)
</div>
<div id="content-wrapper">
<div id="content">
@Display(Model.Content)
</div>
</div>
<div id="sidebar-wrapper">
<div id="sidebar">
@Display(Model.Sidebar)
</div>
</div>
</div>
<div id="footer-wrapper">
<footer>
@Display(Model.Footer)
</footer>
</div>
</div>
为了使这个zones出现在Orchard UI中，这样你能为它们添加内容，你必须在主题的Theme.txt文件中引用这些zones，像下面这样：
Name: SimpleTheme Author: Description: Simple example theme. Version: 1.0 Tags: Simple Website: http://www.orchardproject.net Zones: Header, User, Navigation, Messages, Content, Sidebar, Footer
