如何設計果園中的Widget？

我試圖在Orchard中構建一個主題（將現有的模板轉換成），但是在設計Blog Archives小部件時遇到困難。我有一個區域「邊欄」，我在其中放置了小部件。如何設計果園中的Widget？

爲了擁有它的輸出我想我創造了我的觀點一個新的模板標記的文件夾：小工具 - BlogArchives.cshtml所有模板，它包裹widget的內容在一個div像這樣：

<div class="box box_small"> 
    @Display(Model.Content) 
</div>

所以我期望所有的小部件內容都在我的div裏面。然而，生成的HTML看起來像這樣：

<article class="widget-blog-archives widget" shape-id="15"> 
    <header shape-id="15"> 
    <h1 shape-id="15">The Archives</h1> 
    </header> 
    <div class="box box_small" shape-id="15"> 
    <div class="archives" shape-id="16"> 
     <ul class="archiveMonthList" shape-id="16"> 
     <li class="first last" shape-id="16"> 
     <a href="(shortened)/10" shape-id="16">October 2011 (1)</a> 
    </li> 
    </ul> 
    </div> 
    </div> 
</article>

我不明白的是整個文章包裝的來源？我怎樣才能把頭部放到我的div中並將其改爲？

難道有人也請解釋模型中標題「The Archives」的存儲位置嗎？我查看了形狀追蹤工具中的模型，但找不到它...

謝謝。

UPDATE

正如伯特蘭德解釋我做了一些改變，以我的Widget-BlogArchives.cshtml：

@using Orchard.ContentManagement 
@using Orchard.Widgets.Models 
@{ 
    Model.Metadata.Wrappers.Clear(); 
    var title = ((IContent)Model.ContentItem).As<WidgetPart>().Title; 
} 
<div class="box box_small"> 
    <h3>@title</h3> 
    @Display(Model.Content) 
</div>

這現在產生我想要的HTML。

來源

2011-10-24 b3n

此標記來自窗口部件包裝。可以通過調用Model.Metadata.Wrappers.Clear（）來禁止封裝。然後，您可以完全接管您自己的Widget覆蓋的渲染。

如果你打開widget.wrapper.cshtml，你會找到答案到你的第二個問題：

var title = ((IContent)Model.ContentItem).As<WidgetPart>().Title;

這也可以做到這樣：

var title = Model.ContentItem.WidgetPart.Title

來源

2011-10-24 01:42:41

謝謝伯特蘭。我會在哪裏放置代碼來清除包裝？這是一個推薦的樣式小部件的方式，或者我應該重寫包裝而不是Widget-BlogArchives.cshtml？我仍然試圖掌握這裏的所有概念以及最佳實踐。 – b3n

您會將該代碼放入您的窗口小部件模板中。像widget-blogarchives.cshtml，這取決於你想要做什麼（看看形狀跟蹤中可用的替代項來決定你想要的是哪一個;你可能想要通過這種方式添加小部件交替特性，以獲得更多的可能性）。您不能交替使用包裝，因此覆蓋小部件包裝模板將覆蓋所有小部件。可能不是你想要的。所以是的，這是一個完全合理的做事方式。 –

是的，我啓用了交替功能，因此覆蓋了Widgets-BlogArchives.cshtml。我無法確定標題的來源，因爲我無法在形狀追蹤工具中找到它。 – b3n

如何設計果園中的Widget？

回答

相關問題