thinkphp-模版的条件判断标签、模版的include加载包含输出、模板的布局和继承

10331次阅读 911人点赞 作者: WuBin 发布时间: 2024-06-13 08:02:21
扫码到手机查看

模版的条件判断标签

switch标签

使用{switch}...{/switch}可以实现多个条件判断;

{switch $number}
        {case 1}1{/case}
        {case 5}5{/case}
        {case 10}10{/case}
        {default/}不存在
{/switch}

{case}也支持多个条件判断,使用|线隔开即可;

{case 10|20|30}10,20,30 均可{/case}
return View::fetch('condition', [
            'number' => 7
]);
{switch $number}
        {case 1|2|3|4}1{/case}
        {case 5|6|7|8}5{/case}
        {case 10}10{/case}
        {default/}不存在
{/switch}

{case}后面也可以是变量,设置变量后不可以使用|线;

return View::fetch('condition', [
            'number' => 10,
            'id' => 10
]);
{switch $number}
        {case 1|2|3|4}1{/case}
        {case 5|6|7|8}5{/case}
        {case $id}10{/case}
        {default/}不存在
{/switch}
推荐,只要是变量都加上$符号

编译后的源码 参考学习下

<?php switch($number): case "1": ?>
      1
<?php break; case "5": ?>
      5
<?php break; case $id: ?>
      10
<?php break; default: ?>
    不存在
<?php endswitch; ?> 

IF 标签

使用简单条件判断的{if}标签;

 {if $number >= 0} 
      OK
 {/if}

{if}标签的条件判断可以使用AND、OR 等语法;

{if ($number > 10) OR ($number > 5)}
    大于10
{/if}

{if}标签支持{else/}语法;

{if $number >= 0 OR $number > 5} 
      OK
{else/}
      not ok
{/if}

{if}标签也支持{elseif}多重条件判断;

{if $number >= 0 OR $number > 5} 
      OK
{elseif $number < 5/}
      xiaoyu5
{else/}
      not ok
{/if}

编译后,参考学习

<?php if($number >= 0 OR $number > 5): ?> 
      OK
<?php elseif($number < 5): ?>
      xiaoyu5
<?php else: ?>
      not ok
<?php endif; ?>

{if}标签中的条件判断支持PHP 写法,比如函数和对象调用;

return View::fetch('condition', [
            'number' => 10,
            'id' => 10,
            'name' => 'wu'
]);
{if strtoupper($name) == 'WU'}
        相等
{/if}

范围标签

范围标签:{in}和{notin},判断值是否存在或不存在指定的数据列表中;

{in name="$number" value="10,20,30,40"} 存在 {/in}
return View::fetch('condition', [
            'number' => 11,
            'id' => 10,
            'name' => 'wu'
]);
{in name="$number" value="10,20,30,40"} 
        存在
{else/}
        不存在 
{/in}

name 值可以是是系统变量,比如$Think.xxx.yyy,value 可以是变量;

范围标签:{between}和{notbetween},判断值是否存在或不存在数据区间中;

{between name="$number" value="10,50"} 
        存在OK
 {/between}
between与in区别:between是范围,比如10-50,而in则是“10,20,30”中的某一个
{between name='number' value='10,50'}存在{/between}
{between name='number' value='10,50'}
   存在数据区间中
{else/}
   不存在数据区间中
{/between}
between 中的value 只能是两个值,表示一个区间,第三个值会无效;区间不但可以表达数字,也可以是字母,比如a-z,A-Z;

是否存在标签

是否存在:{present}和{notpresent}判断变量是否已经定义赋值(是否存在);

{present name="$abc"}变量已定义{/present} // 因为$abc没定义,所以不会显示
{present name="$number"}变量已定义{/present} // 因为$number已定义 会显示这个

其也支持else

{present name='user'}
   user 已存在
{else/}
   user 不存在
{/present}

是否为空:{empty}和{notempty}判断变量是否为空值;

{empty name='username'}有值{/empty}
{empty name='username'}
     username 有值
{else/}
     username 没值
{/empty}

常量是否定义:{defined}和{notdefined}判断常量是否定义(是否存在);

{defined name='PI'}
   PI 存在
{else/}
   PI 不存在
{/defined}

模版的include加载包含输出

使用{include}标签来加载公用重复的文件,比如头部、尾部和导航部分;

在模版view 目录创建一个public 公共目录,分别创建header 和nav;

模板文件目录如下

app
  |-controller
         |-Show.php
  ...
  |-view
      |-public
          |-header.html
                 |-nav.html
      |-show 
               |-block.html

在block.html中

{include file="public/header" }
{include file="public/nav" }

或者

{include file='public/header,public/nav'/}  // 经过测试模板会直接输出 仅记录

也可以包含一个文件的完整路径,包括后缀,如下:

{include file="../view/public/nav.html"/}

模版的标题和关键字,可以通过固定的语法进行传递;

return View::fetch('block', [
            'title' => '标题'
]);
{include file="public/header" title="$title"} // 将其传递给header模板

在Header模板中使用

header [title] // 这里使用[],注意title不能加$

如果是多个属性

{include file="public/header" title="$title" keyword="关键字"}
header [title] [keyword]

