Symfony5 系列教程5 - 模板TWIG

这个教程是基于symfony5进行编写,以后再出高版本的symfony,那么就可以只出一套针对这个高版本的特性进行编写,该系列教程会一直延续更新。

点赞再看,养成习惯,微信搜索公众号【程序员老班长】关注这个互联网老班长,查看更多系列文章

twig模板引擎在前面就已经接触到了,就类似java中的freemarker

目录

1,输出

2,过滤器

3,文件位置

4,文件命名

5,页面链接

6, 引用静态资源

7,被render

8,在服务中被调用

9,使用dump方法输出模板中变量

10,引入其它模板文件

11,嵌入控制器来展示模板

12,  布局继承


1,输出

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Symfony!</title>
    </head>
    <body>
        <h1>{{ page_title }}</h1>

        {% if user.isLoggedIn %}
            Hello {{ user.name }}!
        {% endif %}

        {# ... #}
    </body>
</html>

{{}},是输出值

{%%} ,是写逻辑判断语句,if和for循环用的较多

{##} ,注释

2,过滤器

{{ title|upper }}

过滤器是用在管道符号|后面的,上面的这个过滤器upper,是把title值转化为大写。

twig内置了很多过滤器,可以看官方文档:

3,文件位置

    默认是放在template文件夹下,这个可以在配置文件里面进行更改。

4,文件命名

文件名字推荐驼峰式写法,比如:blog_posts.twig 这种写法。

5,页面链接

在模板文件里面,对页面进行链接,使用path方法。

比如:

<a href="{{ path('blog_index') }}">Homepage</a>

6, 引用静态资源

使用asset方法管理静态资源

{# 图片位于 "public/images/logo.png" #}
<img src="{{ asset('images/logo.png') }}" alt="Symfony!"/>

{# css文件位于 "public/css/blog.css" #}
<link href="{{ asset('css/blog.css') }}" rel="stylesheet"/>

{# js文件位于 "public/bundles/acme/js/loader.js" #}
<script src="{{ asset('bundles/acme/js/loader.js') }}"></script>

7,被render

作为页面展示,一般是被控制器render方法调用。

 return $this->render('product/index.html.twig', [
            'category' => '...',
            'promotions' => ['...', '...'],
        ]);

8,在服务中被调用

在服务中,是使用Environment这个类型进行声明,然后容器依赖注入:

namespace App\Service;

use Twig\Environment;

class SomeService
{
    private $twig;

    public function __construct(Environment $twig)
    {
        $this->twig = $twig;
    }

    public function someMethod()
    {
        // ...

        $htmlContents = $this->twig->render('product/index.html.twig', [
            'category' => '...',
            'promotions' => ['...', '...'],
        ]);
    }
}

9,使用dump方法输出模板中变量

使用dump这个方法之前,要先确定加载应用了 symfony/var-dumper 这个组件。

{% dump articles %}

{% for article in articles %}
   
    {{ dump(article) }}

    <a href="/article/{{ article.slug }}">
        {{ article.title }}
    </a>
{% endfor %}

可以看到这两种都是可以的,直接dump或在{{}}里面使用dump

10,引入其它模板文件

使用include方法

11,嵌入控制器来展示模板

需要使用render方法

{{ render(controller(
        'App\\Controller\\BlogController::recentArticles', {max: 3}
    )) }}

比如这个调用了控制器的recentArticles方法,并且传入变量max,max值为3.

12,布局继承

这个在项目里面把页面分为几大块,然后让后面的子页面可以继承这个父页面即可。

文章持续更新,可以微信搜索公众号「 程序员老班长 」查看更多文章。

猜你喜欢

转载自blog.csdn.net/liliangzhao/article/details/106221226