一个网站很多页面都有相同的部分，比如公共的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 布局方式，你可以根据自己实际业务对布局进行调整和优化。
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » include模板布局
