AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2024-09-27 722
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了ThinkPHP6中实现模板布局的三种方式：全局配置方式、模板标签方式和动态方法布局，并通过示例代码展示了如何在项目中应用这些布局方式。

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

在这里插入图片描述

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

文章标签：
云解析DNS
前端开发
PHP
杀死一只知更鸟debug
目录
相关文章
阿甘兄
|
JSON 数据格式 容器
Layui 内置方法 - layer.photos(相册层)
Layui 内置方法 - layer.photos(相册层)
阿甘兄
2523 0
卡尔特斯
|
小程序
微信小程序 - 二维码数据解析，如何扫码进入开发版测试二维码数据
微信小程序 - 二维码数据解析，如何扫码进入开发版测试二维码数据
卡尔特斯
2448 0
泡沫o0
|
Shell Linux C++
【Shell 命令集合 文件管理】Linux 拷贝命令 cp命令使用指南
【Shell 命令集合 文件管理】Linux 拷贝命令 cp命令使用指南
泡沫o0
2132 0
无雨云
|
1月前
|
人工智能 弹性计算 运维
阿里云全栈算力解析：ECS、GPU云服务器、轻量服务器与AI云产品配置、价格与实战测评
随着数字化业务与AI应用快速普及，云算力已经成为个人开发者、小微企业、中大型企业构建业务系统的基础底座。阿里云完整构建了从入门级轻量算力、企业级弹性云主机、高性能GPU异构算力到大模型托管服务的完整产品矩阵，覆盖个人学习测试、网站搭建、业务系统部署、深度学习训练推理、大模型应用开发等绝大多数业务场景。不同产品在硬件规格、计费模式、性能上限、运维门槛上差异巨大，很多用户在选型阶段容易出现配置过剩、预算浪费，或是算力不足无法支撑业务运行的问题。本文将完整拆解ECS弹性计算服务、GPU云服务器、轻量应用服务器、百炼AI云产品的规格参数、价格体系、实测性能，提供可直接复制使用的实操命令，同时给出分场景
无雨云
529 0
程序员在线
|
6月前
|
存储 人工智能 自然语言处理
阿里云Token Plan是什么？为什么企业都在用？百炼AI大模型调用Token省钱方法
阿里云Token Plan是百炼平台面向企业/团队推出的AI大模型订阅服务，官方开通：https://t.aliyun.com/U/fPVHqY 以Credits统一计费，支持文本与图像生成模型，兼容主流编程及Agent工具。包月制、额度用尽即停，杜绝超支；数据安全合规，不用于模型训练。含标准/高级/尊享三档套餐，新用户可领7000万免费Tokens。
程序员在线
706 4
javaercn
|
7月前
|
关系型数据库 MySQL 应用服务中间件
踩坑必看！配置了 Docker 镜像源，为啥还在疯狂访问官方仓库？
一问搞懂 registry-mirrors 配置，本文就把这个问题的底层逻辑、常见场景和终极解决方案一次性讲透，适配Docker 20+/24+全版本，看完再也不踩这个坑。
javaercn
3557 6
yinying293
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI（上）
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
yinying293
1391 10
极客小俊GEEKERJUN
|
前端开发 JavaScript
Font Awesome 一个基于CSS和LESS的免费图标库工具包
Font Awesome 是一款免费的图标字体库，基于 CSS 和 LESS，适用于个人和商业项目。它提供5000多个可缩放矢量图标，支持通过 CSS 轻松调整大小、颜色和阴影，适配高分辨率屏幕，极大提升网页开发效率。使用时只需引入 CSS 文件，即可通过类名快速调用图标，是现代前端开发的常用工具。
极客小俊GEEKERJUN
1855 0
Font Awesome 一个基于CSS和LESS的免费图标库工具包
蓝染-惣右介
|
中间件 Linux PHP
【ThinkPHP框架教程·Part-01】ThinkPHP6.x框架安装教程
ThinkPHP6.0 是一款免费开源、轻量级且快速的 PHP 框架，适用于 PHP 7.2.5+ 环境。本教程采用稳定版 TP6.0，支持多应用、强类型、PSR 规范等新特性。安装步骤包括：1) 安装 Composer；2) 切换国内镜像加速下载；3) 使用 `composer create-project topthink/think tp6` 安装稳定版；4) 运行 `php think run` 测试。详情及更多内容请参考 [官方手册](https://www.kancloud.cn/manual/thinkphp6_0/1037479)。
蓝染-惣右介
2009 1
【ThinkPHP框架教程·Part-01】ThinkPHP6.x框架安装教程
杀死一只知更鸟debug
|
PHP
ThinkPHP 多应用配置，及不同域名访问不同应用的配置【详解】
本文详解了在ThinkPHP框架中配置多应用的方法，包括安装扩展、删除默认controller文件夹、创建多应用、修改配置文件以启用多应用、测试访问以及如何配置不同域名访问不同应用的步骤。
杀死一只知更鸟debug
1486 0
ThinkPHP 多应用配置，及不同域名访问不同应用的配置【详解】

热门文章

最新文章

  • 1
    从 JDK 9 到 19，认识一个新的 Java 形态（内存篇）
  • 2
    SOFAChannel#6 线上直播报名：轻量级监控分析系统 SOFALookout 原理讲解和功能演示
  • 3
    解读 V8 GC Log（一）: Node.js 应用背景与 GC 基础知识
  • 4
    香港拼音-汉字对照表
  • 5
    Docker五分钟搭建Wordpress
  • 6
    重磅发布！飞天智算平台+全球最大智算中心
  • 7
    npm install 一直卡着不动如何解决
  • 8
    性能测试脚本的编写和调试
  • 9
    DB 与 Elasticsearch 混合应用之数据实时同步
  • 10
    带你读《Flink原理、实战与性能优化》之一：Apache Flink介绍
  • 1
    Redis 缓存实战：穿透、击穿、雪崩到底差在哪，以及一套能落地的预热方案
    39
  • 2
    招聘双边市场的语义匹配：从关键词到向量召回
    36
  • 3
    云服务器哪家便宜？还得是阿里云！200M轻量应用服务器38元一年起
    53
  • 4
    淘宝 AI 购物助手：基于 LLM-as-a-Judge 的在线评测与质量归因实践
    49
  • 5
    人生香皂·全面工作台：时间管理功能
    24
  • 6
    FDE不是下一个风口那么简单：企业开始为AI的“最后一公里”买单
    46
  • 7
    策略型 Agent 评测：基于 Auto Rubrics 的业务效果验证与质量闭环
    33
  • 8
    阿里企业邮箱网页版登录入口：好几个呢，有网页版管理入口、费用官网、个人邮箱链接
    26
  • 9
    微软拆解 Spec-Driven Development：AI 生成代码后，测试为何丢失原有验收标准
    31
  • 10
    阿里云服务器ECS实例规格族如何选择？根据使用场景选择，个人和企业用户免费试用云服务器
    25

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！