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,佈局繼承

這個在項目裏面把頁面分爲幾大塊,然後讓後面的子頁面可以繼承這個父頁面即可。

 

文章持續更新,可以微信搜索公衆號「 程序員老班長 」查看更多文章。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章