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

最新推荐文章于 2024-05-25 18:54:37 发布
最新推荐文章于 2024-05-25 18:54:37 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： # PHP基础语法 # ThinkPhP6 PHP 随笔 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63622279/article/details/130703316
版权

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. 查看效果

在这里插入图片描述

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

杀死一只知更鸟debug
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
thinkphp5.1框架模板布局与模板继承用法分析
01-02
//开启全局模板布局 'layout_on' => true, //全局模板布局文件名 'layout_name' => 'layout' 模板布局 控制器中新建模板文件(application\index\controller\Demo\—test方法) 新建视图文件（application\index\demo...
thinkPHP分组后模板无法加载问题解决方法
12-19
另外，如果在分组的某个部分启用了布局（Layout），例如在 `Home` 分组中为了适应手机页面，可能设置了 `'LAYOUT_ON' => true`，那么ThinkPHP会期望在 `Tpl` 目录下有一个 `layout.html` 文件作为布局模板。...
Thinkphp响应式净水材料设备网站模板
07-02
Thinkphp响应式净水材料设备网站模板
ThinkPHP学习笔记（二）：ThinkPHP框架的模板技术
Vision.Z的博客
01-13 1532
1）建立项目模板2）模板的赋值和输出3）ThinkPHP模板引擎之变量输出和运算4）ThinkPHP模板引擎之调用函数和系统参数5）ThinkPHP模板引擎之volist和foreach循环6）ThinkPHP模板引擎之FOR循环7）ThinkPHP模板引擎之IF判断8）ThinkPHP模板引擎之Switch判断9）ThinkPHP模板引擎之比较标签10）ThinkPHP模板引擎之区间标签11） ThinkPHP模板
学习thinkphp的模板布局和文件包含
最新发布
weixin_54454406的博客
05-25 947
ThinkPHP的模板引擎内置了布局模板功能支持，可以方便的实现模板布局以及布局嵌套功能。
Thinkphp 6.0 layout公共模板使用
qq_40111759的博客
12-29 3537
①，view目录下新建public文件夹，在public下新建layout.html ②，layout.html内： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
ThinkPHP6 模板引擎普通标签中，模板引擎运算符函数，循环标签，判断标签的使用，及一些特殊标签
m0_63622279的博客
05-14 2718
模板引擎提供了运算符，函数，可以在前端更灵活的去编写不同的代码。 函数的使用规则模板引擎函数使用其实就是 {data|过滤规则（函数名）}。模板引擎注释，单行注释和多行注释与php一致，只是在{} 大括号中间，且并不会被前端代码解析。模板引擎循环标签，提供了三种方式，foreach,volist,for,其中volist最为灵活。模板引擎判断标签，只能说应有尽有，{if}{elseif}{else/}{/if},{switch}{case}{/case}{/switch}...一些特殊标记，literal
thinkphp 5.0 模板页面输出压缩代码
qq_37777470的博客
04-29 577
在文件 thinkphp\library\think\View.php 中找到fetch()方法，增加压缩输出代码 领券网 /** * 解析和获取模板内容 用于输出 * @param string $template 模板文件名或者内容 * @param array $vars 模板输出变量 * @param array $replace 替换内容 * @param array $config 模板参数
thinkphp 模板 php,ThinkPHP 模板
weixin_42503813的博客
03-10 377
模板概述PHP 中模板设计的初衷是将代码和页面分离出来分别处理，即显示与逻辑分离。使用模板可以让代码脉络更加清晰，结构更加合理化。当我们要将一些数据展示给用户浏览器的时候，就需要用到模板。采用了模板机制后比 PHP 与 HTML 代码混写在执行效率上会有一定的损失。ThinkPHP 内置了一套具有TP特色的，很强大易扩展且应用非常方便兼简单的模板引擎。ThinkPHP 模板默认存放于 Tpl 目录...
ThinkPHP6.zip
09-16
- **模板引擎**：ThinkPHP6内置了模板引擎，支持自定义模板语法，方便前后端分离。 - **视图布局**：支持视图布局，可以定义公共头部、底部，提高代码复用。 - **模板助手**：提供了丰富的模板助手函数，如`...
ThinkPHP完美后台模板
08-16
ThinkPHP完美后台模板。全面支持各种各样的后台需求。 可以是SNS，可以是电子商务，可以是企业站…
ThinkPHP系统常量
11-05
ThinkPHP系统常量，好东西就是拿出来分享。
tp自定义标签
06-18
里面有thinkphp自定义标签的方法和使用文档
tp后台源码模板
03-27
tp后台源码模板
ThinkPHP6.0整合Hui-Admin后台模板 Auth菜单权限
06-28
ThinkPHP6.0整合Hui-Admin后台模板 Auth菜单权限，简单地写了几个增删改查的例子，用到了中间件的使用
thinkphp判断访客为手机端或PC端的方法
10-25
在开发Web应用时，有时需要根据用户访问的设备类型提供不同的界面体验，比如手机用户可能需要更适合小屏幕的布局，而PC用户则可以享受更丰富的功能和大屏幕展示。ThinkPHP是一个流行的PHP框架，它提供了方便的方式来...
thinkphp6临时关闭布局
德莱文森特的博客
08-28 281
thinkphp6 view::engine()->layout(false); thinkphp5 $this->view->engine->layout=false;
ThinkPHP6.0模板布局-全局开启模式-基于官方5.0文档的补充
经验之谈，不做搬运工
05-11 801
官方文档 ThinkPHP的模板引擎内置了布局模板功能支持，可以方便的实现模板布局以及布局嵌套功能。 有三种布局模板的支持方式： 第一种方式：全局配置方式 这种方式仅需在项目配置文件中添加相关的布局模板配置，就可以简单实现模板布局功能，比较适用于全站使用相同布局的情况，需要配置开启layout_on 参数（默认不开启），并且设置布局入口文件名layout_name（默认为layout）。 'template' => [ 'layout_on' => true, 'l
thinkphp6 小程序 diy布局
09-22
thinkphp6 小程序 diy布局是在thinkphp6框架基础上开发的一款支持自定义布局的小程序。它具有以下特点和优势。 首先，thinkphp6 小程序 diy布局提供了丰富的布局模板和组件库，用户可以根据需求选择合适的模板和组件。这些模板和组件都经过精心设计和优化，具有良好的视觉效果和用户体验，能够满足用户对于小程序布局的各种需求。 其次，thinkphp6 小程序 diy布局支持自定义布局。用户可以灵活地调整页面布局，包括添加、删除、拖拽组件，设置组件属性等。用户只需要简单的操作，就可以实现自己想要的页面布局效果，无需编写复杂的代码，提高了开发效率和体验。 另外，thinkphp6 小程序 diy布局具有良好的兼容性。它基于最新的微信小程序开发框架开发，能够兼容各种小程序平台，包括iOS和Android系统。用户可以在不同的平台上使用相同的布局效果，确保了小程序在不同设备上的兼容性和一致性。 最后，thinkphp6 小程序 diy布局还提供了丰富的扩展功能和插件支持，用户可以根据自己的需求进行定制化开发。同时，它也支持与其他thinkphp6框架的功能进行集成，实现更多的功能组合和扩展。 总结起来，thinkphp6 小程序 diy布局是一款功能强大的小程序布局开发工具，它提供了丰富的布局模板和组件库，支持自定义布局和扩展功能，具有良好的兼容性和用户体验。使用它可以快速实现小程序的布局需求，提高开发效率和用户满意度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀死一只知更鸟debug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值