Umbraco（6）-Creating More Pages Using the Master - Part 2

創(chuàng)建一個Contact Us頁面

我們將創(chuàng)建一個新的”聯(lián)系我們“頁面，在該頁面我們將放置簡單的聯(lián)系信息。對于添加這個功能你可能想替換為一個完全成熟的形式。

一些有效的解決方案：

• 使用表面控制器構(gòu)建自己的接觸形式：

     http://our.umbraco.org/documentation/Reference/Templating/Mvc/forms或者是

     http://umbraco.tv/videos/developer/fundamentals/surface-controllers/

• 如果你不是一個程序員，可以使用現(xiàn)成的包：

     http://umbraco.com/products/more-add-ons/contour.aspx

現(xiàn)在讓我們創(chuàng)建一個簡單的頁面 - 一個用戶可以提供一個標(biāo)題和一些富文本的頁面。這非常類似于我們的主頁文檔類型，但是，目前假設(shè)我們你要去開發(fā)非常具體的這個東西（例如。添加了文章和其他內(nèi)容塊條。）

打開Settings > Document Types (hover) > ... > + Create。我們創(chuàng)建一個頁面命名為"Simple Content Page"。選擇Master Document Type為"none..."（使用主文檔類型允許我們從父級繼承文檔類型）但是我們將創(chuàng)建一個匹配的模板，所以默認(rèn)那個選擇。

首先讓我們選擇一個圖標(biāo) - 輸入單詞"Content"來進行篩選和選擇這個文件的圖標(biāo)。在描述類型簡單寫"A simple content page",默認(rèn)Allowed Templates（例如，只有Simple Content頁面被選擇）。點擊Save按鈕。

現(xiàn)在點擊Settings > Templates (hover) > ... ，然后單擊Reload Nodes。選擇Simple Content Page節(jié)點，進入Properties選項卡。改變Master Template下拉選擇Master這個模板 - 這將意味著就像我們Homepage模板一樣，我們從master模板中得到頁眉和頁腳。

單擊Save保存，然后重新加載Template選項卡，你將會看到Razor語言被更新為：Layout="Master.cshtml"。如果它沒有更新，點擊其他不同的節(jié)點，然后重新加載?，F(xiàn)在需要給這個模板加上HTML，然后保存。

<div id="main-container">
    <div id="main" class="wrapper clearfix">
        <section>
            <h3>Header goes here</h3>
            <p>Content goes here</p>
        </section>  
    </div> <!-- #main -->
</div> <!-- #main-container -->

現(xiàn)在我們使用剛剛創(chuàng)建的Document Type和Template來創(chuàng)建一個新的頁面 -  Content > Homepage (hover) > ... > Create. 。但是我們發(fā)現(xiàn)出現(xiàn)了下面的錯誤：

【Umbraco Content 發(fā)生了錯誤：沒有可用的文檔類型】

這是通過設(shè)計——Umbraco的限制是編輯者只能夠創(chuàng)建內(nèi)容編輯，對于開發(fā)者是允許的。這將阻止用戶在主頁下創(chuàng)建一個新的新聞內(nèi)容節(jié)點時，打破一個網(wǎng)站設(shè)計（或整個網(wǎng)站）！不幸地是，這個功能也混淆了許多新的Umbraco使用者——因此，我們在這里向您展示了這個錯誤的原因。

打開Settings > Document Types > Homepage  ，在Structure選項卡中，在標(biāo)簽Allowed child nodetypes后邊你將會看到一列復(fù)選框（不要混淆在Info選項卡中的Allowed template - 稍后我們將討論）。所以我們需要允許用戶能夠創(chuàng)建子節(jié)點，主頁類型為Simple Content Page。選擇復(fù)選框然后保存。

【Homepage - Allowed Child Nodetypes允許創(chuàng)建子節(jié)點】

