Orchard之模版開發

標籤：style   blog   http   color   使用   strong   

產生新模版之後（參看：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 找不到合法的檔案，就不會正確呈現視圖了。那麼，如何正確命名檔案呢，本文開頭第一段已經說了哦。