Twig模板引擎

YP框架采用Twig作为模板引擎组件,之前用过的大部分框架采用Smarty模板引擎,Smarty模板引擎与Twig模板引擎相比,具有以下不足之处

  • 公共部分内容越加越多了,不需要用的js、css在一些页面也被强制引进来了
  • 新页面的css只能写在网页的body内,看起来总让人不爽。
  • 左侧、头部、尾部若有特殊显示,操作起来不方便,只能在公共地方去做判断了。 基于以上Smarty模板引擎不足之处的几点,YP框架在开发之初就选用Twig模板引擎作为模板渲染的组件。

Twig模板引擎具有"类继承的思想",公用的资源放在'基类'布局页面中,子页面只需要继承"基类"布局页面就可以实现整个页面的渲染。 为了方便大家使用Twig模板引擎,在YP框架中使用Twig跟在其他框架使用Smarty模板引擎一样。分配变量到模板采用$this->assign('变量名称',变量)方法,模板渲染采用$this->display()方法进行模板渲染。

实例说明

首先我们来看看一个应用的例子,以下是一个“基类”页面的布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block head %}
    <title>优品框架</title>
    <link href="/Static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/Static/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="/Static/js/jquery-2.1.1.js"></script>
    {% endblock %}
</head>

<body>
<div id="wrapper">
    {% block left %}
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li {% if c in ['Brand', 'Category' ,'Attribute', 'Style'] %} class="active" {% endif%}>
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">货品信息</span> <span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse {% if c in ['Brand', 'Category' ,'Attribute', 'Style'] %} in {% endif %}" >
                        <li {% if c =='Brand' %} class="active" {% endif %}><a href="/Goods/Brand/getBrand">品牌管理</a></li>
                        <li {% if c =='Category' %} class="active" {% endif %}><a href="/Goods/Category/getCategory">类别管理</a></li>
                        <li {% if c =='Attribute' %} class="active" {% endif %}><a href="/Goods/Attribute/getAttribute">属性管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    {% endblock %}
    <div id="page-wrapper" class="gray-bg">
        {% block top %}
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
                    </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">欢迎YP框架工具包。</span>
                    </li>
                    <li>
                        <a href="login.html">
                            <i class="fa fa-sign-out"></i> 退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        {% endblock %}
        {% block content %}
        {% endblock %}
        {% block footer%}
        <div class="footer">
            <div>
                <strong>Copyright</strong> 深圳优品未来科技有限公司 &copy; 2014-2017
            </div>
        </div>
        {% endblock %}
    </div>
</div>
{% block script %}

# 写javascript脚本代码 
{% endblock %}

</body>
</html>

上述布局中你将发现这样的标签代码{% head block %}{% endblock %},他们定义一个布局模块。所有的子页面只要继承这基类页面就可以渲染整个页码。

以下就是继承代码例子

// 继承基类的模板
{% extends "Admin/Public/base.html" %}
{% block head %}
# 子页面需要额外加的头部信息
<link href="/Static/css/plugins/footable/footable.core.css" rel="stylesheet">
// 继承'基类'页面的头部信息
{{parent()}}
{% endblock %}

{% block content %}

# 写每个页码需要填充的内容
{% endblock %}

{% block script %}
 # 写javascript脚本代码

 // 继承'基类'页面的javascript脚本代码
{{ parent()}}
{% endblock %}

如果你的子页面只需要改变内容,也就是头部、尾部、左侧的导航共用'基类'布局的话,只需要在子页面中加入如下代码

// 继承基类的模板
{% extends "Admin/Public/base.html" %}

{% block content %}

# 写每个页码需要填充的内容
{% endblock %}

是不是很简单啊,接下来讲几个常用的标签使用

FOR标签

语法:

{% for k,v in data %}   
    // 处理循环的业务
{% endfor %}

k代表下标,v代表值,data代表要循环的数组对象

IF标签

语法:

{% if a == b %}

{% elseif b==c %}

{% else %}

{%  endif %}

在此就不详细讲解其他标签了,想要了解更多标签的使用点击这里查看官方文档

results matching ""

    No results matching ""