ThinkPHP6布局的方式之模板布局，全局配置方式，模板标签方式，动态方法布局

news2024/10/5 16:21:23

ThinkPHP6布局的方式之模板布局

ThinkPHP的模板引擎内置了布局模板功能支持，可以方便的实现模板布局以及布局嵌套功能。

有三种布局模板的支持方式：全局配置方式，模板标签方式，动态方法布局。

第一种方式：全局配置方式

这种方式仅需在项目配置文件(config/view.php)中添加相关的布局模板配置，就可以简单实现模板布局功能，比较适用于全站使用相同布局的情况，需要配置开启layout_on 参数（默认不开启），并且设置布局入口文件名layout_name（默认为layout）,以及layout_item（默认为__CONTENT__）。

return  [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
    'layout_item'   =>  '{__CONTENT__}'
]

然后tp6需要自己手动加入上面的三项配置内容，如下图:

在这里插入图片描述

并且你还需要自己在view下创建一个layout.html的模板页面文件（在里面写入自己的公共前端样式即可）：

在这里插入图片描述

开启layout_on后，模板渲染流程就会变化，例如：

namespace app\index\controller;

use think\Controller;

Class Index extends Controller
{
     public function index() 
     {
         // 原本应该直接解析到 view/index/index.html
         // 添加全局配置后，先解析到 view/layout.html 模板页面
         return view::fetch();
     }
}

在不开启layout_on布局模板之前，会直接渲染 application/index/view/index/index.html 模板文件,开启之后，首先会渲染application/index/view/layout.html 模板，布局模板的写法和其他模板的写法类似，本身也可以支持所有的模板标签以及包含文件，区别在于有一个特定的输出替换变量{__CONTENT__}。

例如，下面是一个典型的layout.html模板的写法：

{include file="public/header" /}
 {__CONTENT__}
{include file="public/footer" /}

读取layout模板之后，会再解析user/add.html 模板文件，并把解析后的内容替换到layout布局模板文件的{CONTENT} 特定字符串。

当然可以通过设置来改变这个特定的替换字符串，例如：

return [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
    'layout_item'   =>  '{__REPLACE__}'
]

一个布局模板同时只能有一个特定替换字符串。

采用这种布局方式的情况下，一旦Index/index.html 模板文件或者layout.html布局模板文件发生修改，都会导致模板重新编译。

如果需要指定其他位置的布局模板，可以使用：

return [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout/layoutname',
    'layout_item'   =>  '{__REPLACE__}'
]

就表示采用application/index/view/layout/layoutname.html作为布局模板。

如果某些页面不需要使用布局模板功能，可以在模板文件开头加上 {__NOLAYOUT__} 字符串。

如果上面的Index/index.html 模板文件里面包含有{__NOLAYOUT__}，则即使当前开启布局模板，也不会进行布局模板解析。

示例：xxx后台管理系统模板

1.首先开启全局配置，以及创建对应的html文件

配置文件：config/view.php

在这里插入图片描述

创建 view/layout.html，public/header.html，public/footer.html，public/leftMenu.html的HTML页面文件。

在这里插入图片描述

layout.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.0/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/outeres@0.0.10/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.控制器代码部分

<?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();
    }

}

这里为了简单测试，直接查找所有的书籍然后在前端渲染即可。

3.index.html 真正的视图渲染

在view/index/index.html,这里通过静态表格来渲染（为了方便），实际上应该是动态表格…

<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.显示效果

在这里插入图片描述

第二种方式：模板标签方式

这种布局模板不需要在配置文件中设置任何参数，也不需要开启layout_on，直接在模板文件中指定布局模板即可，相关的布局模板调整也在模板中进行。

以前面的输出模板为例，这种方式的入口还是在index/index.html 模板，但是我们可以修改下index模板文件的内容，在头部增加下面的布局标签（记得首先关闭前面的layout_on设置，否则可能出现布局循环）：

{layout name="layout" /}