输出替换

有时,我们需要调用一些静态文件,比如css/js 等;

比如,我们在项目根目录中public/static/js/basic.js和public/static/css/basic.js

在模板中引用

<title>[title]</title>
<link rel="stylesheet" href="../static/css/basic.css">
<script src="../static/js/basic.js"></script>

那么,直接写完整路径,比较繁长,可以把这些路径整理打包;

在config/view.php 中,配置新增一个参数;tpl_replace_string

// 标签库标签结束标记
'taglib_end'    => '}',
 // 模版替换输出
'tpl_replace_string' => [
        '__JS__' => '../static/js',
        '__CSS__' => '../static/css',
]

其中设置属性指向特定的目录,然后在特定的模板中,使用变量替换基础路径即可

html 文件调用端,直接通过__CSS__(__JS__)配置的魔术方法调用即可;使用的时候会自动将变量编译为路径。

 <link rel="stylesheet" href="__CSS__/basic.css">
<script src="__JS__/basic.js"></script>
在测试的时候,由于是更改的配置文件刷新,每次都要删除编译文件才能生效;

文件加载

传统方式调用CSS 或JS 文件时,采用link 和script 标签实现;系统提供了更加智能的加载方式,方便加载CSS 和JS 等文件;

使用{load}标签和href 属性来链接,不需要设置任何其它参数;

{load href="__CSS__/basic.css"}
{load href="__JS__/basic.js"}

也支持href 多属性值的写法,如下:

{load href='__CSS__/basic.css, __JS__/basic.js'}

{load}还提供了两个别名{js}、{css}来更好的实现可读性,当然个人还是更喜欢Load;

{js href='__JS__/basic.js'}
{css href='__CSS__/basic.css'}

模版的布局和继承

模板布局

默认情况下,不支持模版布局功能,需要在配置文件中开启;

在配置文件config/view.php 中,配置开始模版布局功能;

return [
    ...
    // 模版替换输出
    'tpl_replace_string' => [
        '__JS__' => '../static/js',
        '__CSS__' => '../static/css',
    ],
    // 新增模板布局
    'layout_on' => true
];

此时,执行上一节的模版控制器,会发现提示缺少模版layout.html;这个默认的布局文件,是可以更改的,位置和名字均可配置;

// 模板布局
    'layout_on' => true,
    'layout_name' => 'public/layout', // 这个目录指app/view/public/layout.html

然后在app/view/public/下新建layout.html

这个layout的好处就是公共部分就只有一个文件,不需要再分开引用了。相当于逆向,在模板中写出所有公用的部分,然后在每个模板中写不一样的结构,然后插入到公用模板的{__CONTENT__}处

layout.html 负责所有通用模块的代码部分,而局部内容通过变量引入;

使用{__CONTENT__}类似魔术方法的标签来引入index.html 非通用内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$title}</title>
    <!-- <link rel="stylesheet" href="__CSS__/basic.css">
    <script src="__JS__/basic.js"></script> -->
    {css href="__CSS__/basic.css"}
    {js href="__JS__/basic.js"}
</head>
<body>
    header  [keyword]

    {__CONTENT__}
</body>
</html>

上面说的是第一种,配置文件下来开启布局,而第二种方式则不需要开启直接使用;

当然也可以在config/view中关闭掉layout_on等相关配置,然后在个别的模板中,比如app/view/show/block.html中

{layout name="public/layout"}
这里是主题部分

首先,你必须关闭第一种配置,我这里就直接注释掉了,然后使用{layout}标签;也可以达到与上面一样的效果。

再强调:再测试的时候,如果更改了配置文件,务必删除temp 下编译文件再刷新;

你可以更改{__CONTENT__},只要在配置文件中配置;

'layout_item' => '{__REPLACE__}'
{layout name="public/layout" replace='[__REPLACE__]'}

模版继承

模版继承是另一种布局方式,这种布局的思路更加的灵活;

首先,我们要创建一个app/view/public/base.html 的基模版文件,文件名随意,比如base.html;

创建一个新的方法extend ,在view/show/block.html载入新的模版extend.html,然后加载基模版;下面两种方式都可以

{extend name='public/base'}
{extend name='../view/public/base.html'}

在基模版base.html 中,设置几个可替换的区块部分,{block}标签实现;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{$title}</title>
</head>
<body>
    {block name="body"}这里是111{/block}
    {block name="nav"}这里引入其他文件{/block}
</body>
</html>

然后在block.html模板中

{extend name="public/base"}

{block name="body"}
    <em>这里是从block.html中写的</em>
{/block}

{block name="nav"}
    {include file="public/nav"}
{/block}

如此,block模板中的name="body"中的内容就会渲染在base模板的name="body"处。

在base.html 中,{include}可以加载内容,而在extend.html 可以改变加载;

{block name='include'}{include file='public/header'}{/block}

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:thinkphp
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    9603次阅读 623人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    4297次阅读 317人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    14452次阅读 948人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    13497次阅读 491人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    12015次阅读 963人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    16376次阅读 1307人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    15187次阅读 1234人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    29849次阅读 2347人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    25909次阅读 1994人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录