php twig模板引擎详细使用教程

php twig模板引擎

1. 什么是Twig模板引擎

Twig是一个强大且灵活的PHP模板引擎，它提供了一种更简洁和可扩展的方法来创建PHP应用程序的视图层。Twig模板引擎旨在将设计与业务逻辑分离，并为开发人员提供一种更加清晰和易于维护的方式来构建网页。Twig由Symfony框架的开发团队开发，因此它与Symfony的组件非常兼容，并且被广泛用于Symfony应用程序中。

2. Twig的安装和配置

注意：PHP版本至少在 7.0.0以上

要使用Twig模板引擎，在你的PHP项目中需要先进行安装。可以使用Composer进行安装，执行以下命令：

composer require twig/twig

安装完成后，在你的PHP文件中引入Twig的自动加载文件：

require_once 'vendor/autoload.php';

2.1 phpstudy安装composer

注意：PHP版本至少在 7.0.0以上

笔者使用的是phpstudy安装twig，要先安装composer，phpstudy自带composer安装，可以自选一个版本安装
在这里插入图片描述

2.2 安装twig

在phpstudy中创建一个项目，就叫twig，然后右键项目，点击composer进入cmd界面

2.2.1 配置国内镜像

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

2.2.2 更新composer

composer self-update

2.2.3 安装twig

输入安装twig命令
在这里插入图片描述

composer require twig/twig

看到项目中出现vendor，说明已经安装完成

在这里插入图片描述

3.hello world

在根目录twig下新建view文件夹，在view下新建cache和templates两个文件夹，在templates文件夹下新建一个hello.html文件，在根目录下新建入口文件index.php，文件内容如下：

hello.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello</title>
</head>
<body>
<h2>hello world! {{name}}</h2>
</body>
</html>

index.php

./view/templates ：为hello.html文件所在目录
./view/cache ：为cache文件夹所在目录

<?php
require_once 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('./view/templates');
$twig = new \Twig\Environment($loader, ['cache' => './view/cache','debug' => true,
]);echo $twig->render('hello.html',['name'=>'twig模板字符串']);

浏览器访问index.php，{{name}}能正常解析，说明成功运行！

4 变量

4.1 全局变量

以下变量总是在模板中可用:

_self:引用当前的模板名称;
_context:引用当前上下文;
_charset:引用当前的字符集。

<h2>hello world! {{name}}</h2>
<h2>全局变量：{{_self}}</h2>
<h2>全局变量：{{_context}}</h2>
<h2>全局变量：{{_charset}}</h2>

结果：

hello world! twig模板字符串
全局变量：hello.html
全局变量：Array
全局变量：UTF-8

4.2 修改变量

您可以为代码块中的变量赋值。使用set标签:

{% set foo = 'foo' %}
{% set foo = [1, 2] %}
{% set foo = {'foo': 'bar'} %}

例如：

<h2>hello world! {{name}}</h2>
<p>{% set name = '修改后的name' %}</p>
<p>{{name}}</p>

浏览器输出：

hello world! twig模板字符串修改后的name

4.3 数组和对象变量

在根目录新建一个condition.php，内容如下：

<?php
require_once 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('./view/templates');
$twig = new \Twig\Environment($loader, ['cache' => './view/cache','debug' => true,
]);$user = ['id' => 1,'name' => 'tom','age'=>18,'intro' => 'my name is tom','now' => date_format(new DateTime(),"Y/m/d H:i:s"),
];class tom {public  $is_login = true;public $sex = '男';public $name = 'tom';
}echo $twig->render('condition.twig',['user'=>$user,'tom'=>new tom()]);

在twig/view/templates下新建一个condition.twig模板文件，内容如下：

<p>{{ user['id'] }}</p>
<p>{{ user['name'] }}</p>
<p>{{ user['age'] }}</p>
<p>{{ user.intro }}</p>
<p>{{ user['now'] }}</p><h1>{{ tom.sex }}</h1>

访问condition.php,浏览器输出：

1tom18my name is tom2025/01/25 18:31:15
男

5 控制结构

Twig支持各种控制结构，如条件语句和循环语句。以下是一些示例：

5.1 条件语句

使用Twig的条件语句可以根据不同的条件选择性地渲染模板的一部分。
还是以condition.twig为例

