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" %}
शामिल करें, विस्तार, उपयोग, मैक्रो, एंबेड की तुलना करें
ट्विग में विभिन्न प्रकार के वंशानुक्रम और कोड का पुन: उपयोग होता है:
शामिल
मुख्य लक्ष्य कोड का पुन: उपयोग है । उपयोग करने पर विचार header.html.twig और footer.html.twig अंदर base.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 और about.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 %}
उपयोग
मुख्य लक्ष्य क्षैतिज पुन: उपयोग है । उपयोग करने पर विचार sidebar.product.html.twig अंदर single.product.html.twig (फैली product.layout.html.twig ) और single.service.html.twig (फैली 'service.layout.html.page') पृष्ठों की है। (यह मैक्रोज़ की तरह है, लेकिन ब्लॉकों के लिए)
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
{% मैक्रो इनपुट (नाम, मान, प्रकार)%} <इनपुट प्रकार = "{प्रकार | डिफ़ॉल्ट ('पाठ')}}" नाम = "{{नाम}}" मूल्य = "{{मूल्य | ई}} "}}" /> {% 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 विचार करें।
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 . pagination.html.twig । यहाँ पर) वर्तमान संदर्भ ( min , max चर यहाँ) तक पहुँच है। इसके अलावा, आप एम्बेडेड फ़ाइल में अतिरिक्त चर पास कर सकते हैं:
pagination.html.twig
<p>{{ count }} items</p>
<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|length %}
{% embed 'pagination.html.twig' with {'count': products|length } %}
{% block first %}First Product Page{% endblock %}
{% block last %}Last Product Page{% endblock %}
{% endembed %}