在开发后台项目时，后台界面的导航等等的公共部分都是重复使用的，如果每个页面都要写公共部分的页面布局的话，代码会显得格外臃肿多余。此时，html页面分离引用就显得非常重要。
如下图的后台页面。（黑色部分是页面公用的部分）
接下来进行页面分离：
分析（使用layui基本的后台布局界面做分离例子，如上图的界面）：
layui基本后台的html页面代码的基本结构如下：
<!-- 头部 --><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>layout 后台大布局 - Layui</title><link rel="stylesheet" href="../src/css/layui.css"></head><!-- 文件引入部分 包括css 和 js 文件的引入 --><!-- 躯干部分，导航部分 --><body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><p style="display:none" data-type="png" data-w="254" style="">接下来介绍各个文件的代码：
head.html
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>{$title}</title><!-- {$title} 在tp的控制器中通过 $this->assign('title',"title名");定义即可 -->files.html
<link rel="stylesheet" href="__Layui__/css/layui.css"><link rel="stylesheet" href="__STATIC__/iconfont/logo_icon.css"><link rel="stylesheet" href="__STATIC__/css/admin/nav.css"><script src="__STATIC__/layui/jquery.js"></script><script src="__Layui__/layui.all.js"></script>nav.html
<body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo"><span class="logoBox" id="logoBox" title="首页"><icon class="iconfont icon-cangku zhang_icon-cangku"></icon><span class="SystemStyle">SystemName</span></span></div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="__STATIC__/images/logo/logo.png" class="layui-nav-img">贤心</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd><dd><a href="">退出登录</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">所有商品</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="javascript:;">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="{:url('Partitions/index')}">仓库分区管理</a></li><li class="layui-nav-item"><a href="">发布商品</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">footer.html
</div></div><div class="layui-footer"><!-- 底部固定区域 -->? layui.com - 底部固定区域</div></div></body></html>在Base.html文件中构建html的基本格式。即使用上述的分离出来的文件进行拼接。
拼接后代码如下：
{block name="head"}{include file="Public/head"/} //头部部分{/block}{block name="files"}{include file="Public/files" /} //文件引入部分{/block}{block name="nav"}{include file="Public/nav" /} //固定部分{/block}{block name="contents"}主体内容部分 //主图内容部分，因为是变化的部分，不需要引入文件{/block}{block name="footer"}{include file="Public/footer" /} //页底固定部分{/block}</body></html>使用方法：
在需要使用的页面中继承上面的Base.html文件，若需要对各个部分进行修改的话，直接在当前页面对对应的部分进行修改即可。
继承方法如下：
{extend name="Public:Base"/}//继承Base页面。显示的结果受Base页面的影响。{block name="files"}//同理，若要修改文件导入的部分，即可在此直接引入需要的css或者js文件即可。{/block}{block name="contents"}//因为主体部分是变化的，所以在这里写主体部分的html代码即可。{/block}
版权声明：本站部分内容由互联网用户自发贡献，文章观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请拨打网站电话或发送邮件至1330763388@qq.com 反馈举报，一经查实，本站将立刻删除。
文章标题：tp5 后台开发公共部分的 html 页面分离 方法。发布于2024-01-16 22:34:12
