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

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"><span class="infobox-data-number">11</span><div class="infobox-content">new followers</div></div><div class="badge badge-success">+32%<i class="ace-icon fa fa-arrow-up"></i></div></div><div class="infobox infobox-pink"><div class="infobox-icon"><i class="ace-icon fa fa-shopping-cart"></i></div><div class="infobox-data"><span class="infobox-data-number">8</span><div class="infobox-content">new orders</div></div><div class="stat stat-important">4%</div></div><div class="infobox infobox-red"><div class="infobox-icon"><i class="ace-icon fa fa-flask"></i></div><div class="infobox-data"><span class="infobox-data-number">7</span><div class="infobox-content">experiments</div></div></div><div class="infobox infobox-orange2"><div class="infobox-chart"><span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"></span></div><div class="infobox-data"><span class="infobox-data-number">6,251</span><div class="infobox-content">pageviews</div></div><div class="badge badge-success">7.2%<i class="ace-icon fa fa-arrow-up"></i></div></div><div class="infobox infobox-blue2"><div class="infobox-progress"><div class="easy-pie-chart percentage" data-percent="42" data-size="46"><span class="percent">42</span>%</div></div><div class="infobox-data"><span class="infobox-text">traffic used</span><div class="infobox-content"><span class="bigger-110">~</span>58GB remaining</div></div></div></div><!-- /.widget-box --></div><!-- /.col --></div><!-- /.row --><!-- PAGE CONTENT ENDS --></div><!-- /.row -->
</div><!-- /.page-content -->

转载于:https://www.cnblogs.com/rainbowz/p/7676638.html

小程序之旅——第六站（模板首页）相关推荐

酷客多小程序百城宣讲会-郑州站圆满成功
酷客多小程序百城宣讲会-郑州站圆满成功 2018年6月26日,以<数字中国>为主题的酷客多小程序沙龙会在郑州顺利举行,来自各地的商户.企业及代理商们对此次沙龙表现出十分浓厚的兴趣,到场人数 ...
微信小程序周报（第六期）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序周报(第六期) 客户被绑,蒙眼,惊问:"想干什么?" 对方不语,鞭笞之,客户求饶:"别 ...
酷客多小程序百城宣讲会-岳阳站圆满结束
酷客多小程序百城宣讲会-岳阳站圆满结束 2018年6月28日,以<数字中国>为主题的酷客多小程序沙龙会在岳阳如期举行,来自各地的商户.企业及代理商们对此次宣讲会表现出颇高的期待,现场气氛热 ...
从一个简单的“欢迎“页面开始小程序之旅
首先删除index/log/utils文件夹还有app.json/app.js/app.wxss 会出现报错,未找到app.json文件然后新建自己的app.js/app.json/app.wxs ...
图片拼图微信小程序源码_支持多模板制作和流量主
介绍: 该款小程序支持多种流量主: 另外支持多种图形模板制作切割: 另外也支持长图合成等功能: 安装简单,新手容易上手,具体就不多说了大家自行研究吧!!!! 图片拼图微信小程序源码_支持多模板制作和流 ...
图片拼图微信小程序源码下载支持多模板制作和流量主
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 好了下面来看看小编的测试演示图! 小程序下载地址:(10条消息 ...
全新圣诞节头像框制作生成微信小程序源码下载支持多模板
一款可以制作圣诞帽头像的一款小程序里面有多种模板选择,当然啦里面不只是可以制作圣诞帽还可以制作贴图头像框,各种卡通,卡哇伊,男神女神标等等模板可以制作的另外还支持检测你的手机型号,自动辨别手机真 ...
小程序订阅消息和公众号模板消息
通过小程序和公众号关联后发公众号模板消息关联后用户登录获取到union_id,主体在小程序,根据对应场景发送模板消息代码如下: /*** 模板消息发送* @param $openid 接收消息的 ...
微信小程序使用微信公众号的模板消息进行消息推送开发流程
微信小程序使用微信公众号的模板消息进行消息推送开发流程微信公众号服务号,微信公众号订阅号,微信公众号开发者平台,微信小程序这些的账号都是独立的不能共用微信开放平台开发者资质认证审核费用为300元 ...

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

小程序之旅——第六站（模板首页）相关推荐

最新文章

热门文章