生成新模版之后(參看: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 找不到合法的文件,就不會正確呈現視圖了。那么,如何正確命名文件呢,本文開頭第一段已經說了哦。