本文最后更新于 2024-08-08,文章内容可能已经过时。

Twig

Twig 是一个 PHP 模板引擎。 它是由 Symfony 开发人员创建的。 Twig 文件的扩展名为.html.twig; 它们是静态数据(例如 HTML 和 Twig 构造)的混合。

Twig 使用双大括号分隔符{{ }}进行输出,并使用大括号百分比定界符{% %}进行逻辑运算。 {# #}用于发表评论。

<ul>
    {% for word in words %}
        <li>{{ word }}</li>
    {% endfor %}
</ul>

PHP

此代码是示例 Twig 语法。 在此代码中,我们使用for标签创建一个循环。

Twig 语法由标签,过滤器,函数,运算符和测试组成。

安装 Twig

首先,我们设置了 Twig。

$ composer require twig/twig

PHP

$ mkdir templates

PHP

我们将模板文件放入template目录。

require __DIR__ . '/vendor/autoload.php';

PHP

我们需要将autoload.php文件添加到脚本中。

模板引擎

模板引擎或模板处理器是一个旨在将模板与数据模型结合以生成文档的库。 模板引擎通常用于在源代码预处理或生成动态 HTML 页面中生成大量电子邮件。

我们创建一个模板引擎,在其中定义静态零件和动态零件。 动态部分随后将替换为数据。 渲染函数随后将模板与数据结合在一起。

Twig 第一个例子

以下是 Twig 模板系统的简单演示。

first.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']);

PHP

我们使用FilesystemLoader从指定目录加载模板。

echo $twig->render('first.html.twig', ['name' => 'John Doe',
    'occupation' => 'gardener']);

PHP

输出通过render()生成。 它带有两个参数:模板文件和数据。

templates/first.html.twig

<!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>

PHP

Twig 过滤器

过滤器使我们能够以各种方式修改数据。

filters.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]);

PHP

在示例中,我们有一个数组和一个字符串作为模板数据。

templates/filters.html.twig

<!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>

PHP

过滤器应用|字符。 该示例使用length对单词进行计数,使用join连接数组元素,并使用title修改字符。

Twig 自定义过滤器

我们可以使用Twig_Filter创建自定义过滤器。

customfilter.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;
}

PHP

我们添加了一个名为accFirst的新过滤器,它仅修改第一个字母,也可以处理重音。

templates/customfilter.html.twig

<!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>

PHP

这是模板文件,使用自定义accFirst过滤器。

Twig 循环

要创建循环,我们使用for标签。

looping.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]);

PHP

我们将循环一个单词数组。

templates/words.html.twig

<!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>

PHP

在模板文件中,我们遍历words数组并生成 HTML 列表。 使用slice()过滤器,我们可以遍历数组的一部分。

Twig 循环和if else

我们可以将for标签与if标签和else标签结合在一起。

looping2.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]);

PHP

我们向模板文件发送用户数组。

templates/activeusers.html.twig

<!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>

PHP

我们输出的用户名称user.active属性为 true,当没有活动用户时,将显示else标记的输出。

Twig set标签

set标签允许将值设置为模板内的变量。

$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>

PHP

我们使用sort过滤器对数组进行排序,并使用set将排序后的数组分配给sorted变量。

Twig verbatim标签

verbatim将部分标记为不应该分析的原始文本。

{% verbatim %}
    <ul>
    {% for word in words %}
        <li>{{ word }}</li>
    {% endfor %}
    </ul>
{% endverbatim %}

PHP

例如,如果我们有一个讲解 Twig 标签的教程,则无需分析一部分演示。

Twig 格式过滤器

format过滤器通过替换占位符来格式化给定的字符串。 它的作用类似于sprintf()函数。

$name = "John Doe";
$age = 34;

echo $twig->render('formatfil.html.twig', ['name' => $name, 'age' => $age]);

PHP

我们向模板发送两个变量。

{{ "%s is %d years old" | format(name, age) }}

PHP

我们使用format构建字符串。

Twig 日期函数

date()函数将参数转换为日期以允许进行日期比较。

$user = ['name' => 'John Doe', 'created_at' => '2011/11/10'];

echo $twig->render('datefun.html.twig', ['user' => $user]);

PHP

用户阵列具有created_at键。

{% if date(user.created_at) < date('-5years') %}
    <p>{{ user.name }} is a senior user</p>
{% endif %}

PHP

在模板中,我们比较两个日期。

Twig 自动转义

Twig 自动转义某些字符,例如<或>。

$twig = new Environment($loader, [
    'autoescape' => false
]);

PHP

可以使用autoescape选项关闭自动转义。

$data = "<script src='http::/example.com/nastyscript.js'></script>";

echo $twig->render('autoescape.html.twig', ['data' => $data]);

PHP

用户可能会有意向应用添加危险的输入。 通过自动转义可以防止包含未知的 JS 文件。

<p>
The data is {{ data }}
</p>

<p>
The data is {{ data | raw }}
</p>

PHP

如果启用了自动转义,我们可以使用raw过滤器显示原始输入。

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

PHP

此部分输出显示字符如何转义。

Twig 测试

Twig 测试允许测试数据。 使用is运算符进行测试。

$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>

PHP

为了处理空,空和空元素,Twig 进行了emptynull测试。

Twig 继承

Twig 的模板继承是一项强大的函数,可消除重复并促进维护。

inheritance.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');

PHP

这是inheritance.php文件。 它呈现derived.html.twig,它从base.html.twig扩展。

templates/base.html.twig

<!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>

PHP

基本布局定义了两个由子代替换的块:titlebody

templates/derived.html.twig

{% extends 'base.html.twig' %}

{% block title %}Some title{% endblock %}

{% block body %}

The body contents

{% endblock %}

PHP

派生的子模板使用extends关键字从基本模板继承。 这两个块定义了自定义文本。

$ 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>

PHP

Symfony 的例子

Twig 是 Symfony 框架的组成部分。 下一个示例显示在 Symfony 骨架应用中使用 Twig 的步骤。

$ composer create-project symfony/skeleton simple
$ cd simple

PHP

我们创建一个新的 Symfony 框架应用,然后移至项目目录。

$ composer require server --dev

PHP

我们包括开发服务器。

$ composer require maker annotations twig

PHP

我们包括一些基本的 Symfony 组件,包括 Twig。

$ php bin/console make:controller HomeController

PHP

我们创建一个家庭控制器。

src/Controller/HomeController.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
        ]);
    }
}

PHP

在家庭控制器中,我们渲染index.html.twig模板,并将其传递给$words数组进行处理。

templates/base.html.twig

<!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>

PHP

这是基本布局页面。

templates/home/index.html.twig

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

PHP

这是主页模板。 它使用for标记遍历单词,然后将它们输出到无序列表中。

$ php bin/console server:run

PHP

我们启动服务器。

我们导航到http://localhost:8000/home以查看结果。