本文主要讲述模板中如何使用包含文件、引入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 是根据后缀的
总结
主要讲述模板中如何使用包含文件、引入css/js文件及路径优化。
4069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
