七、制作主题（六） 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

posted @ 2012-03-23 16:59 commanderss 阅读(585) 评论(0) 编辑收藏举报

刷新页面返回顶部

谷仙

七、制作主题（六） Template file syntax guide

Razor Syntax Primer

Accessing Orchard Objects in Code

Creating Shape Templates

Layout and Document Templates

公告