Orchard之模版開發


生成新模版之后(參看:Orchard之生成新模板),緊接着就是模版開發了。

 

一:開發必備之 Shape Tracing

到了這一步,非常依賴一個工具,當然,它也是 Orchard 項目本身的一個 Module,這個工具就是 Shape Tracing。

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

好了,不管怎么說,首先,我們來到 Orchard 的后台,Enable 之。這個時候,如果再刷新我們的頁面,我們就會見到網頁下步存在一個小標簽:

image

點擊之,出現:

image

舉個例子來說 shape tracing 的重要性,比如,我們創建了一個 List(參考:Orchard之創建列表),現在顯式為:

image

我們需要修改該頁面的顯式效果,就需要在新模版下創建對應 content 或 part 的 cshtml,然后在這個 view 中修改顯式,這個時候,我們就得知道怎么創建它,這包括:

1:視圖名字怎么命名?

2:視圖的Model都有些什么樣的屬性?

而利用 Shape Tracing 的 Shape 頁簽的 Alternate 下的 Create 就會很容易創建這個視圖,比如,在這里,我們要創建的是列表視圖,那么我們就要創建這個 Content-Event.Summary.cshtml,如下:

image

注意,名稱中的 Event 是我創建的列表的 Id 號,在 Orchard 后台的 Content 定義中可以看到。

點擊 Create 后,在新模版的 Views 文件夾下就生成了這個文件,

image

現在,我們只要把這個文件在解決方案中引入進來。

 

二:修改 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 沒什么區別了!比如,上面我就注釋了不要內容顯式,並且把內容標題的文字改成紅色,然后效果就能如下了:

image

 

2.1 關於 Display 方法

注意,上面的代碼以及上面的圖片效果中,我們看到了有兩個標題的顯式。

要注意,第一個標題,在視圖中,我們使用了 orchard 自己提供的 Display 方法來顯式的。這樣一來,它的樣式是什么,怎么顯式,就只能由 Orchard 說了算了。

而第二個標題,我們通過 Shape Tracing,跟蹤到了 Model 的信息,直接繞開 Display 方法,自己加樣式的方式,就靈活了很多了。

image

這樣一來,有了 Model 自己的數據,我們就可以愛咋顯式就咋顯式了。

 

三:主題如何起作用

其實,原理也很簡單:

ORCHARD會根據自己的命名規則,去查找對應主題下的視圖文件,即 cshtml 文件,如果存在,就以這個 alternate 去展現

當然,這里非常依賴我們視圖的名字不能隨便瞎起,如果不按照 Orchard 的規則,則 Orchard 找不到合法的文件,就不會正確呈現視圖了。那么,如何正確命名文件呢,本文開頭第一段已經說了哦。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM