生成新模版之后(参看:Orchard之生成新模板),紧接着就是模版开发了。

一:开发必备之 Shape Tracing

到了这一步,非常依赖一个工具,当然,它也是 Orchard 项目本身的一个 Module,这个工具就是 Shape Tracing。

Shape Tracing:Displays all currently displayed shapes and some information to customize them

好了,不管怎么说,首先,我们来到 Orchard 的后台,Enable 之。这个时候,如果再刷新我们的页面,我们就会见到网页下步存在一个小标签:

点击之,出现:

举个例子来说 shape tracing 的重要性,比如,我们创建了一个 List(参考:Orchard之创建列表),现在显式为:

我们需要修改该页面的显式效果,就需要在新模版下创建对应 content 或 part 的 cshtml,然后在这个 view 中修改显式,这个时候,我们就得知道怎么创建它,这包括:

1:视图名字怎么命名?

2:视图的Model都有些什么样的属性?

而利用 Shape Tracing 的 Shape 页签的 Alternate 下的 Create 就会很容易创建这个视图,比如,在这里,我们要创建的是列表视图,那么我们就要创建这个 Content-Event.Summary.cshtml,如下:

注意,名称中的 Event 是我创建的列表的 Id 号,在 Orchard 后台的 Content 定义中可以看到。

点击 Create 后,在新模版的 Views 文件夹下就生成了这个文件,

现在,我们只要把这个文件在解决方案中引入进来。

二:修改 View

接下来,事情就变得简单了,我们可以看到代码如下:

@using Orchard.Utility.Extensions;
@{
    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }

Model.Classes.Add("content-item");
    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    Model.Classes.Add(contentTypeClassName);
    var tag = Tag(Model, "article");
}
@tag.StartElement
<span style="color:red;"> @Display(Model.Header)</span>
<a href="@Model.ContentItem.AutoroutePart.Path" style="color:red;"> @Model.ContentItem.AutoroutePart.DisplayAlias</a>
        @*@if (Model.Meta != null) {
            <div class="metadata">
                @Display(Model.Meta)
            </div>
        }*@
    @*@Display(Model.Content)*@
    @if(Model.Footer != null) {
        <footer>
            @Display(Model.Footer)
        </footer>
    }
@tag.EndElement

我们只要修改代码文件,这跟修改普通的 HTML 没什么区别了!比如,上面我就注释了不要内容显式,并且把内容标题的文字改成红色,然后效果就能如下了:

2.1 关于 Display 方法

注意,上面的代码以及上面的图片效果中,我们看到了有两个标题的显式。

要注意,第一个标题,在视图中,我们使用了 orchard 自己提供的 Display 方法来显式的。这样一来,它的样式是什么,怎么显式,就只能由 Orchard 说了算了。

而第二个标题,我们通过 Shape Tracing,跟踪到了 Model 的信息,直接绕开 Display 方法,自己加样式的方式,就灵活了很多了。

这样一来,有了 Model 自己的数据,我们就可以爱咋显式就咋显式了。

三:主题如何起作用

其实,原理也很简单:

ORCHARD会根据自己的命名规则,去查找对应主题下的视图文件,即 cshtml 文件,如果存在,就以这个 alternate 去展现

当然,这里非常依赖我们视图的名字不能随便瞎起,如果不按照 Orchard 的规则,则 Orchard 找不到合法的文件,就不会正确呈现视图了。那么,如何正确命名文件呢,本文开头第一段已经说了哦。