表示当前模板文件需要使用layout.html 布局模板文件，而布局模板文件的写法和上面第一种方式是一样的。当渲染index/index.html 模板文件的时候，如果读取到layout标签，则会把当前模板的解析内容替换到layout布局模板的{CONTENT}特定字符串。

一个模板文件中只能使用一个布局模板，如果模板文件中没有使用任何layout标签则表示当前模板不使用任何布局。

如果需要使用其他的布局模板，可以改变layout的name属性，例如：

{layout name="newlayout" /}

还可以在layout标签里面指定要替换的特定字符串：

{layout name="Layout/newlayout" replace="[__REPLACE__]" /}

示例：测试一下，模板标签方式

我们只需要将第一种全局配置的配置文件注释掉，然后在index/index.html中，使用{layou name="layout"},导入模板即可。

1.首先关闭layout_on:

在这里插入图片描述

2. 在view/index/index.html中使用{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. 查看效果：

在这里插入图片描述

第三种方式：动态方法布局

使用内置的layout方法可以更灵活的在程序中控制模板输出的布局功能，尤其适用于局部需要布局或者关闭布局的情况，这种方式也不需要在配置文件中开启layout_on。例如：

namespace app\index\controller;

use think\Controller;

class User extends Controller
{
     public function add() 
     {
         $this->view->engine->layout(true);
         return $this->fetch('add');
     }
}

表示当前的模板输出启用了布局模板，并且采用默认的layout布局模板。

如果当前输出需要使用不同的布局模板，可以动态的指定布局模板名称，例如：

namespace app\index\controller;

use think\Controller;

class User extends Controller
{
     public function add() 
     {
         $this->view->engine->layout('Layout/newlayout');
         return $this->display('add');
     }
}

或者使用layout方法动态关闭当前模板的布局功能（这种用法可以配合第一种布局方式，例如全局配置已经开启了布局，可以在某个页面单独关闭）：

namespace app\index\controller;

use think\Controller;

class User extends Controller
{
     public function add() 
     {
        // 临时关闭当前模板的布局功能
         $this->view->engine->layout(false); 
         return $this->display('add');
     }
}

示例：测试动态方法布局

我们只需要改变控制器代码，然后将例子2加上的{layou name="layout"}去掉，然后验证即可。

1. 修改控制器代码

<?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);和$this->view->engine->layout(true);是相同含义的代码，只是我的控制器恰好是index所以this的方式不成功只能改用view的方式。

