umbraco学习3：Template

最新推荐文章于 2018-07-07 22:12:42 发布

yanxk888

最新推荐文章于 2018-07-07 22:12:42 发布

阅读量1.8k

点赞数

分类专栏： umbraco 文章标签： template umbraco cms

本文链接：https://blog.csdn.net/yanxk888/article/details/8520389

版权

umbraco 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在umbraco中，Template用来完成页面的显示，定义了页面的显示模板。其本质就是asp.net中的master page，类似于document type，template也支持继承，一般的umbraco网站设计中，都会首先定义一个master page，其他的页面继承于该master page，以简化代码和便于页面的设计。这种继承是通过asp.net 的Content Placeholder实现的。接下来，笔者通过一个例子讲解下Template的相关概念。

选中setting section，右键点击document types选择create，创建一个名为master的document type，在弹出框中可以选择是否创建匹配的template，如下图所示：

展开Template文件夹，我们会看到这里自动创建了一个同样名为Master的template，代码如下：

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">

</asp:Content>

我们将Master模板作为其他模板页的祖先模板，在该模板页中加入html的主标签，以及css和js文件的引用，并添加相应的placeholder，便于继承该模板的页面使用，代码如下：

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Title</title>
        </head>
        <body>
            <div id="siteHeader"></div>
            <div id="siteContent">					
				<asp:ContentPlaceHolder Id="SiteContentPlaceHolder" runat="server">
					<!-- Insert default "SiteContentPlaceHolder" markup here -->
				</asp:ContentPlaceHolder>
            </div>
            <div id="siteBottom"></div>
        </body>
    </html>
</asp:Content>

接下来我们创建一个名称为home的document type，并且继承于master，相应的会自动创建一个名称为home的template，设置它继承于master template，代码如下：

<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %>

<asp:content ContentPlaceHolderId="SiteContentPlaceHolder" runat="server">
	
</asp:content>

为了直观的看到显示效果，我们添加相应的property，并创建一个新的页面来查看结果。首先，为master document type创建名为page title和page description属性，并放在page info tab下，为home document type创建名为homeText和homePhoto的属性，并放在homeContent tab下。由于继承，home将拥有master的属性。如下图所示：

添加完成后，选中Content section，右键Content选择create，创建名为home的页面，给相应的属性赋值：

完成后，我们将修改相应的template文件，以显示相应的属性，修改的master template代码如下：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><umbraco:Item field="pageTitle" runat="server" /></title>
</head>

修改后的home template代码如下：

<asp:content ContentPlaceHolderId="SiteContentPlaceHolder" runat="server">
	<div id="homeContent">
       <div id="homePhoto">
            <img alt="my baby" src="<umbraco:Item field='homePhoto' runat='server' />" />
       </div> 
        <div id="homeText">
            <umbraco:Item field="homeText" runat="server" />
        </div>
    </div>
</asp:content>

返回到content section，选中home节点，点击preview，显示的页面如下：

可以看到笔者填写的信息都显示了出来，因为没有样式文件，所以显示效果不是很友好，接下来，我们将讲解如何添加style sheet文件。

yanxk888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
umbraco学习3：Template

在umbraco中，Template用来完成页面的显示，定义了页面的显示模板。其本质就是asp.net中的master page，类似于document type，template也支持继承，一般的umbraco网站设计中，都会首先定义一个master page，其他的页面继承于该master page，以简化代码和便于页面的设计。这种继承是通过asp.net 的Content Placehold
复制链接

扫一扫

专栏目录