TP5的模板继承

最新推荐文章于 2023-04-06 11:37:56 发布

刘欣

最新推荐文章于 2023-04-06 11:37:56 发布

阅读量861

点赞数

分类专栏： thinkphp5 文章标签： thinkphp5 模板继承

本文链接：https://blog.csdn.net/qq_35311094/article/details/89352823

版权

thinkphp5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文探讨了ThinkPHP5框架中的模板继承概念，包括如何创建父页面和子页面。通过模板继承，开发者可以实现页面布局的复用，提高代码效率。文章详细介绍了父页面作为公共布局，以及子页面如何继承和扩展父页面的内容。

摘要由CSDN通过智能技术生成

父页面

<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{block name="title"}{/block}__TITLE__</title>
   
 </script>
		<!--JAVASCRIPT-->
 </script>
	
	<!--CSS-->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">

	<!--JAVASCRIPT-->
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>

    {block name="css"}{/block}
    {block name="script"}{/block}
</head>
<body>
    {block name="content"}{/block}
</body>
</html>

子页面

{extend name="layout"}
{block name="title"}首页-写{/block}
{block name="css"}
{/block}
{block name="script"}
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        $(function(){
            UE.getEditor('content',{    //content为要编辑的textarea的id
                initialFrameWidth: 623,   //初始化宽度
                initialFrameHeight: 300,   //初始化高度
            });
        });

    </script>
{/block}
{block name="content"}
    <div class="page-header">
        <div class="triggerButton">
            <h4><b>写文章</b></h4>
        </div>
        <div class="triggerRightButton click-button">
            <button disabled="" type="button" class="Button triggerButton Button--blue">发布<i class="glyphicon glyphicon-chevron-down"></i></button>
        </div>
    </div>

    <div class="center-block centen-width">
        <div class="setting">
            <input type="file" accept=".jpeg, .jpg, .png" style="display: none;">
            <div style="text-align: center;padding-top: 83px;">
                <i class="glyphicon glyphicon-camera icon-log"></i>
            </div>
        </div>

        <div class="form-group" style="width: 107%;padding-top: 10px;">
            <input type="text" class="form-control" id="name" placeholder="请输入标题（最多 50 个字）">
        </div>

        <!-- 加载编辑器的容器 -->
        <textarea name="content" id="content" ></textarea>
    </div>
{/block}