Comment utiliser le moteur de template Twig avec le framework Silex ?

PHPz
Libérer: 2023-06-03 09:28:01
original
714 Les gens l'ont consulté

Dans le processus de développement Web, l'utilisation d'un moteur de modèles peut réduire considérablement la charge de travail du développement front-end et également améliorer la maintenabilité des applications Web. Twig est un moteur de modèles PHP populaire, simple, facile à lire et hautement évolutif. Cet article explique comment utiliser le moteur de template Twig dans le framework Silex.

Installer Twig

Tout d'abord, nous devons installer Twig à l'aide de Composer. Entrez dans le répertoire du projet et exécutez la commande suivante :

composer require twig/twig
Copier après la connexion

Une fois l'installation terminée, nous devons enregistrer le fournisseur de services Twig dans Silex :

// index.php
require_once __DIR__.'/vendor/autoload.php';

$app = new SilexApplication();

// 注册Twig服务提供器
$app->register(new SilexProviderTwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));
Copier après la connexion

Dans le code ci-dessus, nous utilisons register enregistre le fournisseur de services Twig dans l'application Silex et spécifie le répertoire dans lequel les fichiers modèles Twig sont stockés. register方法将Twig服务提供器注册到Silex应用程序中,并指定了Twig模板文件存放的目录。

基础使用

Twig中有两个很重要的概念:模板和变量。模板是描述如何渲染数据的文件,而变量则是我们要在模板中使用的数据。

下面我们来创建一个简单的模板文件:

<!-- views/hello.html.twig -->

<!DOCTYPE html>
<html>
<head>
    <title>Hello Twig</title>
</head>
<body>
    <h1>Hello {{ name }}!</h1>
</body>
</html>
Copier après la connexion

我们可以在其中使用Twig提供的{{}}语法来插入变量,如上述代码中的{{ name }},表示将name变量的值渲染到模板中的位置。

接下来,我们在Silex中创建一个路由,该路由将会渲染上述模板文件。具体代码如下:

// index.php
require_once __DIR__.'/vendor/autoload.php';

$app = new SilexApplication();

$app->register(new SilexProviderTwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));

// 定义路由
$app->get('/hello/{name}', function ($name) use ($app) {
    return $app['twig']->render('hello.html.twig', array(
        'name' => $name,
    ));
});

$app->run();
Copier après la connexion

以上代码中,我们使用$app['twig']获取Twig实例,并使用render方法渲染模板文件,同时向模板中传递name变量的值。

访问http://localhost:8000/hello/world 将得到类似以下的输出:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Twig</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>
Copier après la connexion

嵌套模板

Twig还支持将多个模板组合在一起渲染,这可以非常方便地分离模板的结构和内容。例如,我们可以将网站的头部和底部独立出来,分别保存为header.html.twigfooter.html.twig,然后将它们嵌套在其它模板中。

下面我们来创建一个用于展示博客文章的模板文件:

<!-- views/post.html.twig -->

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

{% block content %}
    <h1>{{ title }}</h1>
    <div>{{ content }}</div>
    <p>Author: {{ author }}</p>
{% endblock %}
Copier après la connexion

在该模板中,我们使用了{% extends 'layout.html.twig' %}指令来继承另一个模板,表示该模板中的内容将插入到layout.html.twig中名为content的块中。

接下来我们编写layout.html.twig模板,用于定义博客文章的布局:

<!-- views/layout.html.twig -->

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        &copy; 2021 Me
    </footer>
</body>
</html>
Copier après la connexion

以上代码中,我们定义了一个名为title的块,使用了Twig提供的{% block %}指令。

我们调用重点是在{% block content %}{% endblock %}中,因为在提交POST的时候,这里的内容将会被替换成post.html.twig中的<h1>{{ title }}</h1><div>{{ content }}</div><p>Author: {{ author }}</p>

最后,我们创建一个新的路由,用于渲染post.html.twig模板:

