一個網站很多頁面都有相同的部分，比如公共的css和js 文件，導航，底部，還有友情鏈接，如何把這些公共部分有效的組織起來呢，今天我就來說說《include模板布局》。
## 拆分首頁
```
<!DOCTYPE html>
<html>
<head>
<title>標題</title>
<meta name="keywords" content=""/>
<meta name="description" content="">
<!--公共頭部，負責加載公共 css，和其它資源，放在 head.html-->
<!--本頁面自定義的樣式，或其它資源-->
</head>
<body>
<!--導航，放在nav.html-->
<!--主要內容-->
<!--公共底部，放在 footer.html-->
<!--公共js文件，放在scripts.html-->
<!--本頁面自定義的js-->
</body>
</html>
```
## 制作公共頭部文件
在`public/themes/quick_start`目錄下創建`public`目錄，并添加`head.html`,內容如下：
```
<taglib name="app\portal\taglib\Portal"/>
<meta name="author" content="ThinkCMF">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- HTML5 shim for IE8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<link rel="icon" href="__TMPL__/public/assets/images/favicon.png" type="image/png">
<link rel="shortcut icon" href="__TMPL__/public/assets/images/favicon.png" type="image/png">
<!--加載 bootstrap3-->
<link href="__TMPL__/public/assets/simpleboot3/themes/simpleboot3/bootstrap.min.css" rel="stylesheet">
<!--加載 字體圖標-->
<link href="__TMPL__/public/assets/simpleboot3/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<!--站點自定義css-->
<link href="__TMPL__/public/assets/css/style.css" rel="stylesheet">
<!--設置 JS 全局變量-->
<script type="text/javascript">
//全局變量
var GV = {
ROOT: "__ROOT__/",
WEB_ROOT: "__WEB_ROOT__/",
JS_ROOT: "static/js/"
};
</script>
<!--提前引入必要的js-->
<script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
<script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script>
<script src="__STATIC__/js/wind.js"></script>
```
> 資源文件請在`附件`下載
## 制作導航文件
在`public/themes/quick_start/public`目錄下創建`nav.html`,內容如下：
```
<nav class="navbar navbar-default navbar-fixed-top active">
<div class="container active">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="__ROOT__/">{$theme_vars.company_name|default='ThinkCMF'}</a>
</div>
<div class="collapse navbar-collapse active" id="bs-example-navbar-collapse-1">
<ul id="main-menu" class="nav navbar-nav">
<navigation nav-id="" root="" id="main-navigation" class="nav navbar-nav navbar-nav-custom"
max-level="0">
<navigationMenu root="li" class="menu-item menu-item-level-{$level} levelgt1">
<a href="{$menu.href|default=''}" target="{$menu.target|default=''}">
{$menu.name|default=''}
</a>
</navigationMenu>
<navigationFolder root="li"
class="dropdown dropdown-custom dropdown-custom-level-{$level}"
dropdown="ul"
dropdown-class="dropdown-menu dropdown-menu-level-{$level}">
<a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">
{$menu.name|default=''}<span class="caret"></span>
</a>
</navigationFolder>
</navigation>
</ul>
</div>
</div>
</nav>
```
## 制作公共底部文件
在`public/themes/quick_start/public`目錄下創建`footer.html`,內容如下：
```
<br>
<hr>
<div id="footer">
<div class="container">
<div class="links">
<links>
<a href="{$vo.url|default=''}" target="{$vo.target|default=''}">{$vo.name|default=''}</a>
</links>
</div>
<p>
Made by <a href="http://www.thinkcmf.com" target="_blank">ThinkCMF</a>
Code licensed under the
<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow" target="_blank">Apache License v2.0</a>.
<br/>
Based on
<a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>.
Icons from
<a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">Font Awesome</a>
<br>
備案號:
<notempty name="site_info.site_icp">
<a href="http://www.miitbeian.gov.cn/" target="_blank">{$site_info.site_icp}</a>
<else/>
請在后臺設置"網站信息"設置"備案信息"
</notempty>
</p>
</div>
</div>
```
## 制作公共JS文件
在`public/themes/quick_start/public`目錄下創建`scripts.html`,內容如下：
```
<!--引入bootstrap.js-->
<script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script>
<!--引入CMF封裝的前臺 js-->
<script src="__STATIC__/js/frontend.js"></script>
<script>
$(function () {
// 導航優化
$("#main-menu li.dropdown").hover(function () {
$(this).addClass("open");
}, function () {
$(this).removeClass("open");
});
// 導航高亮
$("#main-menu a").each(function () {
if ($(this)[0].href == String(window.location)) {
$(this).parentsUntil("#main-menu>ul>li").addClass("active");
}
});
});
</script>
```
## 拼裝首頁
在這一步我們就使用 include 標簽來加載公共文件，更改后臺首頁模板內容如下：
```
<!DOCTYPE html>
<html>
<head>
<title>標題</title>
<meta name="keywords" content=""/>
<meta name="description" content="">
<!--加載公共頭部文件-->
<include file="public@head"/>
<!--本頁面自定義的樣式，或其它資源-->
</head>
<body>
<!--加載導航文件-->
<include file="public@nav"/>
<div class="container">
<!--主要內容-->
</div>
<!--加載公共底部文件-->
<include file="public@footer"/>
<!--加載公共js文件-->
<include file="public@scripts"/>
<!--本頁面自定義的js-->
</body>
</html>
```
## 預覽結果
到此我們的 include 模板布局已經講完了，大家可以發揮想像把這種布局方式應用在其它頁面，本節只是演示 include 布局方式，你可以根據自己實際業務對布局進行調整和優化。
> 請在`附件`下載本節源碼。