<p>{{ user['id'] }}</p>
<p>{{ user['name'] }}</p>
<p>{{ user['age'] }}</p>
<p>{{ user.intro }}</p>
<p>{{ user['now'] }}</p><h1>{{ tom.sex }}</h1>{% if tom.is_login %}<p>Welcome, {{ tom.name }}!</p>
{% else %}<p>Please log in.</p>
{% endif %}

访问condition.php,浏览器输出：

1tom18my name is tom2025/01/25 18:39:40
男Welcome, tom!

Twig还支持使用elseif关键字来添加多个条件。

5.2 循环

<ul>{% for item in user %}<li>{{ item }} </li>{% endfor %}
</ul>

输出：

在这里插入图片描述

6 过滤器

变量可以通过过滤器来修改。通过管道符号(|)将过滤器与变量分隔开，在括号中可以有可选的参数。多个过滤器可以被链式。一个过滤器的输出应用于下一个过滤器。

本例新建./view/templates/filter.twig 和 ./filter.php

filter.php

<?phprequire_once 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('./view/templates');
$twig = new \Twig\Environment($loader, ['cache' => './view/cache','debug' => true,
]);$user = ['id' => 1,'name' => 'tom','age'=>18,'intro' => 'my name is tom','now' => date_format(new DateTime(),"Y/m/d H:i:s"),
];$filter = new \Twig\TwigFilter('ff', function ($number) {return $number . "我是过滤器";
});$twig->addFilter($filter);echo $twig->render('filter.twig',['user'=>$user]);

filter.twig

<p>{{ user.name }}</p>
<p>{{ user.name | ff }}</p>

其中的$number为传入的变量，即user.name

7 函数

函数的定义与过滤器完全相同，但您需要创建Twig_Function的一个实例:

可以调用函数来生成内容。函数由名称调用，后面是括号(())，可能有参数。
在filter.php中添加如下代码：

$function = new \Twig\TwigFunction('func', function ($number) {return $number."我是函数";
});
$twig->addFunction($function);

filter.twig

<p>{{ user.name }}</p>
<p>{{ user.name | ff }}</p>
<p>{{ func(user.name)}}</p>

输出结果：

tomtom我是过滤器tom我是函数

8 注解(Comments)

