How to use template engine Twig with Silex framework?

PHPz
Release: 2023-06-03 09:28:01
Original
718 people have browsed it

In the process of Web development, using a template engine can greatly reduce the workload of front-end development and also enhance the maintainability of Web applications. Twig is a popular PHP template engine that is simple, easy to read, and highly scalable. This article will introduce how to use the Twig template engine in the Silex framework.

Installing Twig

First, we need to install Twig using Composer. Enter the project directory and execute the following command:

composer require twig/twig
Copy after login

After the installation is complete, we need to register the Twig service provider in Silex:

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

$app = new SilexApplication();

// 注册Twig服务提供器
$app->register(new SilexProviderTwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));
Copy after login

In the above code, we use registerMethod to register the Twig service provider into the Silex application and specify the directory where the Twig template files are stored.

Basic usage

There are two very important concepts in Twig: templates and variables. Templates are files that describe how to render data, and variables are the data we want to use in the template.

Let’s create a simple template file:

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

<!DOCTYPE html>
<html>
<head>
    <title>Hello Twig</title>
</head>
<body>
    <h1>Hello {{ name }}!</h1>
</body>
</html>
Copy after login

We can use the {{}} syntax provided by Twig to insert variables, as in the above code The {{ name }} means rendering the value of the name variable to the position in the template.

Next, we create a route in Silex that will render the above template file. The specific code is as follows:

// 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();
Copy after login

In the above code, we use $app['twig'] to obtain the Twig instance, and use the render method to render the template file, and at the same time Pass the value of the name variable in the template.

Visit http://localhost:8000/hello/world and you will get output similar to the following:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Twig</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>
Copy after login

Nested templates

Twig also supports combining multiple templates in Rendered together, this makes it very convenient to separate the structure and content of the template. For example, we can separate the head and bottom of the website and save them as header.html.twig and footer.html.twig respectively, and then nest them in other templates .

Let's create a template file for displaying blog posts:

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

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

{% block content %}
    <h1>{{ title }}</h1>
    <div>{{ content }}</div>
    <p>Author: {{ author }}</p>
{% endblock %}
Copy after login

In this template, we use {% extends 'layout.html.twig' %} The directive to inherit another template means that the content in the template will be inserted into the block named content in layout.html.twig.

Next we write the layout.html.twig template to define the layout of the blog post:

<!-- 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>
Copy after login

In the above code, we define a file named ## The #title block uses the {% block %} command provided by Twig.

The focus of our call is in

{% block content %}{% endblock %}, because when submitting POST, the content here will be replaced with post. in html.twig

{{ title }}

{{ content }}

Author: {{ author }}

.

Finally, we create a new route for rendering

post.html.twig Template:

$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);
});
Copy after login

In the above code, we create a new route named ## Array of #$post

, which contains the title, content, author and other information of the article. Then, use Twig's render method to render the post.html.twig template while passing the $post array to the template. Eventually, we will see output similar to the following:

<!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>
Copy after login

Summary

Through the introduction of this article, we have learned how to use the Twig template engine in the Silex framework. Using Twig can make our web development work more efficient and convenient, while improving the maintainability of the code. If you want to learn more about Twig, you can check out the official documentation https://twig.symfony.com/doc.

The above is the detailed content of How to use template engine Twig with Silex framework?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template