twig => 템플릿 상속

기본 템플릿 사용

base.twig.html

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title | default('Hello World') }}</title>
        <link rel="stylesheet" type="text/css" href="theme.css">
        {% block css %}
        {% endblock %}
    </head>
    <body>
    {% block body %}
        <nav>
        {% block navigation %}
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        {% endblock navigation %}
        </nav>
        <section id="container">
            <section id="content">
            {% block content %}
            <p>
            Lorem ipsum dolor sit amet.
            </p>
        </section>
        {% endblock content %}
    </section>
    {% endblock body %}
    </body>
</html>

page.twig.html

{% extends base.twig.html %}
{% block navigation %}
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
<a href="page4.html">Page 4</a>
{% endblock %}
{% block content %}
This is my first page
{% endblock content %}

포함 된 템플릿의 내용 변경

article.twig.html

<article>
    <h1>{{ article.title }}</h1>
    {% block content %}
    <p>{{ article.content }}</p>
    {% endblock %}
</article>

articles.twig.html

{# use default template for article #}
{% for article in articles %}
    {% include "article.twig.html" %}
{% endfor %}

{# use custom template for article #}
{% for article in articles %}
    {% embed "article.twig.html" %}
        {% block content %}
            <img src="{{ article.image }}" alt="{{ article.title }}" />
            {{ parent() }}
        {% endblock %}
    {% endembed %}
{% endfor %}

변수 상속

parent.html.twig

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title_variable | default('Normal Page') }}</title>
    </head>
    <body>
         <h1>This is the {{ title_variable }} Page</h1>    
    </body>
</html>

child.html.twig

{% extends "parent.html.twig" %}
{% set title_variable = "Child" %}

포함, 확장, 사용, 매크로, 포함 비교

Twig에는 다양한 유형의 상속과 코드 재사용이 있습니다.

포함

주요 목표는 코드 재사용 입니다. 예제로 base.html.twig 내부에서 header.html.twig 및 footer.html.twig 사용해보십시오.

header.html.twig

<nav>
   <div>Homepage</div>
   <div>About</div>
</nav>

base.html.twig

{% include 'header.html.twig' %}
<main>{% block main %}{% endblock %}</main>

연장하다

주요 목표는 수직 상속 입니다. homepage.html.twig 및 about.html.twig 를 예제로 확장하여 base.html.twig 확장 base.html.twig .

base.html.twig

{% include 'header.html.twig' %}
<main>{% block main %}{% endblock %}</main>

homepage.html.twig

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

{% block main %}
<p>You are at the homepage</p>
{% endblock %}

about.html.twig

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

{% block main %}
<p>You are at the about page</p>
{% endblock %}

용도

주요 목표는 수평 재사용 입니다. single.product.html.twig (extends product.layout.html.twig ) 및 single.service.html.twig ( 'service.layout.html.page'확장) 페이지에서 sidebar.product.html.twig 사용해보십시오. (그것은 매크로와 비슷하지만 블록을위한 것입니다)

sidebar.html.twig

<aside>{% block sidebar %}{% endblock %}</aside>

single.product.html.twig

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

{% use 'sidebar.html.twig' %}
{% block main %}
<p>You are at the product page for product number 123</p>
{% endblock %}

single.service.html.twig

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

{% use 'sidebar.html.twig' %}
{% block main %}
<p>You are at the service page for service number 456</p>
{% endblock %}

매크로

주요 목표는 변수를 사용하여 여러 템플릿에서 재사용 가능한 마크 업을 만드는 것입니다. 일부 변수를 가져 와서 마크 업을 출력하는 함수를 생각해보십시오.

form.html.twig

{{{name}} "value ="{{value | e}} "{input} = {{매크로 입력 (이름, 값, 유형)}} "}}"/> {% endmacro %}

profile.service.html.twig

{% import "forms.html.twig" as forms %}

<div>{{ forms.input('username') }}</div>

깊숙이 박다

주요 목표는 블록 우선 적용 입니다. 함께 Use 및 Include 기능을 모두 갖추고 있습니다. product.table.html.twig 및 service.table.html.twig pagination.html.twig 를 product.table.html.twig 좋습니다.

pagination.html.twig

<div>
    <div>{% block first %}{% endblock %}</div>
    {% for i in (min + 1)..(max - 1) %}
        <div>{{ i }}</div>
    {% endfor %}
    <div>{% block last %}{% endblock %}</div>
</div>

product.table.html.twig

{% set min, max = 1, products.itemPerPage %}

{% embed 'pagination.html.twig' %}
    {% block first %}First Product Page{% endblock %}
    {% block last %}Last Product Page{% endblock %}
{% endembed %}

service.table.html.twig

{% set min, max = 1, services.itemPerPage %}

{% embed 'pagination.html.twig' %}
    {% block first %}First Service Page{% endblock %}
    {% block last %}Last Service Page{% endblock %}
{% endembed %}

여기에 포함 된 파일 ( pagination.html.twig )은 현재 컨텍스트 (여기에는 min , max 변수)에 대한 액세스 권한을 가지고 있습니다. 또한 임베디드 파일에 추가 변수를 전달할 수도 있습니다.