导入doc.js文件，其中headerTpl,footerTpl等一部分内容作为公用的模板，让各个页面都有同样的效果

<script src="../assets/doc/doc.js"></script>

/**
* 提供文档演示的相关接口。
*/
var Doc = {
/**
* 配置所有文件夹信息。
*/
folders: {
/**
* 存放文档系统文件的文件夹。
*/
assets: {
pageName: '工具',
pageTitle: '开发者工具',
pageDescription: 'TealUI 提供了组件定制、代码压缩、合并等常用工具'
}
},
headerTpl: '<nav id="doc_topbar" class="doc-container doc-section doc-clear">\
                    <a href="{baseUrl}{indexUrl}" id="doc_logo" title="TealUI(网页版)">TealUI <small>{version}</small></a>\
                    <span id="doc_menu" class="doc-right">\
                        <button type="button" id="doc_menu_search" onclick="Doc.toggleSidebar();" {touchToClick}><span class="doc-icon">☌</span></button>\
                        <button type="button" id="doc_menu_navbar" onclick="Doc.toggleNavbar();" {touchToClick}><span class="doc-icon">≡</span></button>\
                    </span>\
                    <ul id="doc_navbar">\
                        <li{actived:docs}><a href="{baseUrl}docs/{indexUrl}">开始使用</a></li>\
                        <li{actived:demos}><a href="{baseUrl}demos/{indexUrl}">实例演示</a></li>\
                        <li{actived:src}><a href="{baseUrl}src/{indexUrl}">所有组件</a></li>\
                        <li{actived:assets}><a href="{baseUrl}assets/tools/download.html">下载定制</a></li>\
                        <li><a href="https://github.com/Teal/TealUI/issues" target="_blank">讨论</a></li>\
                    </ul>\
                    <form id="doc_search" class="doc-right" onsubmit="Doc.onSuggestSubmit(\'doc_search_suggest\'); return false;">\
                        <input type="text" placeholder="搜索组件..." value="{search}" autocomplete="off"  onfocus="Doc.showSearchSuggest(this.value)" onblur="Doc.hideSearchSuggest()" oninput="Doc.onSuggestInput(\'doc_search_suggest\', this.value, false)" onchange="Doc.onSuggestInput(\'doc_search_suggest\', this.value, false)" onkeydown="Doc.onSuggestKeyPress(\'doc_search_suggest\', event)" />\
                        <button type="submit" class="doc-icon-search"><span class="doc-icon">☌</span></button>\
                    </form>\
                </nav>\
                <header id="doc_header" class="doc-container doc-section">\
                    <h1>{current:pageTitle}</h1>\
                    <p>{current:pageDescription}</p>\
                </header>\
                <aside id="doc_sidebar">\
                    <form id="doc_sidebar_filter" onsubmit="Doc.onSuggestSubmit(\'doc_sidebar_list\'); return false;">\
                        <input type="search" class="doc-section" placeholder="搜索{current:pageName}..."  autocomplete="off" oninput="Doc.onSuggestInput(\'doc_sidebar_list\', this.value, true)" onchange="Doc.onSuggestInput(\'doc_sidebar_list\', this.value, true)" onkeydown="Doc.onSuggestKeyPress(\'doc_sidebar_list\', event)" />\
                    </form>\
                    <dl id="doc_sidebar_list" class="doc-section doc-list"><dd><small>正在载入列表...</small></dd></dl>\
                </aside>\
                <div id="doc_mask" onclick="Doc.toggleSidebar()" {touchToClick}></div>\
                <div id="doc_progress"></div>\
                <a id="doc_pager_up" href="javascript:Doc.gotoTop();" class="doc-pager" accesskey="W" title="返回顶部(Alt{shiftKey}+W)"><span class="doc-icon">↑</span></a>\
                <a id="doc_pager_left" href="javascript:Doc.movePage(false);" class="doc-pager" accesskey="S" title="上一页(Alt{shiftKey}+S)"><span class="doc-icon">←</span></a>\
                <a id="doc_pager_right" href="javascript:Doc.movePage(true);" class="doc-pager" accesskey="D" title="下一页(Alt+Shift+D)"><span class="doc-icon">→</span></a>\
                <aside id="doc_module_toolbar" class="doc-toolbar doc-right doc-section">\
                    {download:<a href="#" target="_blank"><span class="doc-icon">↧</span>下载此组件</a>}\
                    <a id="doc_module_toolbar_favorite" href="javascript:Doc.toggleFavorites();">{favorite:<span class="doc-icon">✰</span>收藏}</a>\
                    <a href="{fullScreenUrl}" target="_blank"><span class="doc-icon">❒</span>全屏</a>\
                </aside>\
                <h1 id="doc_title">{title} <small><a href="" title="刷新">{name}</a>{local:    <a href="javascript:Doc.updateDocs()" title="重新扫描源码并更新当前页面相关的文档"><span class="doc-icon">↻</span>更新文档</a>    <a href="javascript:Doc.execAllCodes()" title="执行当前页面的所有示例代码（作为单元测试用例）"><span class="doc-icon">▶</span>执行用例</a>}</small></h1>\
                {summ
11b61
ary:<p id="doc_summary"></p>}',
footerTpl: '<div>\
                    <a href="{baseUrl}docs/about/{indexUrl}">关于我们</a> |\
                    <a href="{baseUrl}docs/about/license.html">开源协议</a> |\
                    <a href="https://github.com/Teal/TealUI/issues/new" target="_blank">问题反馈</a> |\
                    <a href="{baseUrl}docs/about/joinus.html">加入我们</a>\
                </div>\
                © 2011-2015 The Teal Team. All Rights Reserved.',

