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

来源：互联网发布：java工程师培训学费编辑：程序博客网时间：2024/05/17 07:45

制作过网站的人都知道，分离公共页面是必须的，它的优点有很多，最显著的还是使代码精简，加快页面加载速度
分离公共页面一般都是将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">&#xe003;</i>常用操作</a>                    <ul class="sub-menu">                        <li><a href="design.html"><i class="icon-font">&#xe008;</i>作品管理</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe005;</i>博文管理</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe006;</i>分类管理</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe004;</i>留言管理</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe012;</i>评论管理</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe052;</i>友情链接</a></li>                        <li><a href="design.html"><i class="icon-font">&#xe033;</i>广告管理</a></li>                    </ul>                </li>                <li>                    <a href="#"><i class="icon-font">&#xe018;</i>系统管理</a>                    <ul class="sub-menu">                        <li><a href="system.html"><i class="icon-font">&#xe017;</i>系统设置</a></li>                        <li><a href="system.html"><i class="icon-font">&#xe037;</i>清理缓存</a></li>                        <li><a href="system.html"><i class="icon-font">&#xe046;</i>数据备份</a></li>                        <li><a href="system.html"><i class="icon-font">&#xe045;</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的结构一模一样，所以前台首页分离公共页面和后台大同小异差不多

阅读全文

1 0