TP3.2嵌套公共模板样式 --- 模板继承

最新推荐文章于 2024-09-06 21:44:35 发布

原创最新推荐文章于 2024-09-06 21:44:35 发布 · 3.6w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tp3.2嵌套模板

ThinkPHP框架使用笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了TP3.2框架中如何进行模板继承，创建包括头部、左侧导航、主体内容、右侧导航和底部的网页布局。通过示例展示了common.html作为父模板，header.html和footer.html作为公共部分，而index.html则继承并使用这些公共模板。所有模板文件位于V层的Public文件夹下，确保正确继承以避免问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板一般有这五个部分：
1.头部 — 菜单
2.左侧导航栏
3.主体内容
4.右侧导航栏
5.底部

首先有一个继承的模板页面(common.html):
这里只是一个示例，缺哪部分再添哪部分，自己命名即可

<block name="header"><include file="Public:header" /></block>

<block name="style"></block>

<block name="main"></block>

<block name="footer"><include file="Public:footer" /></block>

<block name="js"></block>

公用头部（上面引入的是Public文件夹下的header文件,title名字可以用变量代替，控制器返回数据的时候跟着返回一个title就可以）：
header.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/swiper.min-4-0.css">
    <link rel="stylesheet" href="__CSS__/width.css">
    <link rel="stylesheet" href="__CSS__/c_style.css">
    <link rel="stylesheet" href="__CSS__/zy.css">
</head>

<body>
    <div class="main">
        <span class="background-h"></span>
        <header>
            <div class="width-1200 clearfix">
	            <a href="{:U('Index/index')}"><p>首页</p></a>
	            <a href="{:U('Index/index')}"><p>首页</p></a>
				<a href="{:U('Index/index')}"><p>首页</p></a>
				<a href="{:U('Index/index')}"><p>首页</p></a>
            </div>
        </header>

公共尾部（footer.html）：

        <footer>
            <div class="width-1200">
                <div class="a-box clearfix">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系方式</a>
                    <span>|</span>
                    <a href="#">服务条款</a>
                    <span>|</span>
                    <a href="#">用户须知</a>
                    <span>|</span>
                    <a href="#">使用帮助</a>
                </div>
                <p>版权所有：某某网站 xxxxxxxxxxxxxx 备案号xxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxxxxx</p>
            </div>
        </footer>
    </div>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/bootstrap.min.js"></script>
    <script src="__JS__/swiper4-0.min.js"></script>
</body>

</html>

这样就已经完事了，然后页面里面是怎么继承的：
index.html页面：

<!-- 先继承公共页面 -->
<extend name="public/common" />

<!-- 如果要自己写style样式代码 -->
<block name="style">
	11111111
</block>

<!-- 主题部分是main -->
<block name="main">
	11111111
</block>

<!-- 如果自己要写js代码 -->
<block name="js">
	11111111
</block>

上面的common.html，header.html，footer.html全在V层的一个文件夹下面，任意命名。继承的时候注意不要继承错了就好，我这里用的是Public

这里写图片描述