$app->get('/post/{id}', function ($id) use ($app) {
    $post = array(
        'title' => 'Post ' . $id,
        'content' => 'This is the content of post ' . $id,
        'author' => 'Me',
    );

    return $app['twig']->render('post.html.twig', $post);
});
Copier après la connexion

以上代码中,我们创建了一个名为$post的数组,其中包含文章的标题、内容和作者等信息。然后,使用Twig的render方法渲染post.html.twig模板,同时将$post

Utilisation de base

Il y a deux concepts très importants dans Twig : les modèles et les variables. Les modèles sont des fichiers qui décrivent comment restituer les données, et les variables sont les données que nous souhaitons utiliser dans le modèle.

Créons un fichier modèle simple :

<!DOCTYPE html>
<html>
<head>
    <title>Post 1</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <main>
        <h1>Post 1</h1>
        <div>This is the content of post 1</div>
        <p>Author: Me</p>
    </main>
    <footer>
        &copy; 2021 Me
    </footer>
</body>
</html>
Copier après la connexion
Nous pouvons utiliser la syntaxe {{}} fournie par Twig pour insérer des variables, telles que {{ name }} dans le code ci-dessus, signifie restituer la valeur de la variable name à la position dans le modèle. #🎜🎜##🎜🎜#Ensuite, nous créons une route dans Silex qui restituera le fichier modèle ci-dessus. Le code spécifique est le suivant : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons $app['twig'] pour obtenir l'instance Twig, et utilisons le render pour restituer le fichier modèle et transmettre la valeur de la variable name au modèle. #🎜🎜##🎜🎜# Visitez http://localhost:8000/hello/world et vous obtiendrez un résultat similaire à celui-ci : #🎜🎜#rrreee#🎜🎜#Nested template#🎜🎜##🎜🎜#Twig prend également en charge le rendu de plusieurs modèles ensemble, ce qui rend très pratique la séparation de la structure et du contenu du modèle. Par exemple, nous pouvons séparer la tête et le bas du site Web et les enregistrer respectivement sous header.html.twig et footer.html.twig, puis les imbriquer dans d'autres dans le modèle. #🎜🎜##🎜🎜#Créons un fichier modèle pour afficher les articles de blog : #🎜🎜#rrreee#🎜🎜#Dans ce modèle, nous utilisons {% extends 'layout.html' %}code> pour hériter d'un autre modèle, indiquant que le contenu de ce modèle sera inséré dans le bloc nommé <code>content dans layout.html.twig . #🎜🎜##🎜🎜#Ensuite, nous écrivons le modèle layout.html.twig pour définir la mise en page de l'article de blog : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous définissons Un bloc nommé title utilise la directive {% block %} fournie par Twig. #🎜🎜##🎜🎜#L'objectif de notre appel est dans {% block content %}{% endblock %}, car lors de la soumission du POST, le contenu ici sera remplacé par <h1>{{ title }}</h1><div>{{ content }}</div><p>Auteur : { { author }}</p>. #🎜🎜##🎜🎜#Enfin, nous créons une nouvelle route pour rendre le modèle post.html.twig : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous avons créé un tableau nommé $post, qui contient des informations telles que le titre, le contenu et l'auteur de l'article. Ensuite, utilisez la méthode render de Twig pour restituer le modèle post.html.twig tout en transmettant le tableau $post au modèle. #🎜🎜##🎜🎜#Finalement, nous verrons un résultat similaire à celui-ci : #🎜🎜#rrreee#🎜🎜#Summary#🎜🎜##🎜🎜#Grâce à l'introduction de cet article, nous comprenons comment utiliser le Framework Silex Utilisez le moteur de template Twig. L'utilisation de Twig peut rendre notre travail de développement Web plus efficace et plus pratique, tout en améliorant la maintenabilité du code. Si vous souhaitez en savoir plus sur Twig, vous pouvez consulter la documentation officielle https://twig.symfony.com/doc. #🎜🎜#

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal