从 Umbraco 后端动态“生成”的下拉菜单可能吗？

Question

我正在尝试用链接填充我的标题。我目前有两个下拉菜单。我想使用 Umbraco 和 Razor 填充链接，因此没有任何内容是硬编码的。这可以很容易地完成（参见下面的代码），但填充下拉列表是棘手的部分。

我不确定如何以一种好的方式填充下拉列表。它们不是子页面或类似的东西，但它们只是使标题不那么宽的下拉菜单。下面是我如何使用 Razor 通过抓取 Umbraco 中的链接来填充我的标题：

var home = CurrentPage.Site();

@foreach (var item in home.Children.Where("Visible"))
{
    <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
        <a href="@item.Url" class="nav-link">@Umbraco.GetDictionaryValue(item.Name)</a>
    </li>
}

home.Children.Where("Visible") 只是简单地抓取所有子页面，我没有检查umbracoNaviHide。

这是目前我的标题是如何创建的，而不是使用 Umbraco（我需要使用来自 Umbraco 的页面来填充）：

<nav class="navbar navbar-toggleable-lg navbar-light fixed-top">
  <div class="d-flex align-items-center justify-content-between">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand ml-3" href="/en">
      <img src="logo.png" class="logo" alt="logo">
    </a>
  </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto justify-content-between full-width">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">About Us</a>
          <a class="dropdown-item" href="#">History</a>
        </div>
      </li>
      <li>
        <a href="" class="nav-link">Our Products</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
          <a class="dropdown-item" href="#">Tips</a>
          <a class="dropdown-item" href="#">News</a>
        </div>
      </li>
      <li>
        <a href="" class="nav-link">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

这将产生如下结果：https://codepen.io/anon/pen/QvyeRm

我不希望任何链接受此影响，因为链接或页面实际上与标题的布局没有任何关系。以下是一些示例 URL：

/en/about-us/
/en/history/
/en/our-products/
/en/tips/

我希望这是有道理的。

有没有好的简单的方法来做到这一点？

Answer 1

有几种方法可以做到这一点。我通常在网站上进行主导航的方式是使用多个内容选择器或类似的方式让我选择要在导航中显示的项目。

在您的示例中，您的子菜单项实际上并不在父菜单项下方。您可以为每个下拉菜单创建一个选择器，比如在您的主节点上，然后为每个下拉菜单选择页面？

如果您打算使导航更加灵活，您可能需要做一些更花哨的事情，您可以查看嵌套内容包之类的东西来帮助您做到这一点？

Answer 2

所以我找到了一个很好的方法。我只需要创建一个文档类型设置为下拉的内容，然后设置标题（基本上是标签），然后为下拉的子项添加权限。

@foreach (var item in selection)
{
    if (item.GetPropertyValue<bool>("showDropdown"))
    {
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                @item.GetVortoValue("Title")
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                @foreach (var child in item.Children)
                {
                    <a class="dropdown-item" href="@child.Url">@child.GetVortoValue("Title")</a>
                }
            </div>
        </li>
    }
    else
    {
        <li>
            <a href="@item.Url" class="nav-link">@item.GetVortoValue("Title")</a>
        </li>
    }
}

我首先创建了一个名为“Dropdown”的文档类型。此文档类型的唯一目的是成为下拉列表中页面的父级。然后我设置权限以允许我必须在下拉列表中的两个页面，并在我的 Master 上设置权限以允许下拉文档类型。

然后我在主文档类型上创建了一个新属性，称为“显示下拉菜单”。如果勾选此项，它将在页面上显示下拉菜单。我必须这样做，因为无论如何有孩子的页面 (if(item.Children.Any())) 都是正确的。