orchardcms - Orchard CMS - 在主页旁边创建垂直导航菜单

Question

我是 Orchard 的新手，并试图弄清楚它是如何在代码方面工作的。因此，我通过代码创建了一个自定义内容类型，并且能够在此内容类型下创建内容项。我在内容项的编辑器页面上有“在菜单上显示”复选框。但是当我检查它并选择我想要添加这个新创建的自定义项的菜单时，它会作为垂直菜单项添加，而我需要将它作为垂直子菜单添加到根项之一。请找到描述现在正在发生的事情和我需要什么的图片。当前行为预期行为

Product2 是自定义内容项，应添加为垂直菜单中的条目，如第二张图像所示

score 1 · Accepted Answer

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

了解如何创建子主题

查看官方文档，创建一个子主题并启用它
理解形状交替的概念

见官方文档
在管理区域配置菜单

进入管理区域，点击菜单中的导航并添加一些菜单项和子项，例如
```
[ 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>

如您所见，工作量很大，但非常灵活。

orchardcms - Orchard CMS - 在主页旁边创建垂直导航菜单

1 回答 1

Related

Reference