ThinkPHP_layout模版布局

最新推荐文章于 2023-08-10 10:27:50 发布

黑狗向前跑

最新推荐文章于 2023-08-10 10:27:50 发布

阅读量844

点赞数 3

分类专栏： ThinkPHP 文章标签： php html

本文链接：https://blog.csdn.net/weixin_42137574/article/details/120283338

版权

ThinkPHP 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在自己模块的config.php里添加如下代码

    'template' =>[
        'layout_on' => true, //开启模版布局
        'layout_name' => 'layout' //模版的文件位置
    ]

在这里插入图片描述

layout.html 的文件位置
在这里插入图片描述

layout.html 的内容
在这里插入图片描述
配置了 layout布局的config 只在本config模块起作用本模块的所有view 共用layout.html 里的代码

layout.html 代码参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/admin/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <script src="/static/admin/js/jquery-1.8.1.min.js"></script>
    <script src="/static/admin/js/bootstrap.min.js"></script>
    <script src="/static/admin/js/highcharts.js"></script>
    <script src="/static/admin/js/exporting.js"></script>
    <script src="/static/admin/js/draw.js"></script>
</head>
<body>
<!-- 上 -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <ul class="nav pull-right">
                <li id="fat-menu" class="dropdown">
                    <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-user icon-white"></i> admin
                        <i class="icon-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:void(0);">修改密码</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="javascript:void(0);">安全退出</a></li>
                    </ul>
                </li>
            </ul>
            <a class="brand" href="index.html"><span class="first">后台管理系统</span></a>
            <ul class="nav">
                <li class="active"><a href="javascript:void(0);">首页</a></li>
                <li><a href="javascript:void(0);">系统管理</a></li>
                <li><a href="javascript:void(0);">权限管理</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 左 -->
<div class="sidebar-nav">
    <a href="#error-menu" class="nav-header collapsed" data-toggle="collapse"><i class="icon-exclamation-sign"></i>权限管理</a>
    <ul id="error-menu" class="nav nav-list collapse">
        <li><a href="javascript:void(0);">管理员列表</a></li>
        <li><a href="javascript:void(0);">管理员新增</a></li>
        <li><a href="javascript:void(0);">角色管理</a></li>
        <li><a href="javascript:void(0);">权限管理</a></li>
    </ul>
    <a href="#accounts-menu" class="nav-header" data-toggle="collapse"><i class="icon-exclamation-sign"></i>商品管理</a>
    <ul id="accounts-menu" class="nav nav-list collapse in">
        <li><a href="javascript:void(0);">商品列表</a></li>
        <li><a href="javascript:void(0);">商品新增</a></li>
        <li><a href="javascript:void(0);">商品类型</a></li>
        <li><a href="javascript:void(0);">商品分类</a></li>
    </ul>
    <a href="#accounts-menu" class="nav-header" data-toggle="collapse"><i class="icon-exclamation-sign"></i>订单管理</a>
    <ul id="accounts-menu" class="nav nav-list collapse">
        <li><a href="javascript:void(0);">订单列表</a></li>
        <li><a href="javascript:void(0);">订单新增</a></li>
    </ul>
    <a href="#accounts-menu" class="nav-header" data-toggle="collapse"><i class="icon-exclamation-sign"></i>会员管理</a>
    <ul id="accounts-menu" class="nav nav-list collapse">
        <li><a href="javascript:void(0);">用户列表</a></li>
        <li><a href="javascript:void(0);">用户新增</a></li>
    </ul>
    <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-exclamation-sign"></i>系统管理</a>
    <ul id="dashboard-menu" class="nav nav-list collapse">
        <li><a href="javascript:void(0);">密码修改</a></li>
    </ul>
</div>

{__CONTENT__}

</body>
</html>

把页面素材放在public/static 下
在这里插入图片描述
记得修改 CSS JS 以及图片的路径

（如果不想让某个view起作用可以在跳转到view的方法里禁用layout布局）
在这里插入图片描述

        //不启用 模版布局 功能
        $this->view->engine->layout(false);

最终页面效果:
在这里插入图片描述

黑狗向前跑

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ThinkPHP_layout模版布局

在自己模块的config.php里添加如下代码 'template' =>[ 'layout_on' => true, //开启模版布局 'layout_name' => 'layout' //模版的文件位置 ]layout.html 的文件位置layout.html 的内容把页面素材放在public/static 下记得修改 CSS JS 以及图片的路径最终页面效果:...
复制链接

扫一扫