Orchard之模版开发的更多相关文章

  1. Orchard之Module开发

    一:生成新项目 首先,要启动 Code Generation,参考<Orchard之生成新模板>. 其次,进入命令行,输入: codegen module Tminji.Requireme ...

  2. 一、FreeMarker 模版开发指南 第一章 入门

    所有资料来自 南磊 翻译的官方文档,我弄简单了,适合自己以后拿出来翻看. 章节内容如下: 简介 模板+数据模型=输出 数据模型一览 模板一览 一.模板  +  数据模型  =  输出 输出结果: &l ...

  3. 三、FreeMarker 模版开发指南 第三章 模版

    章节内容如下:   总体结构 指令 表达式 插值 一.总体结构 实际上你用程序语言编写的程序就是模板,模板也被称为FTL(代表FreeMarker模板语言).这是为编写模板设计的非常简单的编程语言. ...

  4. 二、FreeMarker 模版开发指南 第二章 数值和类型

    章节内容如下:   基本内容 类型 一.基本内容 简介 什么是数值? 什么是类型? 数据模型是哈希表 a.简介 理解数值和类型的概念是理解数据模型的关键所在.然而,数值和类型的概念并不局限于数据模型, ...

  5. 模版引擎(NVelocity)开发

    在net中用模版开发,在handler中用到了大量的html代码.为解决这个问题,我可以采用模版引擎(NVelocity)进行开发.1.首先需要将NVelocity.dll文件放入项目,其次引用.2. ...

  6. Orchard模块开发全接触1:起步

    在<http://www.cnblogs.com/luminji/p/3831281.html>中简单介绍了 Orchard 的模块开发,接下来,我们需要做个更复杂的例子,Orchard ...

  7. PHP模版引擎 – Twig

    在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入 ...

  8. 菜鸟学Windows Phone 8开发(1)——创建第一个应用程序

    本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 主要是想通过翻译本系列文章来巩固下基础知识顺带学习下英语和练习下自己的毅力(因为打算每天翻译一篇,但是发现翻译这篇花费了 ...

  9. 黄聪:《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

随机推荐

  1. shell学习(一)

    一.免密交互 --stdin 1.从标准输入读取字符串 如:passwd   --stdin   heruguo246 [root@localhost mnt]#    ---输入了修改heruigu ...

  2. Atom组件

    Atom组件 最近用Atom写博客比较多,然后发现一个很严重的问题.. 没有一个我想要的上传图片的方式,比如某乎上边就可以直接copy/paste文件,然后进行上传. 然而在Atom上没有找到类似的插 ...

  3. 远程登陆linux连接mysql root账号报错:2003-can't connect to MYSQL serve(转)

    远程连接mysql root账号报错:2003-can't connect to MYSQL serve 1.远程连接Linux系统,登录数据库:mysql -uroot -p(密码) 2.修改roo ...

  4. Python装饰器进阶

    装饰器进阶 现在,我们已经明白了装饰器的原理.接下来,我们还有很多事情需要搞清楚.比如:装饰带参数的函数.多个装饰器同时装饰一个函数.带参数的装饰器和类装饰器. 装饰带参数函数 def foo(fun ...

  5. jQuery漏掉的东西

    prop和attr的区别 attr一般都用来设置和操作元素的自定义属性的,而prop一般都是操作元素的内置属性的(尤其是表单元素的操作我们大部分都在使用prop) each 可以遍历jQuery集合中 ...

  6. Xamarin iOS教程之申请付费开发者账号下载证书

    Xamarin iOS教程之申请付费开发者账号下载证书 Xamarin iOS使用真机测试应用程序 在讲解iOS Simulator时,已经提到了虽然iOS Simulator可以模仿真实的设备,但是 ...

  7. 膨胀卷积与IDCNN

    Dilation 卷积,也被称为:空洞卷积.膨胀卷积. 一.一般的卷积操作: 首先,可以通过动态图,理解正常卷积的过程: 如上图,可以看到卷积操作. 对于CNN结构,通常包括如下部分: 输入层 (in ...

  8. BZOJ4227 : 城市

    首先一遍Dijkstra求出S到每个点的最短路,并建出最短路图. 那么对于一条边,求在这条边不能使用的情况下,到首都S的最短时间会变长的点的数目,等价于求去掉这条边后在最短路图中不能从S出发到达的点的 ...

  9. BZOJ 1009 HNOI 2008 GT考试 递推+矩乘

    1009: [HNOI2008]GT考试 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3679  Solved: 2254[Submit][Statu ...

  10. mybatis学习笔记(三)-- 优化数据库连接配置

    原来直接把数据库连接配置信息写在conf.xml配置中,如下 <?xml version="1.0" encoding="UTF-8"?> < ...