模板分離
從這一章節(jié)開(kāi)始，我們就開(kāi)始我們的項(xiàng)目了，首先呢，我們先把我們的后臺(tái)模板放到我們的網(wǎng)站根目錄，然后他JS，css文件的路徑引入到模板中，然后在把各個(gè)模板都相同的地方分離出來(lái)，將其放到一個(gè)公共的文件中，之后再在模板文件中引入即可。
我們后臺(tái)的模板首頁(yè)展示如下：
在上圖中我用紅線(xiàn)勾選出來(lái)的地方，是在每個(gè)欄目都有的地方，且完全相同，所以我們要把這兩部分在各個(gè)模板文件中分離出來(lái)，這里我們只演示分離首頁(yè)的，其他模板的分離是跟首頁(yè)完全一樣的。
首先在我們的編輯器打開(kāi)我們的首頁(yè)文件
index.php
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>后臺(tái)管理</title> <link rel="stylesheet" type="text/css" href="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">后臺(tái)管理</a></h1> <ul class="navbar-list clearfix"> <li><a class="on" href="index.html">首頁(yè)</a></li> <li><a href="#" target="_blank">網(wǎng)站首頁(yè)</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> <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>分類(lè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>評(píng)論管理</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>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設(shè)置</a></li> <li><a href="system.html"><i class="icon-font"></i>清理緩存</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)備份</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)還原</a></li> </ul> </li> </ul> </div> </div> <!--/sidebar--> <div class="main-wrap"> <div class="crumb-wrap"> <div class="crumb-list"><i class="icon-font"></i><span>歡迎使用后臺(tái)模板</span></div> </div> <div class="result-wrap"> <div class="result-title"> <h1>快捷操作</h1> </div> <div class="result-content"> <div class="short-wrap"> <a href="#"><i class="icon-font"></i>新增作品</a> <a href="#"><i class="icon-font"></i>新增博文</a> <a href="#"><i class="icon-font"></i>新增作品分類(lèi)</a> <a href="#"><i class="icon-font"></i>新增博客分類(lèi)</a> <a href="#"><i class="icon-font"></i>作品評(píng)論</a> </div> </div> </div> <div class="result-wrap"> <div class="result-title"> <h1>系統(tǒng)基本信息</h1> </div> <div class="result-content"> <ul class="sys-info-list"> <li> <label class="res-lab">操作系統(tǒng)</label><span class="res-info">WINNT</span> </li> <li> <label class="res-lab">運(yùn)行環(huán)境</label><span class="res-info">Apache/2.2.21 (Win64) PHP/5.3.10</span> </li> <li> <label class="res-lab">PHP運(yùn)行方式</label><span class="res-info">apache2handler</span> </li> <li> <label class="res-lab">靜靜設(shè)計(jì)-版本</label><span class="res-info">v-0.1</span> </li> <li> <label class="res-lab">上傳附件限制</label><span class="res-info">2M</span> </li> <li> <label class="res-lab">北京時(shí)間</label><span class="res-info">2014年3月18日 21:08:24</span> </li> <li> <label class="res-lab">服務(wù)器域名/IP</label><span class="res-info">localhost [ 127.0.0.1 ]</span> </li> <li> <label class="res-lab">Host</label><span class="res-info">127.0.0.1</span> </li> </ul> </div> </div> <div class="result-wrap"> <div class="result-title"> <h1>使用幫助</h1> </div> <div class="result-content"> <ul class="sys-info-list"> <li> </li> </ul> </div> </div> </div> <!--/main--> </div> </body> </html>
打開(kāi)我們的首頁(yè)文件之后，把正確的JS,CSS路徑引入到模板文件中，然后在瀏覽器運(yùn)行，看是否排版正確，在首頁(yè)正常顯示之后，按F12，查找模板的頭部文件，將頭部文件分離出來(lái)，放到一個(gè)公共的文件夾下（這里你隨意，只要之后引用的路徑正確就好）
這里我們分離的頭部文件起名叫 top.php，分離的代碼文件如下：
top.php
<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">后臺(tái)管理</a></h1> <ul class="navbar-list clearfix"> <li><a class="on" href="index.html">首頁(yè)</a></li> <li><a href="#" target="_blank">網(wǎng)站首頁(yè)</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>
之后再用相同的方式將左側(cè)的文件查找出來(lái)，并分離出來(lái)，這里我們將分離出來(lái)的左側(cè)文件起名叫 left.php ，左側(cè)分離代碼代碼文件如下：
<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>分類(lè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>評(píng)論管理</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>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設(shè)置</a></li> <li><a href="system.html"><i class="icon-font"></i>清理緩存</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)備份</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)還原</a></li> </ul> </li> </ul> </div> </div>
在我們沒(méi)有將分離出來(lái)的文件引入到模板中之前，首頁(yè)的顯示效果如下：
下面我們將我們的模板文件使用 include_once()，引入到模板中去
PS:路徑一定要寫(xiě)對(duì)
處理過(guò)之后的首頁(yè)文件 index.php ，代碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺(tái)管理</title>
<link rel="stylesheet" type="text/css" href="../../public/style/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../public/style/css/main.css"/>
<script type="text/javascript" src="../../public/style/js/libs/modernizr.min.js"></script>
</head>
<body>
<?php include_once("../../common/top.php"); ?>
<div class="container clearfix">
<?php include("../../common/left.php"); ?>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><span>歡迎使用后臺(tái)模板</span></div>
</div>
<div class="result-wrap">
<div class="result-title">
<h1>快捷操作</h1>
</div>
<div class="result-content">
<div class="short-wrap">
<a href="#"><i class="icon-font"></i>新增作品</a>
<a href="#"><i class="icon-font"></i>新增博文</a>
<a href="#"><i class="icon-font"></i>新增作品分類(lèi)</a>
<a href="#"><i class="icon-font"></i>新增博客分類(lèi)</a>
<a href="#"><i class="icon-font"></i>作品評(píng)論</a>
</div>
</div>
</div>
<div class="result-wrap">
<div class="result-title">
<h1>系統(tǒng)基本信息</h1>
</div>
<div class="result-content">
<ul class="sys-info-list">
<li>
<label class="res-lab">操作系統(tǒng)</label><span class="res-info">WINNT</span>
</li>
<li>
<label class="res-lab">運(yùn)行環(huán)境</label><span class="res-info">Apache/2.2.21 (Win64) PHP/5.3.10</span>
</li>
<li>
<label class="res-lab">PHP運(yùn)行方式</label><span class="res-info">apache2handler</span>
</li>
<li>
<label class="res-lab">靜靜設(shè)計(jì)-版本</label><span class="res-info">v-0.1</span>
</li>
<li>
<label class="res-lab">上傳附件限制</label><span class="res-info">2M</span>
</li>
<li>
<label class="res-lab">北京時(shí)間</label><span class="res-info">2014年3月18日 21:08:24</span>
</li>
<li>
<label class="res-lab">服務(wù)器域名/IP</label><span class="res-info">localhost [ 127.0.0.1 ]</span>
</li>
<li>
<label class="res-lab">Host</label><span class="res-info">127.0.0.1</span>
</li>
</ul>
</div>
</div>
<div class="result-wrap">
<div class="result-title">
<h1>使用幫助</h1>
</div>
<div class="result-content">
<ul class="sys-info-list">
<li>
</li>
</ul>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>這樣我們就成功的將分離出來(lái)了，是我們的代碼更為簡(jiǎn)潔，更為的方便管理，模板分離是必須要掌握的知識(shí)，不經(jīng)在后臺(tái)需要，在前臺(tái)也是需要的，你趕緊去試試吧
