Template layout of ThinkPHP6 layout
ThinkPHP's template engine has built-in layout template function support, which can easily realize template layout and layout nesting functions.
There are three support methods for layout templates: global configuration method, template tag method, and dynamic method layout.
The first method: global configuration method
This method only needs to add relevant layout template configurations in the project configuration file ( config/view.phplayout_on ), and the template layout function can be realized simply. open), and set the layout entry file name layout_name(default is layout), and layout_item(default is __CONTENT__).
return [
'layout_on' => true,
'layout_name' => 'layout',
'layout_item' => '{__CONTENT__}'
]
Then tp6 needs to manually add the above three configuration items, as shown in the figure below:
And you also need to create a layout.html template page file under the view (you can write your own public front-end style in it):
Once enabled layout_on, the template rendering process will change, for example:
namespace app\index\controller;
use think\Controller;
Class Index extends Controller
{
public function index()
{
// 原本应该直接解析到 view/index/index.html
// 添加全局配置后，先解析到 view/layout.html 模板页面
return view::fetch();
}
}
Before opening layout_onthe layout template, application/index/view/index/index.htmlthe template application/index/view/layout.html. After opening, the template will be rendered first. The writing method of the layout template is similar to that of other templates. It can also support all template tags and included files. The difference is that there is a specific Output substitution variables {__CONTENT__}.
For example, here's how a typical layout.html template looks like:
{
include file="public/header" /}
{
__CONTENT__}
{
include file="public/footer" /}
After reading the layout template, it will parse user/add.htmlthe template file again, and replace the parsed content with {CONTENT}the specific string of the layout layout template file.
Of course it is possible to change this specific replacement string by setting, for example:
return [
'layout_on' => true,
'layout_name' => 'layout',
'layout_item' => '{__REPLACE__}'
]
A layout template can only have one specific replacement string at a time.
In the case of using this layout method, once the Index/index.html template file or the layout.html layout template file is modified, the template will be recompiled.
If you need to specify a layout template in another location, you can use:
return [
'layout_on' => true,
'layout_name' => 'layout/layoutname',
'layout_item' => '{__REPLACE__}'
]
It means to use it application/index/view/layout/layoutname.htmlas a layout template.
If some pages do not need to use the layout template function, you can add {__NOLAYOUT__}a string .
If the above Index/index.html template file contains it {__NOLAYOUT__}, even if the layout template is currently enabled, the layout template will not be parsed.
Example: xxx background management system template
1. First open the global configuration and create the corresponding html file
Configuration file: config/view.php
Create HTML page files of view/layout.html, public/header.html, public/footer.html, public/leftMenu.html.
layout.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 layui.css -->
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
</head>
<body>
{include file="public/header"}
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md4 ">
{include file="public/leftMenu"}
</div>
<div class="layui-col-md8 ">
{__CONTENT__}
</div>
</div>
</div>
{include file="public/footer"}
</body>
</html>
public/header.html:
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
<li class="layui-nav-item"><a href="nav.html">xxx后台管理系统</a></li>
<li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
<li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
<li class="layui-nav-item">
<a href="javascript:;">更多</a>
<dl class="layui-nav-child">
<dd><a href="nav.html">选项1</a></dd>
<dd><a href="nav.html">选项2</a></dd>
<dd><a href="nav.html">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
<ul class="layui-nav layui-layout-right layui-bg-blue">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="https://unpkg.com/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
</ul>
</ul>
public/leftMenu.html:
<div class="layui-panel" style="width: 260px; margin: 16px;">
<ul class="layui-menu" id="demo-menu">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title"><a href="javascript:;">购物车管理</a></div>
</li>
<li class="layui-menu-item-divider"></li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="javascript:;">商品管理</a>
</div>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
订单管理 <i class="layui-icon layui-icon-up"></i>
</div>
<ul>
<li lay-options="{id: 102}">
<div class="layui-menu-body-title">订单查找</div>
</li>
<li><div class="layui-menu-body-title">订单修改</div></li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
用户管理 <i class="layui-icon layui-icon-up"></i>
</div>
<ul>
<li lay-options="{id: 103}">
<div class="layui-menu-body-title">用户查找</div>
</li>
<li><div class="layui-menu-body-title">权限修改</div></li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li><div class="layui-menu-body-title">系统设置</div></li>
<li class="layui-menu-item-divider"></li>
</ul>
</div>
public/footer.html:
<div class="layui-footer" style="background: deepskyblue;
position: fixed;bottom: 0;width: 100%;text-align: center">
<!-- 底部固定区域 -->
底部固定区域
</div>
2. Controller code part
<?php
namespace app\controller;
use app\BaseController;
use think\facade\View; // 使用模板引擎
use think\facade\Db; // 使用Db数据
class Index extends BaseController
{
public function index()
{
$books = Db::table('book')->select()->toArray();
view::assign('books',$books);
return view::fetch();
}
}
For a simple test here, just find all the books and render them on the front end.
3. index.html real view rendering
In view/index/index.html, it is rendered by a static table (for convenience), which should actually be a dynamic table...
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<tr>
<td>id</td>
<td>书名</td>
<td>价格</td>
<td>作者</td>
</tr>
{foreach $books as $key=>$book}
<tr>
<td>{$book['id']}</td>
<td>{$book['bookName']}</td>
<td>{$book['bookPrice']}</td>
<td>{$book['author']}</td>
</tr>
{/foreach}
</table>
4. Display effect
The second method: template tag method
This layout template does not need to set any parameters in the configuration file, nor does it need to be opened layout_on, just specify the layout template in the template file directly, and the related layout template adjustments are also performed in the template.
Taking the previous output template as an example, the entry of this method is still in the index/index.html template, but we can modify the content of the index template file and add the following layout tags in the head (remember to close the previous settings first, layout_onotherwise possible layout loops):
{layout name="layout" /}
Indicates that the current template file needs to use layout.htmla layout template file, and the writing method of the layout template file is the same as the first method above. When rendering index/index.htmla template file, if the layout tag is read, the parsed content of the current template will be replaced with {CONTENT}the specific string of the layout layout template.
Only one layout template can be used in a template file. If no layout tag is used in the template file, it means that the current template does not use any layout.
If you need to use other layout templates, you can change the name attribute of the layout, for example:
{layout name="newlayout" /}
You can also specify a specific string to replace in the layout tag:
{layout name="Layout/newlayout" replace="[__REPLACE__]" /}
Example: Test it, template tag method
We only need to comment out the configuration file of the first global configuration, and then use and import the template in index/index.html {layou name="layout"}.
1. First turn off layout_on:
2. Use it in view/index/index.html {layou name="layout"}to import the template.
{layout name="layout"}
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<tr>
<td>id</td>
<td>书名</td>
<td>价格</td>
<td>作者</td>
</tr>
{foreach $books as $key=>$book}
<tr>
<td>{$book['id']}</td>
<td>{$book['bookName']}</td>
<td>{$book['bookPrice']}</td>
<td>{$book['author']}</td>
</tr>
{/foreach}
</table>
3. View the effect:
The third way: dynamic method layout
Using the built-in layout method can more flexibly control the layout function of the template output in the program, especially for the situation where the layout is partially required or turned off, and this method does not need to be enabled in the configuration file layout_on. For example:
namespace app\index\controller;
use think\Controller;
class User extends Controller
{
public function add()
{
$this->view->engine->layout(true);
return $this->fetch('add');
}
}
Indicates that the layout template is enabled for the current template output, and the default layout layout template is used.
If the current output needs to use a different layout template, you can dynamically specify the layout template name, for example:
namespace app\index\controller;
use think\Controller;
class User extends Controller
{
public function add()
{
$this->view->engine->layout('Layout/newlayout');
return $this->display('add');
}
}
Or use the layout method to dynamically close the layout function of the current template (this usage can be used in conjunction with the first layout method, for example, the global configuration has enabled the layout, which can be closed separately on a certain page):
namespace app\index\controller;
use think\Controller;
class User extends Controller
{
public function add()
{
// 临时关闭当前模板的布局功能
$this->view->engine->layout(false);
return $this->display('add');
}
}
Example: Testing Dynamic Method Layouts
We only need to change the controller code, then delete the addition of example 2 {layou name="layout"}, and then verify.
1. Modify the controller code
<?php
namespace app\controller;
use app\BaseController;
use think\facade\View; // 使用模板引擎
use think\facade\Db; // 使用Db数据
class Index extends BaseController
{
public function index()
{
$books = Db::table('book')->select()->toArray();
view::assign('books',$books);
// 当前的模板输出启用布局模板，并且采用默认的layout布局模板
view::engine()->layout(true);
// $this->view->engine->layout(true);
return view::fetch();
}
}
view::engine()->layout(true);The and here $this->view->engine->layout(true);are codes with the same meaning, except that my controller happens to be index, so if the method of this is unsuccessful, I can only use the method of view instead.
2. Delete {layou name="layout"}
<!--{layout name="layout"}-->
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<tr>
<td>id</td>
<td>书名</td>
<td>价格</td>
<td>作者</td>
</tr>
{foreach $books as $key=>$book}
<tr>
<td>{$book['id']}</td>
<td>{$book['bookName']}</td>
<td>{$book['bookPrice']}</td>
<td>{$book['author']}</td>
</tr>
{/foreach}
</table>
3. Check the effect
Among the three template layout methods, the first and third are to configure the template layout in the program, and the second method is to use the layout in the template simply through the template tag. The specific method to choose depends on the actual situation of the project.