当前位置: 首页 > news >正文

ThinkPHP 6.1 模板篇之文件加载

本文主要讲述模板中如何使用包含文件、引入css/js文件及路径优化。

包含文件

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

包含用法

1.创建公用文件

在模版 view 目录创建一个 common公共目录,分别创建 header、footer 和 nav

在控制器渲染模版 index

public function index()
{return view('test/index');
}

 2.index模板文件,包含三个公用文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板篇之文件包含、替换、加载</title>
</head>
<body>{include file='common/header'/}{include file='common/nav'/}{include file='common/footer'/}
</body>
</html>

 

加载多文件

{include file='common/header,common/nav,common/footer'/}

加载完整路径

1.单应用

{include file='../view/common/header.html'/}

2.多应用

若视图文件不在全局view中时

{include file='../app/应用名称/view/common/header.html'/}

此处的路径地址是相对入口文件index.php的位置

标题和关键字传递

1.控制器中设置标题和热搜词传递给index.html模板

{include file='common/header' title='$title' keywords='$keywords'/}

2.common/header.html 模版文件,使用[xxx]的方式接收调用数据

<title>[title]</title>
<meta name="keywords" content="[keywords]">

路径替换

在渲染模板时,需要调用一些样式和动态特效文件,如 css/js 等

直接写完整路径,有时路径比较长,这些路径替换优化:

增加配置

在config/view.php 配置文件中,新增参数:

// 模版替换输出
'tpl_replace_string' => ['__JS__' => '/js','__CSS__' => '/css',
]

此处路径为相对于入口文件位置,

因为我的配置文件为public/js、public/css,故如此配置;

如果不相同,请进行相应修改。

修改静态地址

html 模板文件中,直接修改为__CSS__、__JS__ 方法调用

<link rel="stylesheet" href="__CSS__/bootstrap.min.css">
<script src="__JS__/jquery.min.js"></script>

删除编译文件

由于是更改的配置文件刷新,每次都要删除编译文件才能生效。

文件加载

标签优化

可以在刚才文件路径替换的基础上,对路径进行进一步优化。

系统提供了{load}标签和 href 属性,来加载 CSS 和 JS 文件,

不再需要设置其它参数。

{load href='__CSS__/bootstrap.min.css'}
{load href='__JS__/jquery.min.js'}

注意:修改完成后,记得删除编译文件

加载多个文件

{load href='__CSS__/bootstrap.min.css, __JS__/jquery.min.js'}

设置别名

通过设置{js}、{css}来更好的实现可读性

{css href='__CSS__/bootstrap.min.css'}
{js href='__JS__/jquery.min.js'}

{js}和{css}只是别名而已,识别js、css 是根据后缀的

http://www.lryc.cn/news/37494.html

相关文章:

  • 操作系统内核与安全分析课程笔记【1】链表、汇编与makefile
  • 华为OD机试题 - 九宫格按键输入(JavaScript)| 机考必刷
  • PMSM控制_foc 控制环路
  • Linux 练习七 (IPC 共享内存)
  • 【数据库原理复习】ch4 完整性约束 SQL定义
  • 【2023年的就业形势依旧严峻】
  • Linux下LED灯驱动模板详解
  • 【C++】你不得不爱的——继承
  • 数据库系统概论
  • 32位处理器AM6528BACDXEA、AM6548BACDXEAF基于Arm Cortex-A53内核【工业4.0嵌入式产品应用】
  • 多图片怎么转换成PDF?这招教你轻松转换
  • kali双网卡
  • 【wed前端初级课程】第一章 什么是HTML
  • sd卡格式化后数据恢复怎么操作
  • 论文阅读笔记|大规模多标签文本分类
  • 国际化翻译navigator.language与语种对照表
  • Matlab进阶绘图第6期—雷达图/蜘蛛图/星图
  • Javascript的ES6 class写法和ES5闭包写法性能对比
  • 探秘MySQL——全面了解索引、索引优化规则
  • 战斗力最强排行榜:10-30人团队任务管理工具
  • 2023-03-09干活小计
  • 基数排序算法
  • 项目实战典型案例24——xxljob控制台不打印日志排查
  • 旋转框目标检测mmrotate v1.0.0rc1 之RTMDet训练DOTA的官方问题解析整理(四)
  • 4个顶级的华为/小米/OPPO/Vivo手机屏幕解锁工具软件
  • 华为OD机试题 - 和最大子矩阵(JavaScript)| 机考必刷
  • 企业电子招标采购系统源码之项目说明和开发类型
  • Python高频面试题——装饰器(带大家理解装饰器的本质)
  • 全方位解读智能中控屏发展趋势!亚马逊Alexa语音+Matter能力成必备
  • JAVA练习74-括号生成