Question

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

我不确定如何以良好的方式填充下拉列表。它们不是子页面或类似的东西，但它们只是简化下降以使标题不那么宽。这里是我如何通过抓住Umbraco中的链接使用Razor填充我的标题：

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

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

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

我希望这是有道理的。

有没有一种简单易行的方法？

Answer 1

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

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

如果您计划使导航更加灵活，您可能需要做一些更有趣的事情，您可以查看类似嵌套内容包的内容来帮助您这样做吗？

Answer 2

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

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

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

然后我在主文档类型上创建了一个新属性，名为＆＃34;显示下拉列表＆＃34;。如果勾选此选项，则会显示页面上的下拉列表。我不得不这样做，因为有孩子的页面（if(item.Children.Any())）无论如何都是真的。

动态下拉菜单＆＃34;生成＆＃34;从Umbraco后端可能吗？

2 个答案: