您的位置：首页 > 运维架构 > 网站架构

网站开发（五）分离后台公共页面

2017-08-14 20:06 447 查看

制作过网站的人都知道，分离公共页面是必须的，它的优点有很多，最显著的还是使代码精简，加快页面加载速度

分离公共页面一般都是将header，侧边栏，footer分离出来，用include到原代码中

比如在后台首页可以看出，无论你点哪个管理页面，它的侧边栏和导航栏都是不会变的，所以你不可能每个页面都去写同样的导航的侧边栏，只需要加在Common中就ok

一、创建存放header，left的文件夹

在Admin/View下新建一个Common文件夹—>再Common下新建header.html、left.html(如果有footer页脚也建一下)

进入header.html和left.html编辑

二、 header.html编辑

将title以下到header结束剪切到header.html中

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/libs/modernizr.min.js"></script>
</head>
<body>
<div class="topbar-wrap white">
<div class="topbar-inner clearfix">
<div class="topbar-logo-wrap clearfix">
<h1 class="topbar-logo none"><a href="index.html" class="navbar-brand">后台管理</a></h1>
<ul class="navbar-list clearfix">
<li><a class="on" href="index.html">首页</a></li>
<li><a href="#" target="_blank">网站首页</a></li>
</ul>
</div>
<div class="top-info-wrap">
<ul class="top-info-list clearfix">
<li><a href="#">管理员</a></li>
<li><a href="#">修改密码</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
</div>

三、left.html编辑

将index中的侧边栏剪切到left.html，记住这个时候index.html中没有侧边栏代码

<div class="container clearfix">
<div class="sidebar-wrap">
<div class="sidebar-title">
<h1>菜单</h1>
</div>
<div class="sidebar-content">
<ul class="sidebar-list">
<li>
<a href="#"><i class="icon-font"></i>常用操作</a>
<ul class="sub-menu">
<li><a href="design.html"><i class="icon-font"></i>作品管理</a></li>
<li><a href="design.html"><i class="icon-font"></i>博文管理</a></li>
<li><a href="design.html"><i class="icon-font"></i>分类管理</a></li>
<li><a href="design.html"><i class="icon-font"></i>留言管理</a></li>
<li><a href="design.html"><i class="icon-font"></i>评论管理</a></li>
<li><a href="design.html"><i class="icon-font"></i>友情链接</a></li>
<li><a href="design.html"><i class="icon-font"></i>广告管理</a></li>
</ul>
</li>
<li>
<a href="#"><i class="icon-font"></i>系统管理</a>
<ul class="sub-menu">
<li><a href="system.html"><i class="icon-font"></i>系统设置</a></li>
<li><a href="system.html"><i class="icon-font"></i>清理缓存</a></li>
<li><a href="system.html"><i class="icon-font"></i>数据备份</a></li>
<li><a href="system.html"><i class="icon-font"></i>数据还原</a></li>
</ul>
</li>
</ul>
</div>
</div>

这个时候后台首页是乱的，因为我们剪切了header和left，所以需要利用include标签将header和left包括进去（include标签写的位置规定要是原来header或left代码所在的位置）

四、在index.html（后台首页页面中加include）

在剪切掉的header部分和left部分加上两段代码即可

<include file="Common:header"/>
<include file="Common:left"/>

代码意思就是包含Common文件夹下的header文件（就是把刚刚分离出去的页面引过来）

这就将Common部分的头部和侧边栏包括进来了，大大减短了代码量

分离公共页面就是这样，因为Admin和Home的结构一模一样，所以前台首页分离公共页面和后台大同小异差不多

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航