php的Twig模板语言：类似python的jinja2，语法什么的都是类似python
模板继承
模板路径：app/Resources/views/
母版：base.html.twig
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>{% block title %}自定义标题{% endblock title %}</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="row bg-primary"> <div class="col-sm-1 col-xs-1"></div> <div class="col-sm-11 col-xs-11"><h1><a href="" style="text-decoration: none;color: white;">MyWebSite</a></h1></div> </div> {% block body %} {% endblock body %} </body> </html>
list.html.twig
{% extends "base.html.twig" %} {% block title %}MyWebSite{% endblock title %} {% block body %} <div class="row jumbotron"> <div class="col-md-1 col-xs-1"></div> <div class="col-md-10 col-xs-10"><h1>Welcome to MyWebSite!</h1></div> <div class="col-md-1 col-xs-1"></div> </div> {% endblock body %}
show.html.twig
{% extends "base.html.twig" %} {% block title %}博客内容{% endblock title %} {% block body %} <div class="row jumbotron"> <div class="col-md-1 col-xs-1"></div> <div class="col-md-10 col-xs-10"><h1>我的第一篇博客</h1></div> <div class="col-md-1 col-xs-1"></div> </div> {% endblock body %}
list.html.twig 和 show.html.twig 都继承了 base.html.twig，拥有了相同的页面布局
变量传递
文件路径：src/AppBundle/Controller/BlogController.php
return $this->render('blog/show.html.twig', array('title' => '博客标题', 'content' => '博客内容'));
修改show.html.twig中block body
<div class="row jumbotron"> <div class="col-md-1 col-xs-1"></div> <div class="col-md-10 col-xs-10"><h1>{{ title }}</h1></div> <div class="col-md-1 col-xs-1"></div> </div> <div class="row"> <div class="col-md-1 col-xs-1"></div> <div class="col-md-10 col-xs-10"><h4>{{ content }}</h4></div> <div class="col-md-1 col-xs-1"></div> </div>
变量传递通过 {undefined{ }} 这样的符号来传递
传递类型 |
举例 |
读取方式 |
变量 |
array(‘title’ => ‘博客标题’) |
{{ title }} |
array结构 |
array(‘content’ => $content) |
{{ content[‘time’] }} |
类结构 |
array(‘content’ => $content) |
{{ content.time }} |
php原生方法 |
去掉 html标签方法 |
{{ content | strip_tags }} |
流程控制
src/AppBundle/Controller/BlogController.php
$content = array(); $content[] = array('category' => '类别1', 'text' => '内容1'); $content[] = array('category' => '类别2', 'text' => '内容2'); $content[] = array('category' => '类别1', 'text' => '内容3'); $content[] = array('category' => '类别2', 'text' => '内容4'); return $this->render('blog/show.html.twig', array('title' => '博客标题', 'content' => $content));
修改app/Resources/views/blog/show.html.twig，改成：
{% for cont in content %} {% if cont['category'] == '类别2' %} <div class="row"> <div class="col-md-1 col-xs-1"></div> <div class="col-md-10 col-xs-10"><h4>{{ cont['text'] }}</h4></div> <div class="col-md-1 col-xs-1"></div> </div> {% endif %} {% endfor %}
循环遍历 : {% for cont in content %}
逻辑判断: {% if cont[‘category’] == ‘类别2’ %}
链接生成
<a href='{{ path('blog_list') }}'>{{ cont['text'] }}</a>
blog_list为router.yml里边配置的路由名称
关于Twig的详细使用可参考
