一、通用引入文件
1.在模版文件夹内新建一个common文件夹，在commn文件夹内新建layout.html文件，改文件为整个站点结构的通用文件(文件夹和文件可以根据自己喜好进行命名，并没有强制要求)，对模版文件夹不熟悉的请阅读上一章。
image.png
2.抽出网站的通用头部；底部；公用引入css、js、image代码，这里的通用是指在每个页面上都会存在的部分，各个页面特有的部分不建议放在layout.html文件。
二、通用标签
1.在通用引入页面通常会用到以下几个标签和参数：
{cms:config name="cms.sitename"/} : 网站名称；
{cms:config name="cms.title"/} : 页面名称；
{__STYLE__} : 加载引入页面定义的页面css；
{__CONTENT__} : 加载引入页面内容；
{__SCRIPT__} : 加载引入页面定义的页面js；
__ADDON__：静态文件相对路径，系统默认解析为，/assets/addons/cms；
__CDN__ ：绝对路径，系统默认解析为当前域名，适合使用CDN的静态文件；
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{cms:config name="cms.sitename"/}{cms:config name="cms.title"/}</title>
<link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css"/>
<script type="text/javascript" src="__ADDON__/assets/libs/jquery/dist/jquery.min.js"></script>
{__STYLE__}
</head>
<body>
{__CONTENT__}
</body>
{__SCRIPT__}
</html>
2.公共部分渲染布局，name="文件路径/文件名"。详情请参考文档：https://www.kancloud.cn/manual/thinkphp5/125013
{layout name="common/layout"/}
三、完整代码示例：
1.common/layout.html（公共布局）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{cms:config name="cms.sitename"/}-{cms:config name="cms.title"/}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{cms:config name='cms.description'/}" />
<meta name="keywords" content="{cms:config name='cms.keywords'/}" />
<link rel="shortcut icon" href="__ADDON__/jizhi/favicon.ico">
<!-- Animate.css -->
<link rel="stylesheet" href="__ADDON__/jizhi/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="__ADDON__/jizhi/css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="__ADDON__/jizhi/css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="__ADDON__/jizhi/css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="__ADDON__/jizhi/css/style.css">
<!-- Modernizr JS -->
<script src="__ADDON__/jizhi/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
{__STYLE__}
</head>
<body>
<div id="fh5co-page">
<!-- 展开手机端左侧菜单按钮 -->
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<aside id="fh5co-aside" role="complementary" class="border js-fullheight">
<!-- logo -->
<h1 id="fh5co-logo"><a href="index.html"><img src="__ADDON__/jizhi/images/logo.png"/></a></h1>
<!-- 左侧菜单 start -->
<nav id="fh5co-main-menu" role="navigation">
<ul>
<li><a class="fist-menu fh5co-active" href="index.html">主页</a></li>
<li class="znav">
<a class="fist-menu" href="#">产品</a>
<ul class="znav-list">
<li><a class="fist-menu" href="goods.html">A系列</a></li>
<li><a class="fist-menu" href="goods.html">B系列</a></li>
<li><a class="fist-menu" href="goods.html">C系列</a></li>
<li><a class="fist-menu" href="goods.html">D系列</a></li>
</ul>
</li>
<li class="znav">
<a class="fist-menu" href="#">关于我们</a>
<ul class="znav-list">
<li><a class="fist-menu" href="about.html">品牌愿景</a></li>
<li><a class="fist-menu" href="about.html">品牌使命</a></li>
<li><a class="fist-menu" href="about.html">品牌故事</a></li>
</ul>
</li>
<li><a class="fist-menu" href="chenck.html">防伪查询</a></li>
<li><a class="fist-menu" href="problem.html">常见问题</a></li>
<li><a class="fist-menu" href="contact.html">联系我们</a></li>
</ul>
</nav>
<!-- 左侧菜单 end -->
<!-- 左侧菜单底部 start -->
<div class="fh5co-footer">
<ul class="footer-img">
<li><img src="__ADDON__/jizhi/images/code.jpg"/></li>
<li><img src="__ADDON__/jizhi/images/code.jpg"/></li>
</ul>
<ul class="footer-text">
<li>400-066-4008</li>
<li>周一至周六：9:00—18:00</li>
<li>Copyright © 2019-2020 备案号:鄂32789509480-1</li>
</ul>
</div>
<!-- 左侧菜单底部 end -->
</aside>
<!-- 页面右侧内容 start -->
<div id="fh5co-main">
{__CONTENT__}
</div>
<!-- 页面右侧内容 end -->
</div>
</body>
<!-- jQuery -->
<script src="__ADDON__/jizhi/js/jquery.min.js"></script>
{__SCRIPT__}
</html>
2.index.html（主页）
{layout name="common/layout" /}
<aside id="fh5co-hero" class="js-fullheight">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(__ADDON__/jizhi/images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center js-fullheight slider-text">
<div class="slider-text-inner">
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(__ADDON__/jizhi/images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center js-fullheight slider-text">
<div class="slider-text-inner">
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(__ADDON__/jizhi/images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center js-fullheight slider-text">
<div class="slider-text-inner">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
网友评论