Umbraco(7)-The Navigation Menu And A Parent Page with Infinite Children

原文鏈接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco7the-navigation-menu-and-a-parent-page-with-in-finite-children/

Master Template - The Navigation Menu

現在讓我們開始解決導航菜單-這裏有兩個方法,你可以動態創建一個導航菜單的頁面內容樹中,這樣當一個編譯器創建了一個頁面會自動出現,或者可以更簡單的寫硬編碼。現在我們準備寫硬編碼(當你開始建立一個網站編寫硬編碼,你可以移動替換這個,這是一個好的辦法)我們之後會讓給你之後作爲練習。編輯你的Master template編寫<nav>標籤:

<nav>

    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/contact-us">Contact Us</a></li>
        <li><a href="/articles">Articles</a></li>
    </ul>
</nav>

保存你的更改,然後測試我們的菜單。你將會發現點擊文章鏈接拋出Umbraco錯誤說我們沒有創建這個頁面。現在我們開始創建這些頁面。

Articles Parent and Article Items - A Parent Page with Infinite Children

擁有一個父頁面的文章和一些有關子文章的編譯器可以自由添加一些很好例子頁面。假設我們虛構的公司,小部件有限公司,一個月寫十篇文章,希望文章頁面就像一個博客(例如:只用這個功能你可以爲你的博客添加一個新聞和事件頁面)。

創建新的文檔類型“Article Main”和“Article Item”。Document Types Settings > Document Types (hover) > ... > + Create。記得Master Document Type = "none.."

創建以下的Tabs和數據類型:

Articles Main

 

Tab = Intro

"Articles Title" - Type = Textstring

"Articles Body Text" - type = Rich Text Editor**

 

【圖38】Article Main的文檔類型和數據類型

 

Articles Item

 

Tab = Contents

"Article Title" - Type = Textstring

"Article Contents" - type = Rich Text Editor**

【圖39】Article Item的文檔類型和數據類型

現在到Settings > Document Types >Articles Main node > Structure tab > Allowed child nodetypes ,然後選擇Article Item。這會允許我們在該目錄下創建它的Item(它作爲父容器)。當然我們還需要在Acticle Main的節點下創建Homepage node(Settings > Document Types > Homepage node > Structure tab > Allowed child nodetypes --不要選擇Article Item 僅僅在主節點水平就可以)。

現在到Content > Homepage node (hover)> ... 創建一個新的節點是Articles Main類型的“Articles”(如果你發現沒有這個選項,你需要返回檢查你是否允許子節點--你忘記了點擊保存)。給這篇文章節點添加一些內容和標題,然後創建幾條內容節點在這個節點上(Content > Homepage node > Articles node (hover) > ...)。

現在你應該有一個內容樹看起來類似下圖(很明顯這裏顯示的都是自己頁面節點的名字)。接着讓我們去更新我們剛剛創建的模板(當我們創建文檔類型時會自動更新)。第一次更新他用Master作爲主節點Settings > Templates > Articles Main node > Properties tab > Master template dropdown = "Master"  -記得做類似Articles Item的事情,點擊保存Save。

【圖40】文章內容樹節點

複製簡單的內容頁面模板,粘貼到每一個新建的模板中(記得點擊保存)。然後替換頁面字段相關的例句,比如:articlesTitle 和 articlesBodyText 替換爲Articles Main 和 articleTitle ;articleContents 替換爲Article Item。

如果我們現在去瀏覽器中檢查我們的文章主頁面,我們應該可以看到內容了。現在我們需要列出頁面下的子節點,這樣我們就可以看到我們的文章列表。Umbraco使這項任務變得很簡單,但是我們需要使用Razor語言。

從左側的菜單上選擇Developer菜單,懸浮在Partial View Macros Files node 來獲得更多的菜單...點擊+ Create 名稱爲“listArticles”,接着在Choose a snippet片段中選擇“List Child Pages Ordered By Date”後點擊Create。

【圖41 模板父級文章和宏代碼】

現在我們要做的就是連接文章主頁列出我們的子文章。編輯主文章節點模板Settings > Templates node > Master node > Articles Main node > Template tab. 根據段落標籤輸入回車後點擊Insert Macro按鈕,然後點擊保存按鈕。

現在來檢查我們的文章頁面--編輯剛纔創建的部分(宏)-Developer > Partial View Macro Files > listArticles.cshtml ,改變其內容爲:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@* OrderBy() takes the property to sort by and optionally order desc/asc *@

@foreach (var page in CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"))
{ 
    <div class="article">
        <div class="articletitle"><a href="@page.Url">@page.Name</a></div>
        <div class="articlepreview">@Umbraco.Truncate(@page.ArticleContents,100) <a href="@page.Url">Read More..</a></div>
    </div>
    <hr/>
}

現在去瀏覽器看一下我們的頁面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章