科技资讯

Document

thinkphp中区块block和模板继承extend用法举例,和公共头部

	<div class="footer">
		<h1>这是底部</h1>
	</div>
</html>
1.介绍

模板继承就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（block），然后继承（extend）该基础模板的子模板中就可以对基础模板中定义的区块进行重载。

2.定义模板页面base.html(剩下的页面都可以继承这个页面)：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
   {block name="title"}{/block}
 　　<!--共用的css放这里-->
   <link rel="stylesheet" href="/static/admin/css/layui.css" rel="external nofollow"  media="all"/>
   {block name="css"}{/block}
</head>
<body class="childrenBody">
{block name="main"}{/block}
<!--共用的js都可以在这里加载-->
<script src="/static/admin/js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="/static/admin/js/layui.js"></script>
{block name="script"}{/block}
</body>
</html>
3.其他页面可以直接继承base.html
{extend name="public/base"/}
{block name="title"}
　　<!--这里放页面标题-->
　　<title>标题</title>
{/block}
{block name="css"}
 <!--这里写本页面需要的css样式-->
    <link src="/css/main.css">
{/block}

{block name="main"}
<!--这里放页面中的body内容-->
    <div> 内容  </div>
{/block}

{block name="script"}
<!--这里放本页面需要的js-->
<script src="/main.js" />
</script>
{/block}

 

4.ThinkPHP模板文件可以通过以下代码引入公共的头部和底部
 头部文件公共部分放在header.html文件中：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>大象后台管理系统</title>
    <meta name="keywords" content="大象后台管理系统">
    <meta name="description" content="大象后台管理系统">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 共用的css -->
    <link rel="stylesheet" href="__ADMIN__/lib/layui-v2.6.3/css/layui.css" media="all">
    media="all">

    {block name="css"}{/block}
    <!-- [if lt IE 9] -->
    <!-- 共用的css -->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <style id="layuimini-bg-color">
    </style>
</head>

 

	<div class="footer">
		<h1>这是底部</h1>
	</div>

</html>
5. 在其他模板文件中，使用以下代码引入头部和底部：
    (include file="layout/header" /)
<!-- 其他页面内容 -->
    (include file="layout/footer" /)