tp5 结合 x-admin 模板布局

最新推荐文章于 2021-08-30 17:23:56 发布

爱敲代码的小冰

最新推荐文章于 2021-08-30 17:23:56 发布

阅读量926

点赞数

分类专栏： # thinkphp php

本文链接：https://blog.csdn.net/weixin_42371812/article/details/104804447

版权

php 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

thinkphp

12 篇文章 0 订阅

订阅专栏

昨天，运用tp5 + x-admin搭一个后台。其实，在早之前，小冰也自己搭建过，只是之前小冰搭建的方法不太“专业”，按大师的话来说，小冰这是没毕业的幼儿园小朋友。
然而，经过一段时间的学习，小冰在技术上有了一些小小的提升。
首先，在view目录下，新建一个public目录。
在public目录中新建一个base.html的文件，直接这样子写

<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="__ADMIN__/css/font.css">
        <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
        <block name="style"></block>
        <script src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script>
            // 是否开启刷新记忆tab功能
             //var is_remember = true;
        </script>
    </head>
    <body>
        <block name="breadcrumb">
            <div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href=""><block name="step1"></block></a>
                <a>
                  <cite><block name="step2"></block></cite></a>
              </span>
              <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
            </div>
        </block>

        <block name="content"><!--这儿是模版，一般情况下可以用括号，也可以用尖括号-->
        </block>
    </body>
    
    <block name="script"></block>
</html>

之后，在需要的页面上直接这样子继承

//index/index.html
<extend name="public/base" />
<block name="breadcrumb"></block>

<block name="content">
    <include file="public/header" />
    <include file="public/menu" />
    <div class="page-content">
        <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
            <ul class="layui-tab-title">
                <li class="home">
                    <i class="layui-icon">&#xe68e;</i>我的桌面</li></ul>
            <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                <dl>
                    <dd data-type="this">关闭当前</dd>
                    <dd data-type="other">关闭其它</dd>
                    <dd data-type="all">关闭全部</dd></dl>
            </div>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src='{:url("index/welcome.html")}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                </div>
            </div>
            <div id="tab_show"></div>
        </div>
    </div>
</block>

然后，在其他页面上，可以这样子

<extend name="public/base" />
<block name="step1">订单管理</block>
<block name="step2">订单列表</block>
<block name="content">这是主体内容</block>

爱敲代码的小冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tp5 结合 x-admin 模板布局

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫

专栏目录