從Umbraco後端動態「生成」下拉菜單可能嗎？

我想填充我的頭與鏈接。我目前有兩個下拉菜單。我想用Umbraco和Razor填充鏈接，所以沒有硬編碼。這可以很容易地完成（見下面的代碼），但填充下拉是棘手的部分。從Umbraco後端動態「生成」下拉菜單可能嗎？

我不知道如何以好的方式填充下拉菜單。它們不是子頁面或類似的東西，但是它們只是簡單的下拉框，以便使標題不那麼寬。以下是我用剃刀我的頭，一把抓住在一把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

我不不希望任何鏈接受此影響，因爲鏈接或頁面與頁眉的佈局沒有任何關係。以下是一些示例網址：

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

我希望這是有道理的。

有沒有一個很好的簡單的方法來做到這一點？

來源

2017-04-27 MortenMoulder

有幾種方法可以做到這一點。我通常在網站上進行主導航的方式是使用多個內容選擇器或類似功能，以便我選擇要在導航中顯示的項目。

在您的示例中，您的子菜單項實際上不在父菜單項下。您可以爲每個下拉菜單創建一個選擇器，在您的主節點上說，然後爲每個下拉菜單選擇頁面？

如果你打算做雖然導航更爲靈活，你可能需要做一些事情有點票友，你可以看看像嵌套內容包，以幫助你做到這一點？

來源

2017-04-27 15:00:11 Tim

對不起，非常非常遲到的答案。如果我想這樣做，是不是導航會顯示在我的所有網頁上？我有一個主文檔類型，它基本上包含所有的子頁面。如果我在母版頁上創建一個新的屬性（因爲我希望它顯示在所有頁面上），該屬性也會顯示在子頁面上。這種不好嗎？因爲我基本上只需要我的主人。 – MortenMoulder

您應該只有主頁節點上的屬性。如果你所有的頁面都繼承了，就像你說的那樣，你會遇到問題。但我通常不會將我的所有頁面從主頁繼承。 – Tim

如果您的所有網頁都不會從您的母版頁繼承，那麼您如何抓取所有網頁？你如何創建一個可以被所有頁面繼承的屬性（如SEO標題，描述等）？ – MortenMoulder

所以我找到了一個很好的方法來做到這一點。我需要創建的是一個文檔類型設置爲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> 
    } 
}

我開始創建一個名爲「Dropdown」的文檔類型。此文檔類型的唯一目的是成爲下拉內頁面的父項。然後我設置了允許我必須在下拉菜單中的兩個頁面的權限，然後在主控上設置權限以允許下拉文檔類型。

然後，我在主文檔類型上創建了一個名爲「顯示下拉列表」的新屬性。如果打勾，它會在頁面上顯示下拉菜單。我不得不這樣做，因爲有孩子的網頁（if(item.Children.Any())）無論如何都是真的。

來源

2017-05-02 10:15:25 MortenMoulder

從Umbraco後端動態「生成」下拉菜單可能嗎？

回答

相關問題