本例没有使用layout,相关配置一定是:
'LAYOUT_ON'=>false,ba<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<include file="Public/head"/>
</head>
<body>
<!-- 头部 -->
<include file="Public/header"/>
<!-- /头部 -->
<!-- 主体 -->
<include file="Public/body"/>
<!-- /主体 -->
<!-- 底部 -->
<include file="Public/footer"/>
<!-- /底部 -->
</body>
</html>我这里所说的多模板技术,就是在“Public/body.html”文件中实现多种布局模板的嵌套技术。在OneThink中实现多模板技术非常简单,跟我来:
Public/body.html
<block name="topflash"></block>
<div id="main-container" class="container">
<div class="row">
<block name="left"></block>
<block name="body"></block>
</div>
</div>
<script type="text/javascript">
$(function(){
$(window).resize(function(){
$("#main-container").css("min-height", $(window).height() - 343);
}).resize();
})
</script>在body.html中我定义了三个<block>(注意<block>不能嵌套):一、定义顶部区块,可以放入一个flash轮播广告
<block name="topflash"></block>二、定义左侧菜单栏<block name="left"></block>三、定义右侧主体内容<block name="body"></block>“左侧菜单栏和右侧主体内容”也可以换成“左侧主体内容和右侧菜单栏”,这个完全取决于你页面中<div>的css样式定义。通过以上定义,body.html的主体框架就出来了,接下来我们就可以据此创建一个body.html的新模板应用了。
我们创建一个会员中心首页
Mem/index.html
<extend name="Base/common" />
<block name="topflash"><include file="Public/topflash_mem"/></block>
<block name="body">
您已登录会员中心
</block>
<block name="left"><include file="Public/left_mem"/></block>会员中心首页index.html文件中我们定义了两个子模板文件:topflash_mem和left_mem,这两个文件就是会员中心通用的“顶部轮播广告位”和“左侧导航菜单”。<block name="body">
您已登录会员中心
</block>这个<block>中的内容就是会员中心各个子页面的实际内容了,复制index.html改个文件名后,在这里修改或添加内容就可以实现多模板开发技术了。Public/left_mem.html
<div class="col-lg-3 bs-docs-sidebar" style="border:1px solid red;height:200px;">
会员中心<BR>
(左侧导航菜单)<BR>
购物车<BR>
我的订单<BR>
修改密码<BR>
退出
</div>Public/topflash_mem.html <div class="container" style="border:1px solid blue;height:50px;">
会员中心的顶部轮播广告位
</div>调用模板控制器的开发,请参考TP开发手册。最后截个图:
最佳答案