Twig之block与extend，用起来就两字省事
当然有条件的可以直接上前后端分离，更省事，看具体情况
定义一个基础模板，类似的页面只需要将关键的block块内容覆盖就搞定
| block | 定义 | 介绍 |
|---|---|---|
| head | head头部 | 包括title css文件定义 |
| title | 页面标题 | 可自定义页面标题 |
| importStyle | 引入css样式文件 |
自定义页面样式 |
| header | 导航栏 | 自定义导航栏 |
| sidebar | 左侧菜单栏 | |
| contentHeader | 页面路径 | |
| content | 页面主内容 | |
| footer | 页面底部 | |
| importJs | 引入javascript
|
|
| script | 页面script
|
基础模板base
<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock %}</title>
......
{% block importStyle %}
{% endblock %}
{% endblock %}
<!-- Google Font -->
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
{% block header %}
......
{% endblock %}
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% block sidebar %}
......
{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
{% block contentHeader %}
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
{% endblock %}
</section>
<!-- Main content -->
<section class="content">
{% block content %}
......
{% endblock %}
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
{% block footer %}
<div class="pull-right hidden-xs">
<b>Version</b> 2.4.0
</div>
<strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
reserved.
{% endblock %}
</footer>
</div>
<!-- ./wrapper -->
{% block importJs %}
......
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
模板继成demo
<!-- @符号是命名空间，以下表示 cube 命名下路径 -->
{% extends "@cube/base.php" %}
{% block title %}Entity - Cube{% endblock %}
{% block contentHeader %}
<h1>
Entity
<small>实体类</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Cube</a></li>
<li class="active">Entity</li>
</ol>
{% endblock %}
{% block content %}
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">实体生成器</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="namespace">命名空间</label>
<input type="text" class="form-control" id="namespace" placeholder="请输入命名空间">
</div>
<div class="form-group">
<label for="db">数据库</label>
<select id="db" name="db" class="form-control"></select>
</div>
<div class="form-group">
<label for="tables">数据表</label>
<select id="tables" name="tables" class="form-control"></select>
</div>
<div class="col-md-6">
<div class="box box-solid">
<div class="box-header with-border">
<i class="fa fa-text-width"></i>
<h3 class="box-title">实体类</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</form>
</div>
<!-- /.box-body -->
</div>
{% endblock %}
{% block script %}
<script>
$(function () {
// getDbs
let dbSelect = $('#db');
let tableSelect = $('#tables');
$.get('./ajaxGetConnection', function (response) {
if (response.code === 200) {
dbSelect.empty()
$(response.data).each(function (i, o) {
dbSelect.prepend("<option value='" + o + "'>" + o + "</option>");
})
}
});
let dbs = [];
dbSelect.change(function (e) {
let conn = $(this).children('option:selected').val()
$.post('./ajaxGetTables',{conn:conn}, function (response) {
if (response.code === 200) {
tableSelect.empty()
$(response.data).each(function (i, o) {
tableSelect.prepend("<option value='" + o + "'>" + o + "</option>");
})
}
});
})
});
</script>
{% endblock %}
搞定
网友评论