За что я люблю Yii+Twig: динамическое подключение нужных скриптов

в 3:51, , рубрики: assets, twig, yii, yii framework, Веб-разработка, метки: , , ,

Навеяно вот этой статьёй.

Хотел бы показать, как работаю с ресурсами я и почему нахожу такой подход дьявольски удобным.

Так уж сложилось, что в качестве шаблонизатора мне полюбился Twig.

Вот прямо как влитой мне — сначала на CodeIgniter, потом я подружил его с Yii через чуть-чуть подломанное мною расширение (ссылка на которое в конце статьи)

Одна из тысяч крутых его фич это наследование шаблонов, вроде того, что ниже:

layout.twig

<html>
<head><title>{% block title %}{% endblock %}</title></head>
<body>
<h1>Привет!</h1>
{% block content %}{% endblock %}
</body>
</html>

index.twig

{% extends 'layout.twig' %}
{% block title %}Меняю заголовок страницы{% endblock %}
{% block content %}Как бодрость духа?{%endblock%} 

В итоге при рендере нашего index.twig мы ставим тайтл и делаем приветствие более неформальным.

Теперь было бы неплохо прикрутить скрипты и остальное.
Я делаю это следующим образом — папки css,img,js у меня находятся внутри папки assets, которая уже в свою очередь лежит в папке с темой оформления (если публиковать отдельно css и img то поломаются относительные ссылки в css). В основном шаблоне я делаю так:

{% set assetsDir = Yii.app.publishFile('assets')  %}
{% call Yii.app.clientScript.registerScriptFile( assetsDir~'/js/chosen.jquery.min.js' ) %}
{% call Yii.app.clientScript.registerCssFile( assetsDir~'/css/screen.css', 'screen') %}

publishFile был добавлен как обертка над assetManager, для поддержки относительных путей с учетом выбранной темы оформления. Т.е. конструкция Yii.app.publishFile('assets') опубликует папку assets из каталога текущей темы — мне удобно.

В какой-то момент решив подключить дополнительный скрипт к конкретному представлению я в его twig-файле делаю всего лишь

{% call Yii.app.clientScript.registerScriptFile( assetsDir~'/js/myscript.js' ) %} 

В итоге я получаю замечательно читающийся (мне, во всяком случае) шаблон — я сразу вижу где чего наподключалось.

layout.twig

{% set assetsDir = Yii.app.publishFile('assets')  %}
{% call Yii.app.clientScript.registerScriptFile( assetsDir~'/js/chosen.jquery.min.js' ) %}
{% call Yii.app.clientScript.registerCssFile( assetsDir~'/css/screen.css', 'screen') %}
<html>
<head><title>{% block title %}{% endblock %}</title></head>
<body>
<h1>Привет!</h1>
{% block content %}{% endblock %}
</body>
</html>

index.twig

{% extends 'layout.twig %}
{% block title %}
{% call Yii.app.clientScript.registerScriptFile( assetsDir~'/js/myscript.js' ) %} 
Меняю заголовок страницы
{% endblock %}
{% block content %}Как бодрость духа?{%endblock%} 

В контроллере дергаем за $this->render('index') и вуаля!

Для меня очень важным в таком подходе является то, что подключение ресурсов я контролирую непосредственно в представлениях.
Нюанс — в шаблонах, расширяющих другой шаблон, переменные, определенные родительским шаблоном будут доступны только в конструкциях {% block %}{% endblock %}

Ссылка на использованный twig-extension для Yii: https://github.com/yiiext/twig-renderer

Правда он у меня, как я писал выше, подломан — из коробки не хотел дружить с темами, плюс вызывать процедуры, не возвращающие значений, мне проще было конструкцией

{% call procedurename() %}

чем трудночитаемой

{{ void( procedurename() ) }}, поэтому я накидал небольшое расширение для twig.

Автор: AMar4enko

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js