Orchard CMS - 在主頁旁邊創建垂直導航菜單

我是Orchard的新手，試圖弄清楚它如何在代碼方面起作用。所以，我通過代碼創建了一個自定義內容類型，並且我可以在此內容類型下創建內容項目。我在「內容」項目的編輯器頁面上顯示「在菜單上顯示」複選框。但是，當我檢查它並選擇我想要添加這個新創建的自定義項目的菜單時，它將作爲垂直菜單項添加，而我需要將它作爲垂直子菜單添加到其中一個根項目。請查看描述正在發生的事情和我需要的圖像。 Current behavior Expected behavior Orchard CMS - 在主頁旁邊創建垂直導航菜單

產品2是一個自定義的內容項，如圖所示，第2圖像

來源

2016-09-28 kushagra sharma

你有沒有完全閱讀[本文檔]（http://docs.orchardproject.net/en/latest/Documentation/Navigation-and-menus/）？ – devqon

@devqon是的，我做到了。但是文檔描述了Dashboard創建子菜單的方式，而我需要通過代碼來完成此操作的方式。另外，我嘗試使用IMenuProvider並創建了MainMenu類，但只是添加了名爲「當前行爲」的圖像中提到的菜單項。此外，我想將菜單項添加到我創建的新菜單，而不是默認主菜單。 –

這個任務是相當複雜的，應加在垂直菜單項。涉及幾個步驟。

瞭解如何創建一個子主題

見official documentation，創建一個子主題，使之
瞭解形狀交替的概念

見official documentation
配置管理領域

進入管理區域的菜單，點擊導航在菜單中添加一些菜單項和子項，例如
```
[ Home (Content Menu Item) ] 
[ Service (Content Menu Item) ] 
    [ Document Storage (Custom Link) ] 
```
一旦你有這個結構Orchard通過主題中的@Zone(Model.Navigation)調用來呈現此結構。您必須搜索此通話的位置，這取決於主題。

我的孩子的主題使用Layout.cshtml替代在需要的地方，像這樣
```
@{ 
    Func<dynamic, dynamic> Zone = x => Display(x); // Zone as an alias for Display to help make it obvious when we're displaying zones 
} 

<div class="wrapper"> 
    @* Navigation bar *@ 
    @if (Model.Navigation != null) 
    { 
     <div id="layout-navigation" class="group navbar navbar-default" role="navigation"> 
     @Zone(Model.Navigation) 
     </div> 
    } 

    ... 
</div> 
```
現在它調用@Zone(Model.Navigation)，如果果園呈現菜單本身，它採用了Menu.cshtml形狀模板，因此下一步將提供形狀交替爲Menu.cshtml。
在你的子主題創建用於菜單的形狀備用

轉到您的孩子的主題文件夾並添加一個文件Views\Menu.cshtml並開始渲染菜單出現，例如
```
<ul class="nav navbar-nav"> 
    @DisplayChildren(Model) 
</ul> 
```
的@DisplayChildren(Model)調用將通過MenuItem.cshtml形狀模板開始渲染菜單項，因此下一步將爲MenuItem.cshtml提供形狀替代。

創建菜單項的形狀替代你的孩子主題

轉到您的孩子的主題文件夾並添加一個文件Views\MenuItem.cshtml並開始呈現的菜單項。這裏是我的MenuItem.cshtml文件，按照引導規範這使得菜單項<li>結構的內容：

@* 
    this shape alternate is displayed when a <li> element is rendered 
    whereas the following code is based on Orchard.Core\Shapes\Views\Menu.cshtml 
*@ 

@{ 
    // odd formatting in this file is to cause more attractive results in the output. 
    var items = Enumerable.Cast<dynamic>((System.Collections.IEnumerable)Model); 
} 
@{ 
    if (!HasText(Model.Text)) { 
     @DisplayChildren(Model) 
    } 
    else { 
     if ((bool) Model.Selected) { 
      Model.Classes.Add("current"); 
     } 

     if (items.Any()) { 
      Model.Classes.Add("dropdown"); 
     } 

     @* morphing the shape to keep Model untouched*@ 
     Model.Metadata.Alternates.Clear(); 
     Model.Metadata.Type = "MenuItemLink"; 

     @* render the menu item only if it has some content *@ 
     var renderedMenuItemLink = Display(Model); 
     if (HasText(renderedMenuItemLink)) { 
      var tag = Tag(Model, "li"); 
      @tag.StartElement 
      @renderedMenuItemLink 

      if (items.Any()) { 
       <ul class="dropdown-menu"> 
        @DisplayChildren(Model) 
       </ul> 
      } 

      @tag.EndElement 
     } 
    } 
}

您還可以提供交替覆蓋特定的菜單項類型，如Custom Link。那麼該文件將被MenuItemLink.cshtml與內容一樣

@* 
    this shape alternate is displayed when menu link is _not_ of type "Content Menu Item" otherwise MenuItemLink-ContentMenuItem.cshtml is used 
    whereas the following code is based on Orchard.Core\Shapes\Views\MenuItemLink.cshtml 
*@ 
<a href="@Model.Href" @if (Model.Item.Items.Length > 0) { <text>class="dropdown-toggle" data-toggle="dropdown"</text> }>@Model.Text</a>

正如你所看到的，大量的工作，但非常靈活。

來源

2016-09-30 10:37:33 ViRuSTriNiTy

Orchard CMS - 在主頁旁邊創建垂直導航菜單

回答

相關問題