Twig - Le moteur de modèle PHP autonome le plus populaire

Twig: un moteur de modèle PHP populaire

Twig est un moteur de modèle PHP populaire développé par Sensio Labs. Twig agit à la fois sur le frontend et le backend du projet, et peut être vu de deux perspectives: des brindilles pour les concepteurs de modèles et des brindilles pour les développeurs. Twig utilise un objet central nommé Environment pour stocker des configurations, des extensions et des modèles de chargement à partir d'un système de fichiers ou ailleurs. Twig prend en charge les modèles imbriqués (blocs), en évitant la duplication des éléments dans les modèles, et peut mettre en cache des modèles compilés pour accélérer les demandes ultérieures. Twig prend en charge les instructions, boucles et filtres conditionnels pour contrôler l'affichage des informations dans les modèles et fournit des capacités de débogage pour vider toutes les informations sur les variables de modèle.

Cet article a été évalué par des pairs par Wern Ancheta. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

---

Twig est le moteur de modèle de PHP. Mais PHP est-il lui-même un moteur de modèle? Oui, pas! Bien que PHP ait été à l'origine utilisé comme moteur de modèle, il ne s'est pas développé, et bien que nous puissions toujours l'utiliser comme moteur de modèle, quelle version de "Hello World" préférez-vous:

<?php echo "<p> Hello " . $name . "</p>"; ?>

ou

<p>Hello {{ name }}</p>

PHP est un langage verbeux qui est amplifié lorsque vous essayez de sortir du contenu HTML. Les systèmes de modèles modernes élimineront la verbance partielle et y ajouteront pas mal de fonctionnalités. Des fonctionnalités telles que les capacités de sécurité et de débogage sont l'épine dorsale des moteurs de modèles modernes. Aujourd'hui, nous nous concentrerons sur les brindilles.

Twig est un moteur de modèle créé par Sensio Labs (la société de développement de Blackfire et Symfony). Jetons un coup d'œil à ses principaux avantages et comment l'utiliser dans votre projet.

Installation

Il existe deux façons d'installer des brindilles. Nous pouvons utiliser les packages de goudron disponibles sur leur site Web ou utiliser le compositeur comme nous l'avons fait.

composer require twig/twig

Nous supposons que vous exécutez un environnement où PHP est configuré et le compositeur est installé à l'échelle mondiale. La meilleure façon est d'utiliser l'amélioration de Homestead - il vous permet de commencer à l'utiliser en 5 minutes sur exactement la même machine que nous utilisons afin que nous puissions être sur la même longueur d'onde. Si vous voulez en savoir plus sur l'environnement PHP, nous avons un excellent livre rémunéré à ce sujet ici pour l'achat.

Nous devons clarifier quelque chose avant de pouvoir continuer. En tant que moteur de modèle, Twig agit à la fois sur le frontend et le backend du projet. Nous pouvons donc regarder des brindilles sous deux perspectives différentes: des brindilles pour les concepteurs de modèles et des brindilles pour les développeurs. D'une part, nous préparons toutes les données dont nous avons besoin;

Utilisation de base

Pour illustrer l'utilisation de base de Twig, créons un projet simple. Tout d'abord, nous devons amorcer des brindilles. Créons un fichier bootstrap.php avec le contenu suivant:

<?php echo "<p> Hello " . $name . "</p>"; ?>

Twig utilise un objet central nommé Environment. Les instances de ce type sont utilisées pour stocker des configurations, des extensions et des modèles de chargement à partir de systèmes de fichiers ou d'autres emplacements. Après nos bottes d'instance de brina, nous pouvons aller de l'avant et créer un fichier index.php où il charge certaines données et les transmet au modèle de brindilles.

<p>Hello {{ name }}</p>

Il s'agit d'un exemple simple; nous créons un tableau contenant des produits, tels que notre clavier mécanique, que nous pouvons utiliser dans les modèles. Ensuite, nous utilisons la méthode render(), qui accepte le nom du modèle (il s'agit d'un fichier dans le dossier de modèle que nous avons défini précédemment) et les données que nous voulons transmettre au modèle. Pour terminer notre exemple, allons dans notre dossier /templates et créons un fichier index.html. Tout d'abord, regardons le modèle lui-même.

composer require twig/twig

