模板继承通过创建基础模板并定义可覆盖的区块来减少重复代码,子模板使用{extend}继承并用{block}覆盖内容,多级继承需逐级使用{extend},为避免性能问题应减少继承层级、合理划分区块、启用模板缓存、使用cdn及避免模板内复杂逻辑,最终提升开发效率与页面性能。

模板继承,说白了,就是让你在ThinkPHP里少写重复代码,特别是那些页面公共的部分,比如头部、尾部、导航栏什么的。你可以定义一个基础模板,然后其他页面继承它,只修改需要变化的部分。这样,修改公共部分的时候,只需要改动基础模板,所有继承的页面就都更新了,省时省力。

解决方案
首先,你需要创建一个基础模板,通常命名为
base.html或者
layout.html之类的。这个基础模板里包含所有页面的公共部分,并且定义一些“区块”(block),用来给子模板填充内容。
立即学习“PHP免费学习笔记(深入)”;

{block name="title"}默认标题{/block}
{block name="header"}
网站头部
{/block}
{block name="content"}
这里是默认内容,子模板可以覆盖。
{/block}
注意看上面的
{block}标签,它定义了一个区块。name属性是区块的名字,子模板可以通过这个名字来覆盖或扩展这个区块的内容。
然后,创建一个子模板,比如
index.html,继承基础模板。

{extend name="base" /}
{block name="title"}首页 - 我的网站{/block}
{block name="header"}
{include file="public/nav" /}
{/block}
{block name="content"}
欢迎来到我的网站!
这里是首页的内容。
{/block}这里,
{extend name="base" /}表示继承base.html模板。然后在各个
{block}里,就可以定义子模板的内容了。如果子模板没有定义某个区块,那么就会显示基础模板里该区块的默认内容。
{include file="public/nav" /} 是引入公共的导航栏文件。
关键点:
{extend name="base" /}:指定继承的模板。{block name="区块名"}:定义区块,子模板可以覆盖或扩展。{include file="模板文件路径" /}:引入其他模板文件,实现更细粒度的复用。
ThinkPHP模板继承的优势在于,它能显著减少重复代码,提高开发效率,并且让你的网站结构更清晰,更容易维护。
如何解决模板继承后样式丢失的问题?
这个问题通常是因为CSS或JS文件的路径不正确导致的。
路径问题: 确保你的CSS和JS文件的路径是相对于模板文件的正确路径。如果你把CSS文件放在
public/static/css/
目录下,并且你的模板文件在application/index/view/
目录下,那么在模板文件中引用CSS文件时,应该使用相对于public
目录的路径,例如:。 绝对路径/static/css/style.css
从网站根目录开始寻找。 相对路径./static/css/style.css
从当前文件所在目录开始寻找。继承后的路径: 如果你的CSS和JS文件是在基础模板中引用的,而子模板继承了基础模板,那么路径问题通常不会出现。但如果子模板需要引入额外的CSS或JS文件,那么同样需要注意路径的正确性。
浏览器缓存: 有时候,即使你的路径是正确的,浏览器也可能因为缓存而加载旧的CSS或JS文件。你可以尝试清除浏览器缓存,或者在CSS和JS文件的URL后面添加一个版本号,例如:
。资源文件部署: 确保你的静态资源文件(CSS、JS、图片等)已经正确部署到服务器上,并且可以通过URL访问。
检查开发者工具: 打开浏览器的开发者工具(通常是F12键),查看“Network”选项卡,检查是否有CSS或JS文件加载失败。如果有,可以查看具体的错误信息,帮助你找到问题所在。
使用公共函数: ThinkPHP提供了一些公共函数,可以帮助你生成正确的URL。例如,可以使用
__PUBLIC__
常量来表示public
目录的URL。例如:。
如何实现多级模板继承?
多级模板继承其实和单级继承的原理是一样的,只不过是继承的层级更多了。你可以创建一个基础模板,然后创建一个中间模板继承它,最后再创建一个子模板继承中间模板。
例如,你有三个模板:
base.html(基础模板)、
layout.html(中间模板)、
index.html(子模板)。
base.html:
{block name="title"}默认标题{/block}
{block name="header"}
网站头部
{/block}
{block name="content"}
这里是默认内容,子模板可以覆盖。
{/block}
layout.html:
{extend name="base" /}
{block name="header"}
{include file="public/nav" /}
{/block}
{block name="content"}
{block name="main"}
这里是中间模板的内容,子模板可以覆盖。
{/block}
{/block}index.html:
{extend name="layout" /}
{block name="title"}首页 - 我的网站{/block}
{block name="main"}
欢迎来到我的网站!
这里是首页的内容。
{/block}在这个例子中,
index.html继承了
layout.html,而
layout.html又继承了
base.html。这样,
index.html就可以同时使用
base.html和
layout.html中定义的区块和内容。
关键点:
- 每一级模板都使用
{extend name="模板名" /}来指定继承的模板。 - 子模板可以覆盖或扩展父模板中定义的区块。
- 多级继承可以让你更灵活地组织和复用模板代码。
如何避免模板继承带来的性能问题?
模板继承虽然方便,但如果使用不当,可能会带来性能问题。因为每次渲染一个页面,都需要加载和解析多个模板文件。
减少继承层级: 尽量减少模板继承的层级。层级越多,加载和解析的模板文件就越多,性能损耗也就越大。
合理划分区块: 合理划分区块,避免过度使用区块。如果一个区块的内容很少,或者很少被子模板覆盖,那么可以考虑直接把内容写在基础模板中,而不是定义一个区块。
-
使用缓存: ThinkPHP提供了模板缓存功能,可以把解析后的模板文件缓存起来,下次渲染同一个页面时,直接使用缓存,避免重复解析模板文件。
// 在config/template.php中配置 'cache_prefix' => 'tpl_', 'cache_time' => 3600, // 缓存时间,单位秒
使用静态缓存: 对于一些不经常变化的页面,可以使用静态缓存,把整个页面的HTML代码缓存起来,下次访问直接返回缓存的HTML代码,避免执行任何PHP代码。
优化数据库查询: 模板中经常会用到数据库查询的结果。优化数据库查询,减少查询次数,可以显著提高页面性能。
使用CDN: 把静态资源文件(CSS、JS、图片等)放在CDN上,可以加快资源的加载速度,提高页面性能。
避免在模板中执行复杂的逻辑: 模板的主要作用是展示数据,应该避免在模板中执行复杂的逻辑。如果需要在模板中执行复杂的逻辑,可以考虑把逻辑放在控制器中,然后把结果传递给模板。
总的来说,模板继承是ThinkPHP中一个非常实用的功能,可以帮助你更好地组织和复用模板代码。但是,在使用模板继承时,也需要注意一些性能问题,避免过度使用继承,合理划分区块,使用缓存等手段,可以有效地提高页面性能。











