テンプレートの分離
この章からプロジェクトを開始します。まず、背景テンプレートを Web サイトのルート ディレクトリに置き、次にその JS ファイルと CSS ファイルのパスをテンプレートに導入し、それぞれが含まれている部分を分離します。テンプレートが同じ場合は共通のファイルに置き、テンプレートファイルに導入します。
バックエンドのテンプレート ホームページは次のように表示されます。
#上の図では、赤線で強調(diào)表示した場所がすべての列にあります。場所は全く同じなので、テンプレートファイルごとにこの2つの部分を分ける必要がありますが、ここではホームページの分離のみを説明します。他のテンプレートの分離もホームページと全く同じです。
まず、エディタでホームページ ファイルを開きます。
index.php
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>后臺管理</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">后臺管理</a></h1> <ul class="navbar-list clearfix"> <li><a class="on" href="index.html">首頁</a></li> <li><a href="#" target="_blank">網(wǎng)站首頁</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>分類管理</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>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設置</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>歡迎使用后臺模板</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>新增作品分類</a> <a href="#"><i class="icon-font"></i>新增博客分類</a> <a href="#"><i class="icon-font"></i>作品評論</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">運行環(huán)境</label><span class="res-info">Apache/2.2.21 (Win64) PHP/5.3.10</span> </li> <li> <label class="res-lab">PHP運行方式</label><span class="res-info">apache2handler</span> </li> <li> <label class="res-lab">靜靜設計-版本</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">北京時間</label><span class="res-info">2014年3月18日 21:08:24</span> </li> <li> <label class="res-lab">服務器域名/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>
ホームページ ファイルを開いた後、正しい JS を配置し、CSS を?qū)毪筏蓼攻匹螗抓飑`ト ファイルにパスを追加し、ブラウザで実行してレイアウトが正しいかどうかを確認します。ホームページが正常に表示されたら、F12 キーを押してテンプレートのヘッダー ファイルを見つけ、ヘッダー ファイルを分離してパブリックに置きます。 (後で參照されるパスが正しい限り、ここでは何をしても構(gòu)いません)
ここで分離したヘッダー ファイルの名前は 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">后臺管理</a></h1> <ul class="navbar-list clearfix"> <li><a class="on" href="index.html">首頁</a></li> <li><a href="#" target="_blank">網(wǎng)站首頁</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è)のファイルを見つけて分割します。ここでは、左側(cè)の分割ファイルに left.php という名前を付けて分割します。ファイルは次のとおりです:
<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>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設置</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>
分割されたファイルをテンプレートに導入する前の、ホームページの表示効果は次のとおりです:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺管理</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>歡迎使用后臺模板</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>新增作品分類</a>
<a href="#"><i class="icon-font"></i>新增博客分類</a>
<a href="#"><i class="icon-font"></i>作品評論</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">運行環(huán)境</label><span class="res-info">Apache/2.2.21 (Win64) PHP/5.3.10</span>
</li>
<li>
<label class="res-lab">PHP運行方式</label><span class="res-info">apache2handler</span>
</li>
<li>
<label class="res-lab">靜靜設計-版本</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">北京時間</label><span class="res-info">2014年3月18日 21:08:24</span>
</li>
<li>
<label class="res-lab">服務器域名/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>このようにして、分離に成功しました。これにより、コードがより簡潔になり、管理が容易になります。テンプレートの分離は習得しなければならない知識です。テンプレートの分離は、バックエンドだけでなくフロントエンドでも。急いで試してみてください