ouvrir index.php dans votre navigateur (visitez localhost ou homestead.app, selon la façon dont vous configurez l'hôte et le serveur) devrait maintenant afficher l'écran suivant:

Mais revenons et examinons de plus près notre code de modèle. Il existe deux types de séparateurs: {{ ... }} est utilisé pour imprimer les résultats d'une expression ou d'une opération, tandis que {% ... %} est utilisé pour exécuter des instructions telles que les instructions conditionnelles et les boucles. Ces délimiteurs sont la principale structure linguistique de Twig, que Twig utilise pour "informer" le modèle qu'il doit rendre l'élément brindille.

(Le contenu suivant est similaire au texte d'origine, mais certains ajustements de déclaration et des divisions de paragraphe ont été effectués, et la position de l'image reste inchangée)

Layout

Pour éviter la duplication des éléments (tels que les en-têtes et les pieds de pied) dans les modèles, les brindilles nous permettent de nicher de modèles dans des modèles, qui sont appelés blocs. Pour illustrer cela, séparons le contenu réel de la définition HTML dans l'exemple. Créons un nouveau fichier HTML et nommez-le layout.html:

<?php
// 加载我们的自动加载器
require_once __DIR__.'/vendor/autoload.php';

// 指定我们的Twig模板位置
$loader = new Twig_Loader_Filesystem(__DIR__.'/templates');

// 实例化我们的Twig
$twig = new Twig_Environment($loader);

Nous avons créé un bloc appelé content. Nous entendons que chaque modèle s'étendant de layout.html peut implémenter un bloc content, qui sera affiché à cet endroit. De cette façon, nous pouvons réutiliser la disposition plusieurs fois sans la réécrire. Dans ce cas, le fichier index.html ressemble maintenant à ceci:

<?php
require_once __DIR__.'/bootstrap.php';

// 创建产品列表
$products = [
    [
        'name'          => 'Notebook',
        'description'   => 'Core i7',
        'value'         =>  800.00,
        'date_register' => '2017-06-22',
    ],
    [
        'name'          => 'Mouse',
        'description'   => 'Razer',
        'value'         =>  125.00,
        'date_register' => '2017-10-25',
    ],
    [
        'name'          => 'Keyboard',
        'description'   => 'Mechanical Keyboard',
        'value'         =>  250.00,
        'date_register' => '2017-06-23',
    ],
];

// 渲染我们的视图
echo $twig->render('index.html', ['products' => $products] );

Twig nous permet également de ne rendre que des blocs uniques. Pour ce faire, nous devons d'abord charger le modèle, puis rendre le bloc.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Twig Example</title>
    </head>
    <body>
    <table> border="1" style="width: 80%;">
        <thead>
            <tr>
                <td>Product</td>
                <td>Description</td>
                <td>Value</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </body>
</html>

À ce stade, nous avons toujours la même page, mais nous réduisons sa complexité en découplant les blocs de contexte.

cache

Environment Les objets peuvent non seulement être utilisés pour charger des modèles. Si nous passons en utilisant l'option cache du répertoire associé, Twig mettra en cache le modèle compilé, évitant ainsi d'analyser le modèle dans les demandes suivantes. Le modèle compilé sera stocké dans le répertoire que nous fournissons. Notez qu'il s'agit du cache des modèles compilés, pas du cache pour les modèles évalués. Cela signifie que Twig analyse, compile et enregistrera le fichier de modèle. Toutes les demandes suivantes nécessitent toujours des modèles d'évaluation, mais la première étape est déjà effectuée pour vous. Cachetons le modèle dans l'exemple en modifiant le fichier bootstrap.php:

<?php echo "<p> Hello " . $name . "</p>"; ?>

(Le contenu suivant est similaire au texte d'origine, mais certains ajustements de déclaration et des divisions de paragraphe ont été effectués, et la position de l'image reste inchangée)

cycle

Dans notre exemple, nous avons vu comment boucler avec des brindilles. Fondamentalement, nous utilisons la balise for et attribuons un alias à chaque élément du tableau spécifié. Dans ce cas, nous attribuons un alias au tableau products. Après cela, nous pouvons utiliser l'opérateur product pour accéder à toutes les propriétés de chaque élément de tableau. Nous utilisons la balise . pour indiquer l'extrémité de la boucle. Nous pouvons également parcourir les chiffres ou les lettres à l'aide de l'opérateur endfor. Comme indiqué ci-dessous: ..

<p>Hello {{ name }}</p>

ou lettre:

composer require twig/twig

Cet opérateur n'est que le sucre de syntaxe de la fonction

, et il fonctionne de la même manière que la fonction PHP range native. Une option tout aussi utile consiste à ajouter des conditions à la boucle. En utilisant des conditions, nous pouvons filtrer les éléments pour itérer. Supposons que nous voulons itérer tous les produits avec une valeur inférieure à 250: range

<?php
// 加载我们的自动加载器
require_once __DIR__.'/vendor/autoload.php';

// 指定我们的Twig模板位置
$loader = new Twig_Loader_Filesystem(__DIR__.'/templates');

// 实例化我们的Twig
$twig = new Twig_Environment($loader);

Énoncé conditionnel

Twig fournit également des instructions conditionnelles sous la forme de balises

, if, elseif et if not. Tout comme dans n'importe quel langage de programmation, nous pouvons utiliser ces balises pour filtrer les conditions dans les modèles. Supposons que dans notre exemple, nous voulons afficher uniquement des produits avec une valeur supérieure à 500: else

<?php
require_once __DIR__.'/bootstrap.php';

// 创建产品列表
$products = [
    [
        'name'          => 'Notebook',
        'description'   => 'Core i7',
        'value'         =>  800.00,
        'date_register' => '2017-06-22',
    ],
    [
        'name'          => 'Mouse',
        'description'   => 'Razer',
        'value'         =>  125.00,
        'date_register' => '2017-10-25',
    ],
    [
        'name'          => 'Keyboard',
        'description'   => 'Mechanical Keyboard',
        'value'         =>  250.00,
        'date_register' => '2017-06-23',
    ],
];

// 渲染我们的视图
echo $twig->render('index.html', ['products' => $products] );

Filtre

Les filtres nous permettent de filtrer les informations transmises au modèle et au format des informations affichées. Jetons un coup d'œil à certains des filtres les plus couramment utilisés et importants. Une liste complète des filtres à brinations peut être trouvée ici.

Date et

date_modify

Filtre Formats à la date du format donné. Comme nous le voyons dans l'exemple: date

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Twig Example</title>
    </head>
    <body>
    <table> border="1" style="width: 80%;">
        <thead>
            <tr>
                <td>Product</td>
                <td>Description</td>
                <td>Value</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </body>
</html>

Nous affichons les dates au format mois / jour / an. En plus du filtre

, nous pouvons également utiliser le filtre date pour modifier la date à l'aide du filtre date_modify. Par exemple, si nous voulons ajouter une journée à une date, nous pouvons utiliser ce qui suit:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Tutorial Example</title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

format

Format la chaîne donnée en remplaçant tous les espaces réservés. Par exemple:

{% extends "layout.html" %}

{% block content %}
    <table> border="1" style="width: 80%;">
        <thead>
            <tr>
                <td>Product</td>
                <td>Description</td>
                <td>Value</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

striptags

striptags Le filtre supprime les balises SGML / XML et remplace les espaces adjacents avec des espaces:

<?php echo "<p> Hello " . $name . "</p>"; ?>

escape

escape est l'un des filtres les plus importants. Il filtre la chaîne à insérer en toute sécurité dans la sortie finale. Par défaut, il utilise la stratégie d'échappement HTML, donc

<p>Hello {{ name }}</p>

équivalent à

composer require twig/twig

js, css, url, html_attr et

Les politiques d'échappement sont également disponibles. Ce sont respectivement JavaScript, CSS, URI et HTML, les chaînes d'échappement du contexte d'attribut.

DEBUG

dump() Enfin, jetons un coup d'œil au débogage. Parfois, nous devons accéder à toutes les informations de la variable de modèle. Pour ce faire, Twig a une fonction Twig_Extension_Debug. Cette fonction n'est pas disponible par défaut. Lors de la création d'un environnement de brindilles, nous devons ajouter l'extension

:

<?php
// 加载我们的自动加载器
require_once __DIR__.'/vendor/autoload.php';

// 指定我们的Twig模板位置
$loader = new Twig_Loader_Filesystem(__DIR__.'/templates');

// 实例化我们的Twig
$twig = new Twig_Environment($loader);

dump() Cette étape est nécessaire afin que nous ne divulguons pas accidentellement des informations de débogage sur le serveur de production. Une fois la configuration terminée, nous utilisons simplement la fonction

pour vider toutes les informations sur les variables de modèle.

<?php
require_once __DIR__.'/bootstrap.php';

// 创建产品列表
$products = [
    [
        'name'          => 'Notebook',
        'description'   => 'Core i7',
        'value'         =>  800.00,
        'date_register' => '2017-06-22',
    ],
    [
        'name'          => 'Mouse',
        'description'   => 'Razer',
        'value'         =>  125.00,
        'date_register' => '2017-10-25',
    ],
    [
        'name'          => 'Keyboard',
        'description'   => 'Mechanical Keyboard',
        'value'         =>  250.00,
        'date_register' => '2017-06-23',
    ],
];

// 渲染我们的视图
echo $twig->render('index.html', ['products' => $products] );

Conclusion

J'espère que cet article vous fournira une base solide pour les bases de brindilles et commencera immédiatement votre projet! Si vous voulez avoir un aperçu plus approfondi de Twig, le site officiel fournit une très bonne documentation et des références que vous pouvez consulter. Utilisez-vous le moteur de modèle? Que pensez-vous de Twig? Souhaitez-vous le comparer à des alternatives populaires comme Blade ou Smarty?

(Le contenu suivant est la FAQ, le texte d'origine a été inclus, omis ici)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!