1. 程式人生 > >twig模板的進一步學習以及在symfony當中的使用

twig模板的進一步學習以及在symfony當中的使用

子類 地方 names parent styles coo his 設置 ati

首先,twig可以理解為用於輸出html代碼的,雖然用PHP等其他語言也可以輸出,但是twig更為簡潔高效,同時twig模板被編譯成原生的php類緩存起來,所以才會這麽快,

其實twig跟php類差不多我感覺,可以進行繼承重寫,創建一個基類模板,之後的模板都可以繼承他並且重寫他的任何一個block

twig模板可以和for,if語句完美結合,比如下面這個例子,以無序方式循環輸出用戶名,同時根據用戶名是否存在進行不同的操作 ,註意以{% endfor %}來結束for語句

<ul>
    {% for user in users if user.active %}
        
<li>{{ user.username }}</li> {% else %} <li>No users found</li> {% endfor %} </ul>

下面以一個例子來說明twig其中的繼承關系,可以看到base模板當中,定義了三個block,title,sidebar,body塊,這裏用{%block 塊名%} {%endblock%}來定義一個塊

title輸出該頁面的標題,sidebar是旁邊的選項,body是文章的具體內容,這裏可以看做是讓其他模板繼承並重寫的,

{#
app/Resources/views/base.html.twig #} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Test Application{% endblock %}</title> </head> <body> <div id="sidebar"> {% block sidebar %}
<ul> <li><a href="/">Home</a></li> <li><a href="/blog">Blog</a></li> </ul> {% endblock %} </div> <div id="content"> {% block body %}{% endblock %} </div> </body> </html

接下來我們以一個字模板來進行說明,比如現在有一篇文章,當進入該文章頁面時,需要顯示文章具體內容,文章頁面和主頁是差不多的,只是基類twig當中的body塊是不一樣的,

所以只需要重寫基類當中的body塊就行了,就可以在原頁面的基礎上,只更改文章的內容而其他地方都是不變的。註意在此之前使用extends繼承基類模板,就會自動顯示基類模板

當中的內容

{# app/Resources/views/blog/index.html.twig #}
{% extends ‘base.html.twig‘ %}
 
{% block title %}My cool blog posts{% endblock %}
 
{% block body %}
    {% for entry in blog_entries %}
        <h2>{{ entry.title }}</h2>
        <p>{{ entry.body }}</p>
    {% endfor %}
{% endblock %}

說到底twig模板就是將各個頁面之間的共性提取出來,寫入到基類模板當中去,基類模板的block越多越好,這樣頁面更為靈活

如果要在子類模板當中在基類模板的某一塊的基礎上添加內容,而不是完全重寫,只需要將 {{ parent() }}放在所需要的塊中即可,

對於模板存放位置的說明。

基類模板一般存放在App/Resourses/views當中,可以繼承第三方bundle當中的模板,註意如果你想要讓基類繼承其他的twig,需要放在bundle當中

對於繼承路徑的說明,

所有目錄都是相對於app/resources/views目錄的,比如你要繼承views/blog的twig模板,需要使用 extends blog/模板名,

對於在一個模板當中引入其他模板的說明

比如現在有一個模板article.html.twig

{# app/Resources/views/article/article_details.html.twig #}
<h2>{{ article.title }}</h2>
<h3 class="byline">by {{ article.authorName }}</h3>
 
<p>
    {{ article.body }}
</p>

然後如果要在一個list.html.twig模板當中使用他的話,

{# app/Resources/views/article/list.html.twig #}
{% extends ‘layout.html.twig‘ %}
 
{% block body %}
    <h1>Recent Articles<h1>
 
    {% for article in articles %}
        {{ include(‘article/article_details.html.twig‘, { ‘article‘: article }) }}
    {% endfor %}
{% endblock %

使用include 包含這個模板進來,路徑規則和之前的相似,同樣如果需要傳入參數的話,{}括起來就行,和數組方式差不多

如果要使用twig跳轉到另一個界面的話,使用path函數即可,比如現在有一個路由article,slug為傳入的參數

/**
     * @Route("/article/{slug}", name="article_show")
     */

跳轉時,使用{{ path(‘路由名稱‘,{參數列表來實現}) }} ,註意你可以寫死他們的url,但是使用路由名更為靈活

{% for article in articles %}
    <a href="{{ path(‘article_show‘, {‘slug‘: article.slug}) }}">
        {{ article.title }}
    </a>
{% endfor %}

對於輸出圖片的說明

使用asset進行載入,這裏的rel參數規定了指定link和當前鏈接的關系,具體看文檔,這裏的文檔路徑是相對於主機路徑的即web目錄路徑,一般都會存放在web/bundles/scourgenWeb/css/js/png.......

<img src="{{ asset(‘images/logo.png‘) }}" alt="Symfony!" />
 
<link href="{{ asset(‘css/blog.css‘) }}" rel="stylesheet" />

最後再對twig模板當中訪問一個用戶的各種信息的方式

symfony在php,twig引擎當中默認設置一個全局變量APP,可以通過它來訪問一個user的信息,這個user可以是一個UserInteface對象,有ToString() 方法的對象,或者常規字符串

app.user

app.session 當前用戶的session,

app.request 當前請求對象,目前也不太了解

再說明一下如何對一個控制器進行渲染,在twig之中訪問該控制器時,可以獲取到相應的值,比如我們在recentArticle當中,用render方法返回文章的信息,註意這裏render的第一個參數是需要渲染的twig模板的路徑(相對於views目錄)

// src/AppBundle/Controller/ArticleController.php
namespace AppBundle\Controller;
 
// ...
 
class ArticleController extends Controller
{
    public function recentArticlesAction($max = 3)
    {
        // make a database call or other logic
        // to get the "$max" most recent articles
        $articles = ...;
 
        return $this->render(
            ‘article/recent_list.html.twig‘,
            array(‘articles‘ => $articles)
        );
    }
}

在twig當中訪問這個Action時,直接使用article變量就行了

{# app/Resources/views/article/recent_list.html.twig #}
{% for article in articles %}
    <a href="/article/{{ article.slug }}">
        {{ article.title }}
    </a>
{% endfor %}

twig模板的進一步學習以及在symfony當中的使用