当前位置：极客教程 > PHP > PHP 教程 > PHP Twig 教程

PHP Twig 教程

PHP Twig 教程展示了如何在 PHP 应用中使用 Twig 模板引擎来生成文档。

Twig

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

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

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

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

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

安装 Twig

首先，我们设置了 Twig。

$ composer require twig/twig


$ mkdir templates

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

require __DIR__ . '/vendor/autoload.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);

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

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

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

输出通过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 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

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

echotwig->render('filters.html.twig', 
    ['words' => words, 'sentence' =>sentence]);

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

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>

过滤器应用|字符。 该示例使用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';

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

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

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

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

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

<!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标签允许将值设置为模板内的变量。

$words = ['sky', 'mountain', 'falcon', 'forest',
    'rock', 'blue', 'solid', 'book', 'tree'];

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

我们有一个单词表。

{% set sorted = words | sort %}

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

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

Twig verbatim标签

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

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

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

Twig 格式过滤器

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

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

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

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

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

我们使用format构建字符串。

Twig 日期函数

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

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

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

用户阵列具有created_at键。

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

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

Twig 自动转义

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

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

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

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

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

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

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

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

如果启用了自动转义，我们可以使用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>

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

Twig 测试

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

$words = ['', null, 'rock', '   ', 'forest'];
echo $twig->render('tests.html.twig', ['words' => $words]);

我们有一个包含空，空和空白元素的单词数组。

<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

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

use Twig\Environment;
use Twig\Loader\FilesystemLoader;

loader = new FilesystemLoader(__DIR__ . '/templates');twig = new Environment(loader);

echotwig->render('derived.html.twig');

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

基本布局定义了两个由子代替换的块：title和body。

templates/derived.html.twig

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

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

{% block body %}

The body contents

{% endblock %}

派生的子模板使用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>

Symfony 的例子

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

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

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

$ composer require server --dev

我们包括开发服务器。

$ composer require maker annotations twig

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

$ php bin/console make:controller HomeController

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

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'];

        returnthis->render('home/index.html.twig', [
            'words' => $words
        ]);
    }
}

在家庭控制器中，我们渲染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>

这是基本布局页面。

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

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

$ php bin/console server:run

我们启动服务器。

我们导航到http://localhost:8000/home以查看结果。
您可能也对以下相关教程感兴趣： PHP Faker 教程，Respect 验证教程，Rakit 验证教程 ， PHP PDO 教程和 PHP 教程。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

PHP 教程