Symfony - 檢視引擎



檢視層是MVC應用程式的表示層。它將應用程式邏輯與表示邏輯分離。

當控制器需要生成HTML、CSS或任何其他內容時,它會將任務轉發給模板引擎。

模板

模板基本上是用於生成任何基於文字的文件(例如HTML、XML等)的文字檔案。它用於節省時間並減少錯誤。

預設情況下,模板可以位於兩個不同的位置:

app/Resources/views/ - 應用程式的檢視目錄可以包含應用程式捆綁包的應用程式佈局和模板。它還可以覆蓋第三方捆綁包模板。

vendor/path/to/Bundle/Resources/views/ - 每個第三方捆綁包在其“Resources/views/”目錄中包含其模板。

Twig 引擎

Symfony 使用一種強大的模板語言,稱為Twig。Twig 允許您以非常簡單的方式編寫簡潔易讀的模板。Twig 模板很簡單,不會處理PHP標籤。Twig 執行空白控制、沙盒和自動HTML轉義。

語法

Twig 包含三種類型的特殊語法:

  • {{ ... }} - 將變數或表示式的結果列印到模板。

  • {% ... %} - 控制模板邏輯的標籤。它主要用於執行函式。

  • {# ... #} - 註釋語法。用於新增單行或多行註釋。

twig 基本模板位於“app/Resources/views/base.html.twig”

示例

讓我們來看一個使用twig引擎的簡單示例。

StudentController.php

<?php  
namespace AppBundle\Controller;  

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;  

class StudentController extends Controller { 
   /** 
      * @Route("/student/home") 
   */ 
   public function homeAction() { 
      return $this->render('student/home.html.twig'); 
   } 
}

在這裡,render() 方法渲染模板並將該內容放入Response物件中。

現在轉到“views”目錄,建立一個名為“student”的資料夾,並在該資料夾內建立一個名為“home.html.twig”的檔案。在檔案中新增以下更改。

home.html.twig

//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3> 

您可以透過請求url“https://:8000/student/home”來獲得結果。

預設情況下,Twig 帶有很長的標籤、過濾器和函式列表。讓我們逐一詳細介紹。

標籤

Twig 支援以下重要標籤:

do

do 標籤執行與正則表示式類似的功能,區別在於它不列印任何內容。其語法如下:

{% do 5 + 6 %} 

include

include 語句包含一個模板並將該檔案的渲染內容返回到當前名稱空間。其語法如下:

{% include 'template.html' %}

extends

extends 標籤可用於從另一個模板擴充套件模板。其語法如下:

{% extends "template.html" %}

block

block 充當佔位符並替換內容。塊名稱由字母數字字元和下劃線組成。例如:

<title>{% block title %}{% endblock %}</title>

embed

embed 標籤執行 include 和 extends 的組合。它允許您包含另一個模板的內容。它還允許您覆蓋包含的模板中定義的任何塊,例如擴充套件模板時。

{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %} 

filter

filter 部分允許您對模板資料塊應用常規 Twig 過濾器。例如:

{% filter upper %} 
   symfony framework 
{% endfilter %} 

這裡,文字將更改為大寫。

for

for 迴圈獲取序列中的每個專案。例如:

{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}

if

Twig 中的if 語句類似於PHP。表示式計算結果為真或假。例如:

{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}

過濾器

Twig 包含過濾器。它用於修改內容後再進行渲染。以下是一些值得注意的過濾器。

length

length 過濾器返回字串的長度。其語法如下:

{% if name|length > 5 %} 
   ... 
{% endif %} 

lower

lower 過濾器將值轉換為小寫。例如:

{{ 'SYMFONY'|lower }}

它將產生以下結果:

symfony

同樣,您可以嘗試大寫。

replace

replace 過濾器透過替換佔位符來格式化給定的字串。例如:

{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }} 

它將產生以下結果:

tutorials point website 

title

title 過濾器返回值的標題大小寫版本。例如:

{{ 'symfony framework '|title }}

它將產生以下結果:

 Symfony Framework

sort

sort 過濾器對陣列進行排序。其語法如下:

{% for user in names|sort %} 
   ... 
{% endfor %}

trim

trim 過濾器修剪字串開頭和結尾的空格(或其他字元)。例如:

{{ '  Symfony!  '|trim }} 

它將產生以下結果:

Symfony!

函式

Twig 支援函式。它用於獲得特定結果。以下是一些重要的 Twig 函式。

attribute

attribute 函式可用於訪問變數的“動態”屬性。其語法如下:

{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }} 

例如:

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

constant

constant 函式返回指定字串的常量值。例如:

{{ constant('Namespace\\Classname::CONSTANT_NAME') }}

cycle

cycle 函式迴圈遍歷一系列值。例如:

{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}

date

將引數轉換為日期以允許日期比較。例如:

<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p> 

它將產生以下結果:

Choose your location before May 15, 2017

引數必須採用PHP支援的日期和時間格式之一。

您可以將時區作為第二個引數傳遞。

dump

dump 函式轉儲有關模板變數的資訊。例如:

{{ dump(user) }}

max

max 函式返回序列中的最大值。例如:

{{ max(1, 5, 9, 11, 15) }}

min

min 函式返回序列中的最小值。例如:

{{ min(1, 3, 2) }}

include

include 函式返回模板的渲染內容。例如:

{{ include('template.html') }}

random

random 函式生成一個隨機值。例如:

{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #} 

range

range 函式返回包含整數算術級數的列表。例如:

{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %} 

它將產生以下結果:

1,2,3,4,5

佈局

佈局表示多個檢視的公共部分,例如頁首和頁尾。

模板繼承

一個模板可以被另一個模板使用。我們可以使用模板繼承的概念來實現這一點。模板繼承允許您構建一個包含網站所有公共元素(定義為塊)的基本“佈局”模板。

讓我們來看一個簡單的例子來了解更多關於模板繼承的資訊。

示例

考慮位於“app/Resources/views/base.html.twig”的基本模板。在檔案中新增以下更改。

base.html.twig

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>

現在轉到位於“app/Resources/views/default/index.html.twig“的索引模板檔案。在其中新增以下更改。

index.html.twig

{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}

這裡,{% extends %} 標籤通知模板引擎首先評估基本模板,該模板設定佈局並定義塊。然後渲染子模板。子模板可以擴充套件基本佈局並覆蓋標題塊。現在,請求url“https://:8000”,您可以獲得其結果。

資源

資源管理Web資源(如CSS樣式表、JavaScript檔案和影像檔案)的URL生成和版本控制。

JavaScript

要包含JavaScript檔案,請在任何模板中使用javascripts標籤。

{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %} 

樣式表

要包含樣式表文件,請在任何模板中使用stylesheets標籤。

{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}

影像

要包含影像,您可以使用image標籤。它定義如下。

{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %} 

組合資源

您可以將多個檔案組合成一個檔案。這有助於減少HTTP請求的數量,並提高前端效能。

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}
廣告