2. 删除 {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. 查看效果

在这里插入图片描述

三种模板布局方式中，第一种和第三种是在程序中配置实现模板布局，第二种方式则是单纯通过模板标签在模板中使用布局。具体选择什么方式，需要根据项目的实际情况来了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/532029.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

有价值项目分享，缺项目可直接搜索（持续更新中）

有价值项目分享，缺项目可直接搜索（持续更新中）

​近来统计一下最近发的一些资源&#xff0c;包括CSDNB站微信公众号三个平台&#xff0c;仅包括Java资源&#xff08;SSMSpringBootuniapp&#xff09;、部分硬件、安卓资源&#xff0c;一共30758492588275个&#xff0c;可覆盖95%的毕业题目&#xff0c;大家可在相关归档内获取…
阅读更多...
2023 年破解 PDF 密码的 5 种最佳方法

2023 年破解 PDF 密码的 5 种最佳方法

世界越来越依赖数字文档和信息存储。最流行和广泛使用的数字文档文件格式之一是便携式文档格式 (PDF)。PDF 文件用途广泛、可靠&#xff0c;并提供高级别的安全性以保护敏感信息免遭未经授权的访问。保护 PDF 的一种常用方法是通过密码保护。在这篇博文中&#xff0c;我们将讨论…
阅读更多...
从SRM到采购供应链，云时通SRM助力东明实现采购数字化再升级！

从SRM到采购供应链，云时通SRM助力东明实现采购数字化再升级！

随着制造业不断向高端跃升&#xff0c;十年来&#xff0c;中国制造企业早已具备全球领先水平。而引领制造业向数字化、网络化、智能化转型升级&#xff0c;是中国智造进一步跨越的关键。 1995年&#xff0c;浙江东明不锈钢制品股份有限公司(以下简称“东明”)成立&#xff0c;作…
阅读更多...
超细！从零安装压测工具 jmeter（附JDK下载安装教程，20230516的JDK8最新版）

超细！从零安装压测工具 jmeter（附JDK下载安装教程，20230516的JDK8最新版）

两步走&#xff0c;安装 JDK 和 jmeter&#xff0c;如果安装了JDK的同志可以直接看第二步。 针对的操作系统&#xff1a;Windows。 下载JDK 官网指路&#xff08;处于稳定性考虑&#xff0c;安装的JDK8&#xff09;&#xff1a; Java Downloads | Oraclehttps://www.oracle.c…
阅读更多...
Java配置方式使用Spring MVC

Java配置方式使用Spring MVC

文章目录 基于Java配置方式使用Spring MVC一、创建Maven项目二、添加相关依赖三、创建日志属性文件四、创建首页文件五、创建Spring MVC配置类六、创建Web应用初始化配置类七、创建演示控制器八、配置Tomcat服务器九、启动服务器&#xff0c;查看效果 基于Java配置方式使用Spri…
阅读更多...
「计算机网络」HTTP1.0、HTTP1.1和HTTP2.0的演变

「计算机网络」HTTP1.0、HTTP1.1和HTTP2.0的演变

「计算机网络」HTTP1.0、HTTP1.1和HTTP2.0的演变 参考&鸣谢 HTTP1.0、HTTP1.1、HTTP2.0的关系和区别 doubleYong 计算机网络_HTTP1.0、HTTP1.1和HTTP2.0的区别 一只前端小马甲 文章目录 「计算机网络」HTTP1.0、HTTP1.1和HTTP2.0的演变一、先说结论二、HTTP网络请求过程三…
阅读更多...
【01】一步一步命令行输出VC hello world

【01】一步一步命令行输出VC hello world

一步一步命令行输出VC hello world 安装VS2022编写hello world程序配置cl.exe编译helloworld.cpp总结 安装VS2022 VS2022的安装程序下载地址:https://visualstudio.microsoft.com/zh-hans/downloads/ 。下载完成之后点击程序会进入到选择安装VS2022组件的安装程序&#xff0c;…
阅读更多...
小红的好数组陡峭值之和

小红的好数组陡峭值之和

题目如下 这个题我一开始是先生成满足0&#xff0c;1&#xff0c;2的全排列&#xff0c;但是n很大时很快就超出内存限制了&#xff0c;后来想到用动态规划的方法做&#xff0c;这里先分析一下。 n2时&#xff0c;有01&#xff0c;02&#xff0c;10&#xff0c;12&#xff0c;2…
阅读更多...
自动化设备应用之样本手册

自动化设备应用之样本手册

Lookbook&#xff0c;新品展示图&#xff0c;是时尚品牌的必备品。Lookbook既展示了新系列&#xff0c;也突出了品牌的基本调性。创建样本手册是释放创造力并从其他时装设计师中脱颖而出的机会。有吸引力的封面、精心策划的图像、精巧的布局、颜色标识和传达风格都是品牌内容传…
阅读更多...
建构筑物安全监测

建构筑物安全监测

监测要求 1&#xff09;观测点应设置在观测段结构构件的控制断面上&#xff1b; 2&#xff09;平面应力状态的结构应力观测宜设置三向应变观测点,主应力方向明晩的部位可设置单向或两向应变观测点&#xff1b; 3&#xff09;建筑物的重要部位应增设观测点&#xff1b; 4&am…
阅读更多...
ControlNet让SD变得可控

ControlNet让SD变得可控

ControlNet是一个用于深度神经网络的控制技术&#xff0c;它可以通过操作神经网络块的输入条件来控制神经网络的行为。在这里&#xff0c;“网络块”是指常用的神经层集合&#xff0c;例如“resnet”块、“conv-bn-relu”块、多头注意力块等。通过克隆神经网络块的参数并应用零…
阅读更多...
软考A计划-真题-分类精讲汇总-第十七章(数据结构与算法)

软考A计划-真题-分类精讲汇总-第十七章(数据结构与算法)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…
阅读更多...
智慧档案馆建设之八防十防常用的设备

智慧档案馆建设之八防十防常用的设备

档案八防十防常用的十款设备 序号 名称 1 温湿度传感器 2 空气质量云测仪 3 恒湿净化一体机 4 健康防护一体机 5 综合智能触摸一体化区域控制器 6 空调红外学习控制模块 7 漏水检测控制器及感应线 8 数字烟雾传感器 9 红外防盗传感器 10 系统软件平台 附…
阅读更多...
redis高级篇(1)

redis高级篇(1)

分布式缓存 单节点redis的问题: 1)数据丢失的问题&#xff0c;redis是基于内存来进行存储的&#xff0c;当服务器重启的时候可能会丢失数据 2)无法满足高并发场景 3)如果redis宕机&#xff0c;那么这个服务不可用&#xff0c;所以就需要有一种自动的故障恢复手段&#xff0c;必…
阅读更多...
从裸机启动开始运行一个C++程序（一）

