跳轉到內容

Umbraco/示例與文章/模板/主模板

來自華夏公益教科書

使用主模板

[編輯 | 編輯原始碼]

在 Umbraco 中,子模板可以包含主模板,以確保一組頁面具有共同的元素(通常是頁首和頁尾)。

在閱讀本文之前,您需要了解如何建立 Umbraco 文件和模板型別。

主模板示例

[編輯 | 編輯原始碼]

在這個非常簡單的示例中,我們將建立一個主模板,用於建立開頭的 HTML 和 HEAD 標籤,開啟 BODY 標籤,插入子模板,然後關閉 HTML 標籤。

在 Umbraco 中,建立一個名為“Master”(可以是任何名稱)的模板,其中包含以下程式碼。

<html>
	<head>
		<title>
			<?UMBRACO_GETITEM field="pageName"/>
		</title>
	</head>
	<body>
		<?UMBRACO_TEMPLATE_LOAD_CHILD/>
	</body>
</html>

重要!Umbraco 2.1 中報告了一個錯誤,其中 <?UMBRACO_TEMPLATE_LOAD_CHILD/> 中的空格會導致主/子模板功能失敗。請嚴格按照原樣複製貼上。

關於主模板示例的說明

[編輯 | 編輯原始碼]

上面的模板應該是相當熟悉的 HTML。有兩個 Umbraco 標籤需要您注意

<?UMBRACO_GETITEM field="pageName"/>

pageName 屬性是 Umbraco 內容 XML 中所有節點的通用元素。上面的程式碼只是將此名稱插入到 html 標題標籤中。

<?UMBRACO_TEMPLATE_LOAD_CHILD/>

上面的程式碼告訴 Umbraco,這是應該在標記中插入子模板的位置。我們將在下一步學習如何做到這一點。

建立子模板

[編輯 | 編輯原始碼]

在 Umbraco 中,建立一個名為“Child”或您想要的任何名稱的模板。

在左側選單中,單擊您剛剛建立的模板。

模板的原始碼可以是您想要的任何內容,但對於這個非常簡單的示例,讓我們使用以下內容

<p>I am output from the child template</p>

在儲存模板之前,更改名為“主模板”的下拉框,使值設定為在本教程第一步中建立的主模板。

測試您的工作

[編輯 | 編輯原始碼]

從設定選單中選擇一種文件型別,或建立一個新的空白文件型別。

將您在第二步中建立的子模板新增到您文件型別的“允許模板”中。

轉到 Umbraco 的內容部分,並建立您文件型別的一個節點。

現在預覽該節點,並將“模板型別”設定為您在本教程第二步中建立的子模板。

檢視預覽的原始碼,結果應顯示您的主模板已包含在子模板周圍,如下所示

<html>
	<head>
		<title>
			Node Title
		</title>
	</head>
	<body>
		<p>I am output from the child template</p>
	</body>
</html>

進一步步驟

[編輯 | 編輯原始碼]

您現在可以擴充套件您的主模板,在 HEAD 元素中包含一個通用的樣式表和其他元資料。

華夏公益教科書