При использовании (только) системы шаблонов, как мне управлять CSS, javascript и т. Д. Для суб-шаблонов? - PullRequest
Новая
       21

При использовании (только) системы шаблонов, как мне управлять CSS, javascript и т. Д. Для суб-шаблонов?

2 голосов
/ 19 ноября 2011

В прошлом у меня был такой же вопрос при работе с разными системами шаблонов на разных языках, поэтому сначала

Общий вопрос

Я хочу использовать подшаблон для включения определенного компонента пользовательского интерфейса, который может появляться в разных местах на нескольких разных страницах. Этот компонент пользовательского интерфейса требует определенных файлов CSS и JS.

Я хочу поступить правильно с ресурсами CSS и JS, которые, насколько я знаю и в общих чертах, заключаются в том, чтобы: а) объединить как можно больше б) минимизировать как можно больше и, возможно, в) поставить что Я могу сделать это в конце своей разметки, чтобы браузеру не пришлось ждать, пока они загрузятся, перед отображением контента.

Итак, если у меня есть различные компоненты пользовательского интерфейса, а также разные заголовки и боковые панели в разных разделах сайта, для которых всем требуются свои собственные специальные CSS и JS для правильной работы, то каков лучший способ для меня управлять их через систему шаблонов, чтобы окончательная разметка была как можно меньше и организована?

Особенности моей ситуации

Я работаю над большим унаследованным PHP-сайтом, на котором, чтобы дать первоначальным авторам преимущество в сомнениях, разработка могла начаться до того, как MVC стал действительно массовым, и до того, как было так много вариантов использования фреймворков. , Таким образом, нет единой инфраструктуры MVC, нет маршрутизации, нет шаблонов (также нет ORM, но это конкретное проклятие здесь не так актуально).

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

Казалось, что самым простым местом для начала является слой видов, для которого я использую TinyButStrong . Пример их под-шаблонов можно найти здесь , но, как я уже сказал, я думаю, что это очень общий вопрос.

Вещи, которые я рассмотрел

С более интегрированной платформой я хотел бы иметь возможность делать что-то вроде $view->add_js($foo), но переход на полноценную платформу - это то, что делают другие люди, пока я стараюсь поддерживать существующую кодовую базу в мореходном состоянии. Нет даже достаточно последовательной организации файлов, чтобы можно было свернуть что-то подобное вручную.

На данный момент лучшее, что я могу придумать, - это сделать DOMDocument из поля зрения непосредственно перед его выводом и манипулировать тегами <link> и <script> в этой точке. Я не знаю, если это немного сумасшедший, хотя. Учитывая общность проблемы, я хотел бы думать, что есть известный разумный способ решить эту проблему.

Большое спасибо за ваш вклад.

Ответы [ 2 ]

1 голос
/ 19 ноября 2011

Читателю трудно понять, что можно или нельзя сделать с вашей базой кода. Обычный способ справиться с этой ситуацией - передать параметры в шаблон представления, и тогда шаблон может включать в себя условные чанки или суб-шаблоны на основе ваших параметров. Это не требует полноценного фреймворка, который должен делать автономный движок шаблонов. Если ваш шаблонизатор поддерживает наследование, в ваших шаблонах есть хороший шаблон для обработки ресурсов - проверьте здесь, например, http://symfony.com/doc/2.0/book/templating.html.

Манипулирование Dom для каждого запроса для обработки такого рода вещей кажется немного неортодоксальным.

0 голосов
/ 30 ноября 2011

В этой ситуации вам нужна некоторая форма наследования шаблонов ;то есть технология, посредством которой суб-шаблон имеет доступ к областям в «родительском» шаблоне и может редактировать или заменять контент в этих областях.Используя эту возможность, CSS и JS, необходимые для компонента, включенного в под-шаблон, могут быть добавлены в элемент <head> родительской страницы.

В Twig , это достигаетсяиспользуя именованные блоки .Сначала вы создаете свой родительский шаблон (или layout , как он называется в Twig), например, index.html.twig.Вы включаете в него именованный блок, такой как {% block myCss %}.

Далее, чтобы создать суб-шаблон, вы начинаете шаблон со строки {% extends ::index.html.twig %}.Затем содержимое блока, определенного в под-шаблоне с тем же именем, что и у блока в родительском шаблоне (в данном случае {% block myCSS %}), будет подставлено в родительский шаблон.Чтобы добавить, а не заменить содержимое в родительском шаблоне, используйте {{ parent() }} для включения содержимого, уже существующего в родительском шаблоне.

Пример этого с кодом доступен по ссылке, указанной @Базель Шишани.Я слышал, что Twig смоделирован по Django, и наследование шаблонов в Django выглядит очень похоже (за исключением использования {{ block.super }} вместо {{ parent() }}. Существует обсуждение , какдостичь тех же целей в TinyButStrong .

В более широком смысле библиотека Assetic выглядит как очень многообещающее решение для управления активами CSS и JS во избежание дублирования (например,если один и тот же файл JS требуется для нескольких компонентов / подшаблонов), включить объединение и минимизацию ресурсов и т. д. Это представление его функций дает более подробную информацию.

...