从裸机启动开始运行一个C++程序（一）

前言 对于一个C程序员来说&#xff0c;可能更多是是每天都在跟各种上层语义、设计模式、软件方法等等在打交道。但对于「一个C程序是如何运行在机器上的」这件事可能会比较陌生。有时&#xff0c;遇到一些问题&#xff0c;在宏观角度看起来可能比较难以解释&#xff0c;但其实…
阅读更多...
activiti6是使用，或签，会签

activiti6是使用，或签，会签

会签&#xff1a;指同一个审批节点设置多个人&#xff0c;如ABC三人&#xff0c;三人会同时收到审批&#xff0c;需全部同意之后&#xff0c;审批才可到下一审批节点&#xff1b; 或签&#xff1a;也有叫“竞签”、“串签”&#xff1a;指同一个审批节点设置多个人&#xff0c;…
阅读更多...
电脑上删除掉的文件怎么恢复？一文告诉你详细恢复方法！

电脑上删除掉的文件怎么恢复？一文告诉你详细恢复方法！

对于不太会整理电脑的用户来讲&#xff0c;电脑上的文件一旦保存多了&#xff0c;不但会使得电脑看上去很杂乱&#xff0c;还会在我们需要寻找某一个文件的时候&#xff0c;半天都找不到。 所以&#xff0c;对于一些可能不会再需要的文件&#xff0c;我们会选择直接删除&#x…
阅读更多...
Dart 3.0 语法新特性 | 类型修饰符 Class modifiers

Dart 3.0 语法新特性 | 类型修饰符 Class modifiers

theme: cyanosis 在 dart 3.0.0 之后&#xff0c;对类型的修饰符进行了拓展&#xff0c;现在类型的修饰符有&#xff1a; | 名称 | 作用 | | --- | --- | | mixin | 混入类修饰符 | | sealed | 密封可枚举的子类型 | | abstract | 抽象类修饰符 | | final | 一定程度上关闭派生…
阅读更多...
《测试开发》测试启蒙

《测试开发》测试启蒙

文章目录 测试是什么调试和测试的区别 什么是需求需求的定义需求的特征测试人员眼里的需求是什么如何深入了解需求 测试用例什么是测试用例为什么有测试用例 bug如何描述一个bug如何定义bug的级别bug的生命周期 软件测试的生命周期 &#x1f451;作者主页&#xff1a;Java冰激凌…
阅读更多...
QX320F280049 ， 国产C2000

QX320F280049 ， 国产C2000

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023