要在模板中引用一行，请使用注释语法{ #…# }。这对于调试或为其他模板设计人员或您自己添加信息非常有用:

{# note: disabled template because we no longer use this{% for user in users %}...{% endfor %}
#}

9 包括其他模板(Including other Templates)

include函数用于包含模板，并将该模板的呈现内容返回当前的模板

新建一个./view/templates/index.html，内容如下：

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

输出：

hello world! twig模板字符串修改后的name

10 模板继承

Twig最强大的部分是模板继承。模板继承允许您构建包含站点所有常见元素的基本“骨架”模板，并定义子模板可以覆盖的块。

听起来很复杂，但是很基础。从一个例子开始就更容易理解。

我们来定义一个基模板，./view/templates/base.twig，它定义了一个简单的html框架文档:

<h1>{% block header%} 默认大标题 {% endblock %}</h1>
<h2 id="content" style="color:red;">{% block content %}默认正文{% endblock %}</h2>
<div id="footer"><p> {% block footer %}Copyright 2025 by  小彭爱学习{% endblock %}</p>
</div>

在本例中，block标记定义子模板可以填充的3个块。所有的块标记都是告诉模板引擎，子模板可以覆盖模板的那些部分。

block后面的header.content,footer为自定义的块名，后面引用时根据块名来覆盖。

新建./extend.php

<?php
require_once 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('./view/templates');
$twig = new \Twig\Environment($loader, ['cache' => './view/cache','debug' => true,
]);echo $twig->render('base.twig');

访问extend.php，浏览器输出如下：

默认大标题
默认正文Copyright 2025 by 小彭爱学习

新建一个./view/templates/extend.twig，继承base.twig:

{% extends "base.twig" %}
{% block header %}修改后大标题{% endblock %}
{% block content %}修改后正文{% endblock %}

修改extend.php

<?php
require_once 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('./view/templates');
$twig = new \Twig\Environment($loader, ['cache' => './view/cache','debug' => true,
]);echo $twig->render('extend.twig');

再次访问extend.php，浏览器输出如下：

修改后大标题
修改后正文Copyright 2025 by 小彭爱学习

我们可以发现对应的块名内的内容被继承后的模板修改了

11 HTML转义(HTML Escaping)

当从模板生成HTML时，总是有一个风险，变量将包括影响生成HTML的字符。有两种方法:手动转义每个变量，或者默认情况下自动转义。

Twig支持这两种，自动转义是默认启用的。

自动转义策略可以通过autoescape选项和默认的html来配置。

11.1 使用手动转义

如果手动转移已启用，如果需要转义变量这是您的责任。转义什么？任何你不信任的变量。

通过escape或e过滤器将变量通过管道进行转义:

{{ user.username|e }}

默认情况下，escape过滤器使用html策略，但是根据转义上下文，您可能想要显式地使用其他可用策略:

{{ user.username|e('js') }}
{{ user.username|e('css') }}
{{ user.username|e('url') }}
{{ user.username|e('html_attr') }}

11.2 使用自动转义

无论是否启用了自动转义，您都可以通过使用自动转义标记来标记一个模板的一个片段:

{% autoescape %}Everything will be automatically escaped in this block (using the HTML strategy)
{% endautoescape %}

默认情况下，自动转义使用html转义策略。如果在其他上下文中输出变量，则需要使用适当的转义策略显式地转义它们:

{% autoescape 'js' %}Everything will be automatically escaped in this block (using the JS strategy)
{% endautoescape %}

11.3 转义(Escaping)

有时需要或甚至有必要让Twig忽略它可能作为变量或块来处理的部分。例如，如果使用默认的语法，并且希望在模板中使用{ {作为原始字符串，而不是启动变量，则必须使用技巧。

最简单的方法是使用一个变量表达式输出变量分隔符({ {):

{{ '{{' }}

12 宏(Macros)

宏可以与常规编程语言中的函数相比较。它们是有用的，可以重用经常使用的HTML片段不重复自己。

{% macro 宏名(参数1，参数2，....) %}内容
{% endmacro %}

宏可以在任何模板中定义，在使用之前需要通过import标签“导入”:

{% import 模板名 as 别名 %}{{ 别名.宏名 }}

一个用户注册表单例子如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>div#id{width: 100%;}span{width:800px;height:30px;display: block;text-align: center;margin: auto 2px;}input{width:800px;}div.bottom{margin-top:10px;}</style>
</head>
<body><div><div id="register">{% macro inputSpan(spanname,name, value, type,placeholder) %}<span class="con">{{spanname}}：</span><input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" placeholder="{{ placeholder }}" />{% endmacro %}{% import "macro.twig" as macro1 %}{{ macro1.inputSpan('用户帐号','uName', '',"text","设置用户名") }}{{ macro1.inputSpan('设置密码','uPwd', '',"password","设置密码") }}{{ macro1.inputSpan('密码确认','uPwdCom', '',"password","设置确认密码") }}{{ macro1.inputSpan('手机号','phone', '',"text","设置手机号码") }}{{ macro1.inputSpan('电子邮箱','email', '',"email","设置电子邮箱") }}</div><div class="bottom"><input type="submit" name="submit" value="注册并提交"/></div></div></body>
</html>

相当于：

<div><div id="register"><span class="con">用户帐号：</span><input type="text" name="uName" value="" placeholder="设置用户名" /><span class="con">设置密码：</span><input type="password" name="uPwd" value="" placeholder="设置密码" /><span class="con">密码确认：</span><input type="password" name="uPwdCom" value="" placeholder="设置确认密码" /><span class="con">手机号：</span><input type="text" name="phone" value="" placeholder="设置手机号码" /><span class="con">电子邮箱：</span><input type="email" name="email" value="" placeholder="设置电子邮箱" /></div><div class="bottom"><input type="submit" name="submit" value="注册并提交"/></div></div>

确实可以简化很多重复的代码！

或者，您可以从模板从模板导入单个宏名称，通过from标签到当前名称空间，并可选地将它们别名为:

{% from 'forms.html' import input as input_field %}
<dl><dt>Username</dt><dd>{{ input_field('username') }}</dd><dt>Password</dt><dd>{{ input_field('password', '', 'password') }}</dd>
</dl>

如果在宏调用中没有提供，还可以为宏参数定义一个默认值:

{% macro input(name, value = "", type = "text", size = 20) %}<input type="{{ type }}" name="{{ name }}" value="{{ value|e }}" size="{{ size }}" />
{% endmacro %}

如果将额外的位置参数传递给宏调用，它们将以特殊的varargs变量作为值列表结束。