Twig 教程 · ZetCode 中文系列教程

{% raw %} # Twig 教程 > 原文： [https://zetcode.com/php/twig/](https://zetcode.com/php/twig/) Twig 教程展示了如何在 PHP 應用中使用 Twig 模板引擎來生成文檔。 ## 枝條 Twig 是一個 PHP 模板引擎。它是由 Symfony 開發者創建的。 Twig 文件的擴展名為`.html.twig`；它們是靜態數據（例如 HTML 和 Twig 構造）的混合。 Twig 使用雙大括號分隔符`{{ }}`進行輸出，并使用大括號百分比定界符`{% %}`進行邏輯運算。 `{# #}`用于注釋。 ```php <ul> {% for word in words %} <li>{{ word }}</li> {% endfor %} </ul> ``` 此代碼是示例 Twig 語法。在此代碼中，我們使用`for`標簽創建一個循環。 Twig 語法由標簽，過濾器，函數，運算符和測試組成。 ## 安裝 Twig 首先，我們設置了 Twig。 ```php $ composer require twig/twig ``` 我們用 Composer 安裝 Twig。 ```php $ mkdir templates ``` 我們將模板文件放入`template`目錄。 ```php require __DIR__ . '/vendor/autoload.php'; ``` 我們需要將`autoload.php`文件添加到腳本中。 ## 模板引擎模板引擎或模板處理器是一個旨在將模板與數據模型結合以生成文檔的庫。模板引擎通常用于在源代碼預處理或生成動態 HTML 頁面中生成大量電子郵件。我們創建一個模板引擎，在其中定義靜態零件和動態零件。動態部分隨后將替換為數據。渲染函數隨后將模板與數據結合在一起。 ## Twig 第一個例子以下是 Twig 模板系統的簡單演示。 `first.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); echo $twig->render('first.html.twig', ['name' => 'John Doe', 'occupation' => 'gardener']); ``` 我們使用`FilesystemLoader`從指定目錄加載模板。 ```php echo $twig->render('first.html.twig', ['name' => 'John Doe', 'occupation' => 'gardener']); ``` 輸出通過`render()`生成。它帶有兩個參數：模板文件和數據。 `templates/first.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> {{ name }} is a {{ occupation }} </p> </body> </html> ``` 這是模板文件。變量以`{{}}`語法輸出。 ```php $ php first.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> John Doe is a gardener </p> </body> </html> ``` 這是輸出。 ## Twig 過濾器過濾器使我們能夠以各種方式修改數據。 `filters.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); $words = ['sky', 'mountain', 'falcon', 'forest', 'rock', 'blue']; $sentence = 'today is a windy day'; echo $twig->render('filters.html.twig', ['words' => $words, 'sentence' => $sentence]); ``` 在示例中，我們有一個數組和一個字符串作為模板數據。 `templates/filters.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Filters</title> </head> <body> <p> The array has {{ words | length }} elements </p> <p> Joined array elements: {{ words | join(',') }} </p> <p> {{ sentence | title }} </p> </body> </html> ``` 過濾器應用`|`字符。該示例使用`length`對單詞進行計數，使用`join`連接數組元素，并使用`title`修改字符。 ## Twig 自定義過濾器我們可以使用`Twig_Filter`創建自定義過濾器。 `customfilter.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); $twig->addFilter(new Twig_Filter('accFirst', 'accFirst')); $sentence = '?umivé víno'; echo $twig->render('customfilter.html.twig', ['sentence' => $sentence]); function accFirst($value, $encoding = 'UTF8') { $strlen = mb_strlen($value, $encoding); $firstChar = mb_substr($value, 0, 1, $encoding); $rest = mb_substr($value, 1, $strlen - 1, $encoding); return mb_strtoupper($firstChar, $encoding) . $rest; } ``` 我們添加了一個名為`accFirst`的新過濾器。它僅修改第一個字母，也可以處理重音。 `templates/customfilter.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom filter</title> </head> <body> <p> {{ sentence | accFirst }} </p> </body> </html> ``` 這是模板文件，使用自定義`accFirst`過濾器。 ## Twig 循環要創建循環，我們使用`for`標簽。 `looping.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); $words = ['sky', 'mountain', 'falcon', 'forest', 'rock', 'blue', 'solid', 'book', 'tree']; echo $twig->render('words.html.twig', ['words' => $words]); ``` 我們將循環一個單詞數組。 `templates/words.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Words</title> </head> <body> <ul> {% for word in words %} <li>{{ word }}</li> {% endfor %} </ul> <ul> {% for word in words|slice(2, 4) %} <li>{{ word }}</li> {% endfor %} </ul> </body> </html> ``` 在模板文件中，我們遍歷`words`數組并生成 HTML 列表。使用`slice()`過濾器，我們可以遍歷數組的一部分。 ## Twig 循環和`if else` 我們可以將`for`標簽與`if`標簽和`else`標簽結合在一起。 `looping2.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); $users = [ ['name' => 'John Doe', 'active' => false], ['name' => 'Lucy Smith', 'active' => false], ['name' => 'Peter Holcombe', 'active' => false], ['name' => 'Barry Collins', 'active' => false] ]; echo $twig->render('activeusers.html.twig', ['users' => $users]); ``` 我們向模板文件發送用戶數組。 `templates/activeusers.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>Active users</p> <ul> {% for user in users if user.active %} <li>{{ user.name }}</li> {% else %} <li>No users found</li> {% endfor %} </ul> </body> </html> ``` 我們輸出的用戶名稱`user.active`屬性為`true`。當沒有活動用戶時，將顯示`else`標記的輸出。 ## Twig `set`標簽 `set`標簽允許將值設置為模板內的變量。 ```php $words = ['sky', 'mountain', 'falcon', 'forest', 'rock', 'blue', 'solid', 'book', 'tree']; echo $twig->render('test.html.twig', ['words' => $words]); ``` 我們有一個單詞表。 ```php {% set sorted = words | sort %} <ul> {% for word in sorted %} <li>{{ word }}</li> {% endfor %} </ul> ``` 我們使用`sort`過濾器對數組進行排序，并使用`set`將排序后的數組分配給`sorted`變量。 ## Twig `verbatim`標簽 `verbatim`將部分標記為不應該分析的原始文本。 ```php {% verbatim %} <ul> {% for word in words %} <li>{{ word }}</li> {% endfor %} </ul> {% endverbatim %} ``` 例如，如果我們有一個講解 Twig 標簽的教程，則無需分析一部分演示。 ## Twig 格式過濾器 `format`過濾器通過替換占位符來格式化給定的字符串。它的作用類似于`sprintf()`函數。 ```php $name = "John Doe"; $age = 34; echo $twig->render('formatfil.html.twig', ['name' => $name, 'age' => $age]); ``` 我們向模板發送兩個變量。 ```php {{ "%s is %d years old" | format(name, age) }} ``` 我們使用`format`構建字符串。 ## Twig 日期函數 `date()`函數將參數轉換為日期以允許進行日期比較。 ```php $user = ['name' => 'John Doe', 'created_at' => '2011/11/10']; echo $twig->render('datefun.html.twig', ['user' => $user]); ``` 用戶數組具有`created_at`鍵。 ```php {% if date(user.created_at) < date('-5years') %} <p>{{ user.name }} is a senior user</p> {% endif %} ``` 在模板中，我們比較兩個日期。 ## Twig 自動轉義 Twig 自動轉義某些字符，例如`<`或`>`。 ```php $twig = new Environment($loader, [ 'autoescape' => false ]); ``` 可以使用`autoescape`選項關閉自動轉義。 ```php $data = "<script src='http::/example.com/nastyscript.js'></script>"; echo $twig->render('autoescape.html.twig', ['data' => $data]); ``` 用戶可能會有意向應用添加危險的輸入。通過自動轉義可以防止包含未知的 JS 文件。 ```php <p> The data is {{ data }} </p> <p> The data is {{ data | raw }} </p> ``` 如果啟用了自動轉義，我們可以使用`raw`過濾器顯示原始輸入。 ```php <p> The data is <script src="http:/example.com/nastyscript.js"></script> </p> <p> The data is <script src='http:/example.com/nastyscript.js'></script> </p> ``` 此部分輸出顯示字符如何轉義。 ## Twig 測試 Twig 測試允許測試數據。使用`is`運算符進行測試。 ```php $words = ['', null, 'rock', ' ', 'forest']; echo $twig->render('tests.html.twig', ['words' => $words]); ``` 我們有一個包含空，空和空白元素的單詞數組。 ```php <ul> {% for word in words %} {% if word is null %} <p>null element</p> {% elseif word | trim is empty %} <p>Empty element</p> {% else %} <li>{{ word }}</li> {% endif %} {% endfor %} </ul> ``` 為了處理空，空和空元素，Twig 進行了`empty`和`null`測試。 ## Twig 繼承 Twig 的模板繼承是一項強大的函數，可消除重復并促進維護。 `inheritance.php` ```php <?php require __DIR__ . '/vendor/autoload.php'; use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__ . '/templates'); $twig = new Environment($loader); echo $twig->render('derived.html.twig'); ``` 這是`inheritance.php`文件。它呈現`derived.html.twig`，它從`base.html.twig`擴展。 `templates/base.html.twig` ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}{% endblock %}</title> </head> <body> {% block body %}{% endblock %} </body> </html> ``` 基本布局定義了兩個由子代替換的塊：`title`和`body`。 `templates/derived.html.twig` ```php {% extends 'base.html.twig' %} {% block title %}Some title{% endblock %} {% block body %} The body contents {% endblock %} ``` 派生的子模板使用`extends`關鍵字從基本模板繼承。這兩個塊定義了自定義文本。 ```php $ php inheritance.php <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Some title</title> </head> <body> The body contents </body> </html> ``` This is the output. ## Symfony 的例子 Twig 是 Symfony 框架的組成部分。下一個示例顯示在 Symfony 骨架應用中使用 Twig 的步驟。 ```php $ composer create-project symfony/skeleton simple $ cd simple ``` 我們創建一個新的 Symfony 框架應用，然后移至項目目錄。 ```php $ composer require server --dev ``` 我們包括開發服務器。 ```php $ composer require maker annotations twig ``` 我們包括一些基本的 Symfony 組件，包括 Twig。 ```php $ php bin/console make:controller HomeController ``` 我們創建一個家庭控制器。 `src/Controller/HomeController.php` ```php <?php namespace App\Controller; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Routing\Annotation\Route; class HomeController extends AbstractController { /** * @Route("/home", name="home") */ public function index() { $words = ['sky', 'blue', 'cloud', 'symfony', 'forest']; return $this->render('home/index.html.twig', [ 'words' => $words ]); } } ``` 在家庭控制器中，我們渲染`index.html.twig`模板，并將其傳遞給`$words`數組進行處理。 `templates/base.html.twig` ```php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} </head> <body> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body> </html> ``` 這是基本布局頁面。 `templates/home/index.html.twig` ```php {% extends 'base.html.twig' %} {% block title %}Home page{% endblock %} {% block body %} <h2>List of words</h2> <ul> {% for word in words %} <li>{{ word }}</li> {% endfor %} </ul> {% endblock %} ``` 這是主頁模板。它使用`for`標記遍歷單詞，然后將它們輸出到無序列表中。 ```php $ php bin/console server:run ``` 我們啟動服務器。我們導航到`http://localhost:8000/home`以查看結果。在本教程中，我們使用了 Twig 從模板和數據生成文檔。我們介紹了 Twig 標簽，過濾器，測試和繼承。我們在 Symfony 應用中顯示了 Twing。您可能也對以下相關教程感興趣： [PHP Faker 教程](/php/faker/)，[Respect 驗證教程](/php/respectvalidation/)， [Symfony 入門](/symfony/intro/)， [Rakit 驗證教程](/php/rakitvalidation/) ， [PHP PDO 教程](/php/pdo/)和 [PHP 教程](/lang/php/)。 {% endraw %}