Проблема с наследованием блоков в twig

Question

andreyqin @andreyqin

Twig

Проблема с наследованием блоков в twig

Решил сделать содержимое тега в виде шаблонов, так как на каждой странице какие-то файлы подключаются, какие-то нет. Запихнул все возможное содержимое в отдельный файл примерно такого содержания:

{% block meta %}<meta http-equiv="Content-Type" content="text/html; charset=utf-8">{% endblock %}
{% block style %}<link rel="stylesheet" type="text/css" href="css/style.css">{% endblock %}
{% block jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>{% endblock %}
{% block script %}<script src="js/script.js"></script>{% endblock %}

В нужный мне шаблон, в тэг <head>, делаю необходимые мне вставки так: {% block meta %}{% endblock %} и т.д., но блоки не подключаются. Пробовал добавлять в начало файла с блоками путь к наследуемому файлу, например {% extends "../index.html" %}, но безрезультатно.
Структура сайта примерно такая:

/css
/js
/templates
   /nodes
      -head.html
      ...
   -index.html
   -contacts.html
   -about.html
/images
/includes
-index.php
-contacts.php
-about.php

PHP-файлы цепляют соответствующие им шаблоны. В head.html лежат те самые блоки для тэга head, которые должны подключатся к html-файлам в папке выше. Подскажите, почему блоки не наследуются шаблонами?

Вопрос задан более трёх лет назад
3981 просмотр

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 1

19 комментариев

andreyqin @andreyqin Автор вопроса

Спасибо, но ваш вариант работать не хочет.

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov

вспешке написал неправильно, вместо parents() вставьте parent()

Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса

Нет, к сожалению и такой вариант не работает, и даже {{ parent() }} работать не будет. В официальной документации приведены примеры, где не используется parent() и судя по всему все прекрасно работает. Я и сам видел примеры, по логике схожие с моим, без parent(). Думаю, может вот этот файл с шаблонами-блоками нужно как-то отдельно подгрузить с помощью twig?

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov

twig.sensiolabs.org/doc/functions/parent.html - вот эта ссылка как бы намекает на то, что наследование должно происходить при помощи parent(), иначе я не представляю каким образом наследуются родительские блоки. И у меня тоже всё основано на парент.

Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса

Извините, но я немного запутался. Я правильно понимаю, что если смотреть на мою структуру сайта, то в head.html мы должны прописывать {% extends "../index.html" %} и определять блоки, а в index.html эти блоки выводить так: {% block meta %} parent() {% endblock %} ?

Написано более трёх лет назад

Ilyas Masirov @IlyasMasirov

Давайте сейчас разберем всё по порядку. Вам нужно унаследовать родительские блоки из базового шаблона, создайте базовый шаблон, допустим, под названием base.html. Пропишите в нём

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>{% block title %}Мой первый сайт{% endblock title %}</title>
{% block meta %}<meta http-equiv="Content-Type" content="text/html; charset=utf-8">{% endblock meta %}
{% block style %}<link rel="stylesheet" type="text/css" href="css/style.css">{% endblock style %}
{% block jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>{% endblock jquery %}
{% block script %}<script src="js/script.js"></script>{% endblock script %}
</head>
<body>
{% block body %}
Это тело
{% endblock body %}
</body>
</html>

В файле index.html мы можете унаследовать блоки из base.html таким образом:

{% extends "base.html" %}

{% block meta %}
    {{ parent() }}
{% endblock meta %}

{% block style %}
    {{ parent() }}
{% endblock style %}

{% block jquery %}
    {{ parent() }}
{% endblock jquery %}

{% block script %}
    {{ parent() }}

{# Унаследовав скрипты из базового шаблона base.html, вы также можете прилинковать другие скрипты, которые будут загружаться при рендеринге index.html.

Например:
#}

<script src="js.foo.js"></script>

{% endblock script %}

{% block body %}
    {# Сюда вы можете дописать свой код #}
{% endblock body %}

Файл head.html можете вообще убрать или дописать в него все подключаемые js, css и мета-данные, включив его в базовый шаблон при помощи {% include 'head.html' %}. Например:

Файл head.html:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/script.js"></script>

включить в файл base.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>{% block title %}Мой первый сайт{% endblock title %}</title>
{% block head %}{% include 'head.html'  %}{% endblock head %}
</head>
<body>
{% block body %}
Это тело
{% endblock body %}
</body>
</html>

Мультнаследование в твиге запрещено

Написано более трёх лет назад

andreyqin @andreyqin Автор вопроса
Подождите, но ведь {% extends "base.html" %} должно указываться в шаблоне, где определяются блоки (у вас это base.html, у меня head.html), только там должно быть не 'base.html', а 'index.html', т.е. эта запись указывает на шаблон, которые будет наследовать текущий.
Заметил еще, что вы пишите {% endblock имя_блока %}, хотя в документации я такого не видел.
А теперь по порядку: то, что в вашем примере является base.html, у меня это head.html и его содержимое я привел в самом начале темы, сейчас я добавил туда еще {% extends "../index.html" %}, тем самым я указал, что данные шаблон будет наследоваться файлом index.html. Далее, в index.html я просто вставляю эти блоки и так - {% block meta %}{% endblock %}, и как вы сказали {% block meta %}{{ parent() }}{% endblock %} , но работать данные блоки не хотят.
Глядя на структуру моего сайта (чтобы видеть, правильно ли прописаны пути), привожу вам код этих двух файлов:
head.html:

{% extends "../index.html" %} {% block meta %}<meta http-equiv="Content-Type" content="text/html; charset=utf-8">{% endblock %} {% block style %}<link rel="stylesheet" type="text/css" href="css/style.css">{% endblock %} {% block jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>{% endblock %} {% block script %}<script src="js/script.js"></script>{% endblock %}

index.html:

<!DOCTYPE html> <html> <head> <title>Главная</title> {% block meta %}{{ parent() }}{% endblock %} {% block style %}{{ parent() }}{% endblock %} {% block jquery %}{{ parent() }}{% endblock %} {% block script %}{{ parent() }}{% endblock %} </head> <body> {# Тут много другого кода #} </body>

Если вас не затруднит, постарайтесь понять мою логику и на моем примере скажите, в чем проблема.
Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov
в вашем примере вы наследуете index.html, хотя надо наоборот. extends нужно вызывать в наследуемом, а не в родительском, а то получается наследуете родителя наследуемым, так не бывает.

Правильно будет так:
{% extends 'nodes/head.html' %} <!DOCTYPE html> <html> <head> <title>Главная</title> {% block meta %}{{ parent() }}{% endblock %} {% block style %}{{ parent() }}{% endblock %} {% block jquery %}{{ parent() }}{% endblock %} {% block script %}{{ parent() }}{% endblock %} </head> <body> {# Тут много другого кода #} </body>
Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov

А начало и конец блоков именую для личного удобства. Это тоже есть в документации.

Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса
Вот не хочет он так работать, выдает ошибку:
Fatal error: Uncaught exception 'Twig_Error_Syntax' with message 'A template that extends another one cannot have a body in "index.html"
Написано более трёх лет назад

Ilyas Masirov @IlyasMasirov

Это всё из-за того, что в наследуемом объекте не должно быть ещё одного <body></body>

Вообще у вас по идее должно быть:

в head.html

<!DOCTYPE html>
<html>
<head>
<title></title>
{% block meta %}<meta http-equiv="Content-Type" content="text/html; charset=utf-8">{% endblock %}
{% block style %}<link rel="stylesheet" type="text/css" href="css/style.css">{% endblock %}
{% block jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>{% endblock %}
{% block script %}<script src="js/script.js"></script>{% endblock %}
</head>
<block>
{% block body %} Какой-то код {% endblock %}
<block>
</html>

в index.html

{% extends 'nodes/head.html' %}
{% block meta %}{{ parent() }}{% endblock %}
{% block style %}{{ parent() }}{% endblock %}
{% block jquery %}{{ parent() }}{% endblock %}
{% block script %}{{ parent() }}{% endblock %}
{% block body %}{{ parent() }}{% endblock %}

Написано более трёх лет назад

andreyqin @andreyqin Автор вопроса

А вот у меня так нельзя, потому что в index.html, в подключаются через include другие шаблоны. Их я вынес в отдельные файлы и подключаю через include, потому что на всех страницах они одинаковые (шапка, меню, футер), а вот тэги в head на каждой странице разные, поэтому в отдельном файле я разделил их по блокам.
То есть, как я понял, лучше выбрать что-то одно - либо include, либо блоки, чтобы не возникало подобных проблем?

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov
и то, и то можно использовать одновременно - единственное условие следовать правилам в документации Twig, иначе будут возникать фатальные ошибки при генерации страниц. Вы же пытаетесь сделать нечто:
<body> <body> </body> </body>
Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса

Спасибо, теперь я понял свою проблему. Не подскажите, как мне теперь логичнее сделать. Я хочу в index.html в <body> инклюдить различные куски страница (шапка, меню, футер), а в <head> вставлять унаследованные от head.html блоки.

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov
Если вы хотите заняться правильным наследованием и избавиться от кучи повторяющейся лапши, то вам придётся немного изменить head.html. Возьмите head.html как за основу, т.е. в качестве родителя мы будем опираться на него. Добавьте в него все необходимые аттрибуты полноценной HTML-страницы (, , ), добавьте в тело страницы body готовые части шапки, сайдбара, меню и подвала, которые будут всегда отображаться на странице, т.е. их не надо будет постоянно инклюдить:

head.html
<!DOCTYPE html> <html> <head> <title></title> {% block meta %}<meta http-equiv="Content-Type" content="text/html; charset=utf-8">{% endblock %} {% block style %}<link rel="stylesheet" type="text/css" href="css/style.css">{% endblock %} {% block jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>{% endblock %} {% block script %}<script src="js/script.js"></script>{% endblock %} </head> <block> {% include 'header.html' %} {% include 'navmenu.html' %} {% include 'sidebar.html' %} {% block content %} Ваш контент {% endblock %} {% include 'footer.html' %} <block> </html>

В index.html просто унаследуйте шаблон head.html и пропишите нужные данные:

index.html
{% extends 'nodes/head.html' %} {% block meta %}{{ parent() }}{% endblock %} {% block style %}{{ parent() }}{% endblock %} {% block jquery %}{{ parent() }}{% endblock %} {% block script %}<script src="js/foobar.js"> {# скрипт из head.html - <script src="js/script.js"></script> не будет унаследован, т.к. здесь не прописан parent() #}</script> {% endblock %} {% block content %} Новый контент {% include 'categories.html' %} {% endblock %}

Как видите, всё легко и просто. Теперь в index.html есть строчки кода из блоков meta, style, jquery из head.html, в блоке script - свой прикрепленный скрипт, а в блоке content вставлена код страницы categories.html, также унаследованы - шапка, меню, сайдбар и подвал. Теперь их в index.html не надо повторно прописывать.

Очень много интересных решений есть в Twig, например, у вас есть мобильная версия сайта и вы хотите, чтобы сайт выдавал минимализм, тогда указываете переменную и проверяете:
{% extends ismobileversion ? "mobile.html" : "head.html" %}

и так далее
Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса

Огромное спасибо за помощь и подробное объяснение! Теперь все встало на свои места. Возник дополнительный вопрос: как будет грамотней, держать такие блоки, как шапка, меню, футер в отдельных файлах, а потом инклюдить их в основной шаблон (т.е. как сейчас), либо сразу держать их в основном шаблоне? И еще: вот вы пишите в index.html, например, {% block meta %}{{ parent() }}{% endblock %}, но ведь по сути таких записей можно не делать, он и так это унаследует.

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov

Конечно можно запихать всё в один файл и потом копаться в куче кода в поисках нужного места, но можно и держать блоки отдельно в разных файлах, это будет более информативно и нагляднее. такой грамотный подход избавит вас при редактировании или изменении проекта, представьте, что у вас не один шаблон, а несколько, и ваш проект их всецело использует, а потом вдруг вам что-то нужно было изменить в шапке и вы тут же полезли всё это менять во всех шаблонах. Очень неудобно. А тут открыл файлик с кодом шапки, нашел нужную строчку и поменял её.
По поводу второго вопроса. Можно и не вставлять этот блок, если не хочется его менять, я просто показал вам, что можно делать с этим блоком, наследовать ли родительские данные или вписать свои, а можно и наследовать, и вписать что-либо своё. Вот и всё. Эксперементируйте :)

Написано более трёх лет назад
andreyqin @andreyqin Автор вопроса

Хорошо, я вас понял. Еще раз большое спасибо за помощь!

Написано более трёх лет назад
Ilyas Masirov @IlyasMasirov

Всегда пожалуйста :)

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

OpenCart

+1 ещё

Простой
Как сделать свою сортировку товаров для каждой категории в опенкарт 3?
- 1 подписчик
- 29 мар.
- 45 просмотров
0

ответов
Работа с датой/временем

+1 ещё

Средний
Как настроить разметку twig, чтобы при выводе даты учитывался день недели?
- 1 подписчик
- 14 нояб. 2024
- 31 просмотр
0

ответов
Laravel

+1 ещё

Простой
Отправка писем в Laravel с шаблонами Twig?
- 1 подписчик
- 31 мая 2024
- 70 просмотров
1

ответ
OpenCart

+1 ещё

Простой
Почему переменная в Twig возвращает null в Opencart 3?
- 1 подписчик
- 20 мая 2024
- 36 просмотров
1

ответ
OpenCart

+1 ещё

Средний
Как в twig шаблоне получить данные из переменной, в название которой нужно подставить значение из другой переменной?
- 1 подписчик
- более года назад
- 128 просмотров
0

ответов
OpenCart

+1 ещё

Простой
Как в twig шаблоне реализовать данное условие из php?
- 1 подписчик
- более года назад
- 103 просмотра
1

ответ
PHP

+3 ещё

Сложный
Как сделать частичный SSR для vue совместно с php шаблонизатором?
- 1 подписчик
- более года назад
- 270 просмотров
1

ответ
Twig

Простой
Отладка шаблонов Twig без Symfony?
- 1 подписчик
- более года назад
- 30 просмотров
0

ответов
Twig

Средний
Удалить знак валюты из TWIG?
- 1 подписчик
- более года назад
- 60 просмотров
1

ответ
Twig

Простой
Как плюсовать значение в twig?
- 1 подписчик
- более года назад
- 62 просмотра
1

ответ
Показать ещё Загружается…

Middle+/Senior UI/UX designer, SaaS

gro • Москва

от 1 500 $

IT Project Manager

Евразия • Москва

от 200 000 ₽

SRE в команду трафика Core Infrastructure

Яндекс • Москва

от 400 000 ₽

Answer 1 · 2014-01-20 15:30:55

Наследование происходит с помощью parents(), т.е. наследуете шаблон при помощи extends и потом в теле блока наследуете родительские методы: {% block meta %} parents() {% endblock %}

Проблема с наследованием блоков в twig

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт