オーチャードCMS - ホームの隣に垂直ナビゲーションメニューを作成する

Question

オーチャードが初めてで、コードワイズの仕組みを理解しようとしています。 したがって、コードを使用してカスタムコンテンツタイプを作成しました。このコンテンツタイプでコンテンツアイテムを作成できます。私は、コンテンツアイテムのエディタページに「メニューに表示」チェックボックスを持っています。しかし、私はそれをチェックし、私はこの新たに作成されたカスタムアイテムを追加するメニューを選択すると、垂直メニュー項目として追加されますが、私はそれをルート項目の1つに垂直サブメニューとして追加する必要があります。 現在何が起こっているのか、何が必要なのかを説明する画像を見つけてください。 Current behaviorExpected behavior

Product2この作業はかなり複雑であり、カスタム・コンテンツ・アイテムであり、第2の画像

Answer 1

に示すように、垂直メニューにエントリとして追加されなければなりません。いくつかのステップがあります。 、official documentationを参照してください。子テーマ

を作成し、子テーマを作成し、

参照形状交互の概念を理解すること

を有効にする方法を理解する

1. official documentation

2. 設定管理エリア管理エリアに

   移動のメニュー、メニューににナビゲーションをクリックして、あなたが持ってたら例

   [ Home (Content Menu Item) ] 
   [ Service (Content Menu Item) ] 
       [ Document Storage (Custom Link) ] 
   

   のために、いくつかのメニュー項目とサブ項目を追加この構造体Orchardはテーマで@Zone(Model.Navigation)呼び出しを介してこの構造体をレンダリングします。この呼び出しがどこにあるのかは、テーマによって異なります。

   私の子供のテーマはオーチャードはメニュー自体をレンダリングする場合、それは、このように次のステップを提供することになり、Menu.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)を呼び出すLayout.cshtml代替を使用しています形はMenu.cshtmlの代わりになります。

3. あなたの子供をテーマにメニューの形状の代替を作成

   ゴーあなたに子テーマフォルダとファイルViews\Menu.cshtmlを追加し、そこにメニューをレンダリングを開始、例えば

   <ul class="nav navbar-nav"> 
       @DisplayChildren(Model) 
   </ul> 
   

   @DisplayChildren(Model)コールは、MenuItem.cshtmlシェイプテンプレートを使用してメニュー項目のレンダリングを開始するので、次のステップは、MenuItem.cshtmlの代わりにシェイプを提供することです。

4. あなたの子供をテーマにメニュー項目の形状の代替を作成

   はあなたに子テーマフォルダを移動して、ファイルViews\MenuItem.cshtmlを追加し、メニュー項目のレンダリングを開始します。ここでは、ブートストラップの仕様に応じて<li>構造などのメニュー項目をレンダリング私のMenuItem.cshtmlファイルの内容は次のとおりです。

   @* 
       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のような特定のメニュー項目の種類を無効にする交互に提供することができます。あなたは、仕事の多くを見るが、かなり柔軟なようにファイルには、コンテンツのような

   @* 
       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> 
   

   でMenuItemLink.cshtmlだろう。