這里還有一些困惑 - 首先我們要創(chuàng)建一個Simple Content Page，但是我們必須允許創(chuàng)建文檔類型 - 例如，我們創(chuàng)建了一個新的文檔類型，然后隨后我們更新主頁的設(shè)置來能夠使用它。當(dāng)我們創(chuàng)建一個Articles container 和 Article item后，我們再這樣做。我么需要在Articles container 下允許Article item。簡單 - 也許對你來說不簡單，但是你會習(xí)慣它的。

現(xiàn)在返回Content > Homepage (hover) > ... > Create  現(xiàn)在我們已經(jīng)創(chuàng)建Simple Content Page成功！選擇并輸入一個名稱（文本頂部紅色區(qū)域）。你可以看到我們僅僅只有一個Properties選項卡-沒有數(shù)據(jù)。這是不同的文檔類型創(chuàng)建的主頁，我們沒有創(chuàng)建任何的標(biāo)簽和數(shù)據(jù)屬性（例如：沒有bodyText或pageTitle）。點擊Save and Publish。

【創(chuàng)建我們的Contact頁面】

我們重新加載Content，將會看到在homepage下有Contact Us頁面。這是大多數(shù)網(wǎng)站的推薦結(jié)構(gòu) - 你的一級頁面將在主頁下?，F(xiàn)在去看看這個頁面 - 如果你在Properties這個選項卡，你將會看到Link To document一行 - 點擊它。你可能會再一次發(fā)現(xiàn)沒有樣式的頁面。這是因為這個模板的設(shè)計者認(rèn)為你的網(wǎng)站將是一個平面結(jié)構(gòu) - 例如，所有頁面建立在相同的一級，所以瀏覽器不能發(fā)現(xiàn)在homepage這一級的CSS和JS。你需要更新Master模板修改CSS和JS文件的引入方式：

<link rel="stylesheet" href="/css/style.css">

<script src="/js/libs/modernizr-2.0.6.min.js"></script>

保存模板的修改，之后加載Contact Us頁面。我們現(xiàn)在有一個空的頁面。

我們來添加兩個簡單的字段 - pageTitle (type = Textstring) 和 bodyText (type Rich Text Editor)。如果你不知道如何添加字段，你可以按照創(chuàng)建主頁面文檔類型的說明來創(chuàng)建。然后連接這些字段 - 如果這不是你的第二天性，可以通過編輯Homepage下的模板。

【Contact Us Generic Properties（通用屬性）】

【Contact Us Template with Data Fields】

現(xiàn)在添加一些內(nèi)容Content > Homepage node > Contact Us node。 點擊Save and Publish，然后在重新加載時，你會看到更有趣的頁面。

【Contact Us with Some Data】

從主頁使用文檔類型屬性

你可能注意到我們頁腳部分現(xiàn)在還是空的 - 我們沒有從Homepage節(jié)點中得到內(nèi)容。我們需要告訴Umbraco去父節(jié)點Homepage中得到content。現(xiàn)在我們開始編輯這個Master模板。

在Umbraco頁腳字段中有<h4>標(biāo)簽，點擊Insert Umbraco page field按鈕在這里的選項我們忽略所有選項的早期發(fā)揮的作用 - 再一次從Choose field 下拉選項中選擇footerText，但這一次我們還要選擇Recursive這個復(fù)選框。這是在告訴Umbraco，如果這個級別不存在我們請求的節(jié)點字段的話（例如Contact Us），它將會查找內(nèi)容節(jié)點（在我們的例子中這個內(nèi)容在Homepage中） - 這意味著如果你想要編輯來覆蓋默認(rèn)，你可以在Contact Us頁面中創(chuàng)建一個footerText元素，但是在這個領(lǐng)域是不經(jīng)常使用的。點擊Insert，你將會看到不同的Razor語言被加上：

@Umbraco.Field("footerText", recursive: true)

點擊Save，然后重新加載Contact Us頁面。

【原文：https://our.umbraco.org/documentation/using-umbraco/creating-basic-site/Creating-Master-Template-Part-2】