小程序之旅——第六站（模板首页）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

ThinkPHP的模板引擎内置了布局模板功能支持，可以方便的实现模板布局以及布局嵌套功能。

一、修改配置

修改文件、application/admin/config.php

添加

//模板
    'template'  =>  [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
    ],

二、布局模板页

新建文件/application/admin/view/layout.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>后台管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="keywords" content="">
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <!--[if lte IE 9]>
                <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
        <![endif]-->
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/ace-rtl.min.css" />
    <!--[if lte IE 9]>
          <link rel="stylesheet" href="{:config('public.static')}/ace1.4/assets/css/ace-ie.min.css" />
        <![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="{:config('public.static')}/ace1.4/assets/js/ace-extra.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
        <script src="{:config('public.static')}/ace1.4/assets/js/html5shiv.min.js"></script>
        <script src="{:config('public.static')}/ace1.4/assets/js/respond.min.js"></script>
        <![endif]-->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

<body class="no-skin">
    <div id="navbar" class="navbar navbar-default          ace-save-state">
        <div class="navbar-container ace-save-state" id="navbar-container">
            <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
                <span class="sr-only">Toggle sidebar</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header pull-left">
                <a href="{:url('index/index')}" class="navbar-brand">
                        <small>
                            <i class="fa fa-ra"></i>
                            后台管理
                        </small>
                    </a>
            </div>
            <div class="navbar-buttons navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="light-blue dropdown-modal">
                        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                                <img class="nav-user-photo" src="{:config('public.static')}/ace1.4/assets/images/avatars/user.jpg" alt="Jason's Photo" />
                                <span class="user-info">
                                    <small>Welcome,</small>
                                    {:session('user_name')}
                                </span>
                                <i class="ace-icon fa fa-caret-down"></i>
                            </a>
                        <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                            <li>
                                <a href="{:url('admin/public_edit_info')}">
                                        <i class="ace-icon fa fa-user"></i>
                                        个人设置
                                    </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="{:url('login/logout')}">
                                        <i class="ace-icon fa fa-power-off"></i>
                                        退出
                                    </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.navbar-container -->
    </div>
    <div class="main-container ace-save-state" id="main-container">
        <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {}
        </script>
        <div id="sidebar" class="sidebar responsive  ace-save-state">
            <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {}
            </script>
            {:action('Menu/index','','widget')}
            <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
                <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
            </div>
        </div>
        <div class="main-content">
            <div class="main-content-inner">
                {__CONTENT__}
            </div>
        </div>
        <!-- /.main-content -->
        <div class="footer">
            <div class="footer-inner">
                <div class="footer-content" style="border-top: 2px solid #E5E5E5;line-height:26px;">
                    <span class="bigger-110">
                            <span class="blue bolder"><a href="#" target="_blank">后台管理系统</a></span> &copy; 2017-2018
                    </span>
                    &nbsp; &nbsp;
                    <span class="action-buttons">
                            <a href="#">
                                <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
                            </a>

                            <a href="#">
                                <i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
                            </a>

                            <a href="#">
                                <i class="ace-icon fa fa-rss-square orange bigger-150"></i>
                            </a>
                        </span>
                </div>
            </div>
        </div>
        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
            </a>
    </div>
    <!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]> -->
    <script src="{:config('public.static')}/ace1.4/assets/js/jquery-2.1.4.min.js"></script>
    <!-- <![endif]-->
    <!--[if IE]>
<script src="{:config('public.static')}/ace1.4/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
    <script type="text/javascript">
    if ('ontouchstart' in document.documentElement)
        document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <script src="{:config('public.static')}/ace1.4/assets/js/bootstrap.min.js"></script>
    <!-- page specific plugin scripts -->
    <!--[if lte IE 8]>
          <script src="{:config('public.static')}/ace1.4/assets/js/excanvas.min.js"></script>
        <![endif]-->
    <!-- ace scripts -->
    <script src="{:config('public.static')}/ace1.4/assets/js/ace-elements.min.js"></script>
    <script src="{:config('public.static')}/ace1.4/assets/js/ace.min.js"></script>
    <!-- inline scripts related to this page -->
    <link rel="stylesheet" href="{:config('public.static')}/artDialog/dialog.css" />
    <script src="{:config('public.static')}/artDialog/dialog.js"></script>
    <!--artDialog end-->
    <script>
    var u = $(".active").parent('ul');

    var uc = u.attr("class"); //

    if (uc == 'submenu') {
        u.parent().attr("class", "open active");
        if (u.parent().parent().attr('class') == 'submenu') {
            u.parent().parent().parent().attr("class", "open active");
        }
    }

    //弹出图片
    function alert_img(url, width, heigth, title) {

        art.dialog({
            padding: 0,
            title: title,
            content: '<img src="' + url + '" width="' + width + '" height="' + heigth + '" />',
            lock: true
        });
    }
    //弹出确认操作
    function alert_del(url, title) {
        art.dialog({
            lock: true,
            background: '#300', // 背景色
            opacity: 0.87, // 透明度
            content: title,
            ok: function() {
                return window.location.href = url;
            },
            cancel: true
        });
    }
    </script>
</body>

</html>

三、首页

创建文件/application/admin/controller/Index.php文件

<?php

/**
 * @Author: ZouQH
 * @Date:   2017-09-30 10:40:08
 * @Last Modified by:   ZouQH
 * @Last Modified time: 2017-10-13 15:52:17
 */
namespace app\admin\controller;

class Index extends Common
{

    /**
     * 后台首页
     */
    public function index(){
       
        return $this->fetch();
    }
}

创建/application/admin/view/index/index.html

<div class="page-content">

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="alert alert-block alert-success">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>
                <i class="ace-icon fa fa-check green"></i>
                欢迎使用
                <strong class="green">
                    管理系统
                    <small>(v1.0)</small>
                </strong>
            </div>

            <div class="row">
                <div class="space-6"></div>

                <div class="col-sm-7 infobox-container">
                    <div class="infobox infobox-green">
                        <div class="infobox-icon">
                            <i class="ace-icon fa fa-comments"></i>
                        </div>

                        <div class="infobox-data">
                            <span class="infobox-data-number">32</span>
                            <div class="infobox-content">comments + 2 reviews</div>
                        </div>

                        <div class="stat stat-success">8%</div>
                    </div>

                    <div class="infobox infobox-blue">
                        <div class="infobox-icon">
                            <i class="ace-icon fa fa-twitter"></i>
                        </div>

                        <div class="infobox-data">
                            <