Question

我是Orchard的新手，并试图找出它在代码方面的工作原理。因此，我已通过代码创建了自定义内容类型，并且我可以在此内容类型下创建内容项。我在菜单上显示了＆＃39;内容项的编辑器页面上的复选框。但是当我检查它并选择我希望添加这个新创建的自定义项目的菜单时，它将被添加为垂直菜单项，而我需要将其作为垂直子菜单添加到其中一个根项目。请找到描述现在发生的事情和我需要的图片。 Current behavior Expected behavior

Product2是一个自定义内容项，应作为条目添加到垂直菜单中，如第二张图片所示

Answer 1

这项任务相当复杂。涉及几个步骤。

了解如何创建子主题

请参阅official documentation，创建子主题并启用它
了解形状的概念交替

请参阅official documentation
配置管理区域中的菜单

转到管理区域，点击菜单中的导航并添加一些菜单项和子项，例如
```
[ Home (Content Menu Item) ]
[ Service (Content Menu Item) ]
  [ Document Storage (Custom Link) ]
```
一旦你有了这个结构，Orchard就会通过主题中的@Zone(Model.Navigation)调用来渲染这个结构。你必须自己搜索这个电话的位置，这取决于主题。

我的孩子主题使用Layout.cshtml替代品，在需要的地方调用@Zone(Model.Navigation)，如此
```
@{
  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>
```
现在，如果Orchard呈现菜单本身，它将使用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>

正如你所看到的，很多工作但非常灵活。

Orchard CMS - 在Home旁边创建垂直导航菜单

1 个答案: