Twig之block與extend，用起來(lái)就兩字省事
當(dāng)然有條件的可以直接上前后端分離，更省事，看具體情況
定義一個(gè)基礎(chǔ)模板夺姑，類似的頁(yè)面只需要將關(guān)鍵的block塊內(nèi)容覆蓋就搞定
| block | 定義 | 介紹 |
|---|---|---|
| head | head頭部 | 包括title css文件定義 |
| title | 頁(yè)面標(biāo)題 | 可自定義頁(yè)面標(biāo)題 |
| importStyle | 引入css樣式文件 |
自定義頁(yè)面樣式 |
| header | 導(dǎo)航欄 | 自定義導(dǎo)航欄 |
| sidebar | 左側(cè)菜單欄 | |
| contentHeader | 頁(yè)面路徑 | |
| content | 頁(yè)面主內(nèi)容 | |
| footer | 頁(yè)面底部 | |
| importJs | 引入javascript
|
|
| script | 頁(yè)面script
|
基礎(chǔ)模板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" >-->
</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 >Almsaeed Studio</a>.</strong> All rights
reserved.
{% endblock %}
</footer>
</div>
<!-- ./wrapper -->
{% block importJs %}
......
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
模板繼成demo
<!-- @符號(hào)是命名空間，以下表示 cube 命名下路徑 -->
{% extends "@cube/base.php" %}
{% block title %}Entity - Cube{% endblock %}
{% block contentHeader %}
<h1>
Entity
<small>實(shí)體類</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">實(shí)體生成器</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="請(qǐng)輸入命名空間">
</div>
<div class="form-group">
<label for="db">數(shù)據(jù)庫(kù)</label>
<select id="db" name="db" class="form-control"></select>
</div>
<div class="form-group">
<label for="tables">數(shù)據(jù)表</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">實(shí)體類</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 %}
搞定
