vlambda博客
学习文章列表

symfony框架Twig模板语言的使用

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 ></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script ></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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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 %}

1

2

3

4

5

6

7

8

9

10

11

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 %}

1

2

3

4

5

6

7

8

9

10

11

list.html.twig 和 show.html.twig 都继承了 base.html.twig,拥有了相同的页面布局


变量传递

文件路径:src/AppBundle/Controller/BlogController.php


return $this->render('blog/show.html.twig', array('title' => '博客标题', 'content' => '博客内容'));

1

2

修改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>

1

2

3

4

5

6

7

8

9

10

变量传递通过 {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));

1

2

3

4

5

6

修改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 %}

1

2

3

4

5

6

7

8

9

循环遍历 : {% for cont in content %}

逻辑判断: {% if cont[‘category’] == ‘类别2’ %}


链接生成

<a href='{{ path('blog_list') }}'>{{ cont['text'] }}</a>

1

blog_list为router.yml里边配置的路由名称

————————————————

版权声明:本文为CSDN博主「彭世瑜」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/mouday/article/details/81078236