第一种方式:全局配置方式
需要配置开启layout_on 参数(默认不开启),并且设置布局入口文件名layout_name(默认为layout)
这个是在application/config.php文件里
'template' => [
//开启layout_on
'layout_on' => true,
//目录位置
'layout_name' => 'layout/layoutname',
//布局替换变量
'layout_item' => '{__CONTENT__}'
]
注意:
在配置文件中 ‘url_html_suffix’ => ‘html’, 这想必须是html,不然模板输出的时候会格式不正确。我因为这个不小心配置成了json格式的结果模板输出全是json格式,就连html标签都输出了。
然后是控制器,其实控制器不需要有什么配置。如果没人任何需要输出的内容就算是空的控制器也是可以的。
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
/**
* @param string $name
*/
public function index()
{
return $this->fetch();
}
}
?>
布局模板,这个意思很明啦。就是吧分开了的头部尾部中间部分按这个模板的规则统一导入进来。
{include file="layout/header" /}
{__CONTENT__}
{include file="layout/footer" /}
上面这个是在layoutname.html文件上的代码,因为我在配置文件中配置的是 'layout_name' => 'layout/layoutname'
所以他的布局模板文件位置就是 application/index/view/layout/layoutname.html 还有header和footer两个文件都在这个文件夹下。
下面这个是header头部文件的内容
<!doctype html>
<html>
<head>
<title>头部信息</title>
</head>
<body>
这个是头部信息
这个是footer尾部内容
这个是底部信息
</body>
</html>
中间部分就是控制器的操作模板,也就是当前控制器的index操作 application/index/view/Index/index.html
{//__NOLAYOUT__}
<div>
这是 layout 模板布局
中间内容
</div>
{//__NOLAYOUT__} 这个是如果在这个模板里不想使用布局模板的话用{__NOLAYOUT__} 可以屏蔽掉布局模板的头部和尾部。双斜杠”//”是我注释掉了这个变量,用的时候你需要把“//”去掉哦。
接下来我们看看输出结果:
现在开启 {__NOLAYOUT__} 这个变量看看结果是怎样的!
在这里我需要提醒一下在开启 {__NOLAYOUT__} 之后刷新浏览器之前先清空一下runtime\temp 这个目录的缓存文件。
要不然刷新是没有效果的哦。
好了!现在可以真正的刷新浏览器看看结果啦。
我们可以看到头部和尾部的信息都已经没有了,说明测试已经成功了。
第二种方式:模板标签方式
这种方法就简单多了,不需要在配置文件中设置任何参数,也不需要开启layout_on,直接在模板文件中指定布局模板即可,相关的布局模板调整也在模板中进行。
以前面的输出模板为例,这种方式的入口还是在Index/index.html 模板,但是我们可以修改下add模板文件的内容,在头部增加下面的布局标签(记得首先关闭前面的layout_on设置,否则可能出现布局循环):
{layout name=”layout/layoutname” /}
就表示采用application/index/view/layout/layoutname.html作为布局模板
下面我们来看看模板的代码实现
{layout name="layout/layoutname" /}
{//__NOLAYOUT__}
<div>
这是 layout 模板布局
中间内容
</div>
这里在次强调,除了header和footer两个模板保持不变之外,在配置文件中部不需要做任何配置。
接下来刷新看结果如何,同样刷新需要清空缓存。
还可以在layout标签里面指定要替换的特定字符串:
{layout name=”layout/layoutname” replace=”[REPLACE]” /}
注意:替换字符在这里不能用花括号,用中括号或是别的什么都可以就算不用括号也行。要不然会替换不了内容。
还可以在模板布局中的设置一些变量,例如:
设置title变量
{include file="layout/header" title="这是 layout 传过来的title"/}
__REPLACE__
{include file="layout/footer" /}
然后在header文件中接收一下title
<!doctype html>
<html>
<head>
<title>[title]</title>
</head>
<body>
这个是头部信息
结果就是:
title被改变了。
还有第三种方法,我这里就不介绍了。这种方法就是在里面调用tp函数设置的,用法也很简单有兴趣的可以自己去看看。