如何在Silex框架中使用模板引擎Twig？-php教程-PHP中文網

如何在Silex框架中使用模板引擎Twig？

PHPz

發布： 2023-06-03 09:28:01

原創

703 人瀏覽過

在Web開發過程中，使用模板引擎可以大幅減輕前端開發工作量，同時也增強了Web應用的可維護性。 Twig是一款受歡迎的PHP模板引擎，它具有簡潔易讀、可擴展性強等特點。本文將介紹如何在Silex框架中使用Twig模板引擎。

安裝Twig

首先，我們需要使用Composer安裝Twig。進入到專案目錄，執行以下指令：

composer require twig/twig

登入後複製

安裝完成後，我們需要在Silex中註冊Twig服務提供者：

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

$app = new SilexApplication();

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

登入後複製

以上程式碼中，我們使用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>

登入後複製

我們可以在其中使用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();

登入後複製

以上程式碼中，我們使用$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>

登入後複製

巢狀模板

Twig也支援將多個範本組合在一起渲染，這可以非常方便地分離模板的結構和內容。例如，我們可以將網站的頭部和底部獨立出來，分別保存為header.html.twig和footer.html.twig，然後將它們嵌套在其它模板中。

下面我們來建立一個用於展示部落格文章的範本檔案：

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

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

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

登入後複製

在該範本中，我們使用了{% 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>

登入後複製

以上程式碼中，我們定義了一個名為title的區塊，使用了Twig提供的{% block %}指令。

我們呼叫重點是在{% block content %}{% endblock %}中，因為在提交POST的時候，這裡的內容將會被替換成post. html.twig中的<h1>{{ title }}</h1><div>{{ content }}</div><p>Author: {{ author }}}</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);
});

登入後複製

以上程式碼中，我們建立了一個名為$post的數組，其中包含文章的標題、內容和作者等資訊。然後，使用Twig的render方法渲染post.html.twig模板，同時將$post陣列傳遞給模板。

最終，我們將會看到類似以下的輸出：

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

登入後複製