parseTpl: function (tpl, data) {
return tpl.replace(/\{\{|\{([^}]+)\}|\}\}/g, function (matched, argName) {
argName = argName ? (matched = argName.indexOf(':')) < 0 ? data[argName] : data[argName.substr(0, matched)](argName.substr(matched + 1)) : matched.charAt(0);
return argName == null ? '' : argName;
});
},

getStore: function (key) {
},
setStore: function (key, value) {
},
addClass: function (node, className) {
node.className = node.className ? node.className + ' ' + className : className;
},

ready: function (callback) {
document.addEventListener && document.addEventListener('DOMContentLoaded', callback, false);
},

initPage: function () {

// 获取当前 doc.js 所在路径。
var docJsPath = document.getElementsByTagName("script");
docJsPath = docJsPath[docJsPath.length - 1].src;

// 获取当前项目路径。
var path = location.href.replace(/[?#].*$/, "");

path = /^([^\/]+)\/(.*)$/.exec(path) || [0, path, ""];
Doc.folder = path[1] in Doc.folders ? path[1] : 'assets';
Doc.path = path[2].replace(/(\/|^)index\.\w+$/, "");

// 如果当前页面不是独立的页面,判断哪个页面需要导入doc.js的内容
if (Doc.frame !== "page") {

// 载入 CSS 样式。
var html = '<link type="text/css" rel="stylesheet" href="' + docJsPath.replace(/\.js\b/, '.css') + '" />';

// 如果不是全屏模式，则生成页面主结构。
if (Doc.frame !== "fullscreen" && +"\v1") {
var data = {
current: function (field) {
return Doc.folders[Doc.folder][field];
},
download: function (html) {
return this.name && Doc.folder === 'src' ? html.replace('#', Doc.baseUrl + 'tools/download.html?path=' + Doc.path) : '';
},
favorite: function (html) {
return ~(Doc.getStore('favorites') || '').indexOf(Doc.folder + "/" + Doc.path) ? '<span class="doc-icon">★</span>已收藏' : '<span class="doc-icon">✰</span>收藏';
},
actived: function (name) {
return name === Doc.folder ? ' class="doc-actived"' : '';
},
summary: function (html) {
var meta = document.querySelector('meta[name=description]');
return meta && meta.content ? html.replace('>', '>' + meta.content) : '';
},
local: function (html) {
return Doc.local ? html : '';
}
};
html += Doc.parseTpl(Doc.headerTpl, data);
// 生成底部。
Doc.ready(function () {
// 插入底部。
var footer = document.body.appendChild(document.createElement('footer'));
footer.id = 'doc_footer';
footer.className = 'doc-container doc-section';
footer.innerHTML = Doc.parseTpl(Doc.footerTpl, data);
});
} else if (!document.body) {
// 确保 document.body 已生成。
html += '<div/>';
}

// 插入页面框架。
document.write(html);
// 追加默认样式。
Doc.addClass(document.body, 'doc');
if (Doc.frame != "fullscreen") {
Doc.addClass(document.body, 'doc-page');
}
}
},
};
Doc.initPage();