Html шаблонизаторы – MVC. Генерация html страницы шаблонизатором и блоков (или собирание всех данных для этого)?

Содержание

Шаблонизаторы для HTML. / Habr

В эту неделю довольно много писали про шаблонизаторы, преимущественно Smarty и XSLT. В то же самое время ваш покорный слуга усиленно думал над тем, какой бы шаблонизатор использовать на своих проектах, и пришел к неутешительному выводу что ему ничего не нравиться. Далее будет рассмотрены основные методы написания шаблонов, расписано что в них нехорошего и предложен свой взгляд на проблему.

Итак, шаблоны, как известно, призваны разделить код и представление, и соответственно разделить работу верстальщика и программиста. Из этой потрясающей своей новизной информации, можно сделать вывод, что идеальный шаблон должен состоять из чистого html, так как верстальщик должен работать только с html и css (что при существующем зоопарке браузеров уже подвиг), а программист, так как он существо ленивое и дорогое в содержании, толжен заниматься бизнес логикой.
Кроме того, как правило, задача верстальщика состоит в том, чтобы сделать код, который в браузере выглядит идентично макету, поэтому желательно, чтобы шаблон можно было просмотреть в браузере или в визуальном редакторе— верстать в блокноте, конечно кошерно, но разработчики dreamviewer, тоже не зря хлеб едят.

Итак рассмотрим следующие распространенные шаблонизаторы.

Язык программирования

Самый распространенный шаблонизатор, гибкий вкусный и мощный, позволяет делать все что можно придумать. Но с другой стороны, надо программировать, да и синтаксис, из-за своей мощности избыточен, для его использования в шаблоне. Для того, чтобы просто вывести переменную в php или jsp, надо сделать слишком много телодвижений. Кроме того это требует от верстальщика знания языка и такой шаблон не портируется между языками (не знаю насколько это актуально, для проектов меньше Яндекса).

Smarty


http://www.smarty.net/
Один из самых популярных шаблонизаторов, поэтому для примера рассмотрим его. Позволяет использовать функции, циклы, условия, но в итоге мы имеем тот же самый язык программирования, только проще, что, впрочем, не избавляет от необходимости его учить. Опять же при просмотре шаблона в браузере вылезают разные неприятные рудименты от циклов условий и т.д. Кроме того для выполнения какой-либо тривиальной задачи, вроде вывода картинок в таблице по три в ряду, необходимо «программировать», что, по моему мнению, для такой детской задачи слишком. Можно, конечно, написать функцию, но туда придется запихивать куски html кода, а это еще то извращение.

XSLT

Величайшее, после колеса, изобретение человечества, как мы успели убедиться на этой неделе. Но основная загвоздка в том, что XSLT— идеальное средство, для того чтобы перегнать один документ для роботов в другой столь же нечибельный документ (то есть XML конечно может быть прочитан человеком, но удовольствие это сомнительное).
Соответственно и шаблон, представляет из себя мешанину тегов, требующую дополнительного пристального изучения. Наш сферический верстальщик, напомню, должен хорошо знать HTML, а самосовершенствоваться в свободное от работы время.
Кроме того, как правило, сначала страница верстается из макета, смотрится в браузерах (показывается заказчику), а потом его придется перегонять в XSLT, т.е. делать одну и ту же работу два раза.
И, как я уже написал выше, XSLT— средство для перевода одного или нескольких XML файлов в другой, и использовать его следует все-таки по назначению.

Blitz templates


http://alexeyrybak.com/blitz/blitz_ru.html
Шаблонизатор всем замечательный, но только теперь логика шаблона отдается на откуп программиста. Вместо того, чтобы сформировать данные и отправить в шаблон и забыть, теперь нашему контроллеру (и как следствие— программисту) придется повертеть циклы и позаниматься другими малоинтересными задачами.

Form like шаблонизатор.


Применяется в asp.net, и позволяет, указав элементу, атрибут «исполнять на сервере» менять из бэкэнда его свойства и содержимое, аналогично windows forms. Метод интересный, но с точки зрения производительности сомнительный, хотя конечно все кэшируется и оптимизируется. Кроме того реализаций такого подхода нигде кроме asp.net я не встречал (правда меня занимал большей частью php), HTML_MetaForm Котерова, все-таки, немного из другой оперы.
Кроме того программисту приходиться опять заниматься разными малоинтересными вещами, вроде изменения атрибутов src у изображений.

Авторский велосипед

Собственно, это даже скорее не шаблонизатор, а препроцессор для шаблонов. Логика шаблонов не блещет разнообразием, по большому счету это условие, цикл и кое-какие рутинные операции с формами. Таким образом, нам просто надо указать какой кусок html, за что отвечает, и сделать это можно при помощи html комментариев, которые собственно для этого и придуманы.

Таким образом, рассмотренная ранее, задача с выводом картинок по три в ряд (я знаю, что это можно сделать div'ами, но это не так наглядно), сводиться к расстановке комментариев:

<code>
<!--op:each src="$images" split="3"-->
<!--each:header-->
<table>
<!--/each:header-->
<!--each:splittop-->
<tr>
<!--/each:splittop-->
<!--each:row-->
<td><a href="{link}"><img src="{$src}" alt="{$title}"/></a></td>
<!--/each:row-->
<!--each:splitbot-->
</tr>
<!--/each:splitbot-->
<!--each:footer-->
</table>
<!--each:footer-->
<!--each:else-->
Ничего нет :(
<!--/each:else-->
<!--/op:each-->
</code>

Выглядит несколько избыточно, но в реальной ситуации, html кода будет значительно больше, а комментировать верстку все равно надо.
Каждая инструкция обрабатывается отдельным классом (в данном случае optemplate_tag_each), который имеет доступ к подузлам и аттрибутам, и на их основании формирует итоговый код (php, jsp, smarty— какой вам удобнее).
При этом есть еще волшебный узел «по умолчанию» не ограниченный никакими «подтегами», что в простых случаях позволяет уменьшить количество инструкций. Т.е. записть можно и так:
<code>
<!--op:each src="$folders"-->
<h4>{$Title}</h4>
<div>{$Text}</div>
<!--/op:each-->
</code>

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

Реализация

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

Какой смысл в использовании шаблонизаторов? — Хабр Q&A

Шаблонизатор шаблонизатору рознь. Но в целом следует выделить общие задачи. которые должны решать за вас шаблонизаторы. С blade не работал и не вижу смысла есть есть twig.

Безопасность. Это пожалуй можно поднять на верх. Типичная картина в шаблонах на php - <?= $someUserInput; ?>. Частенько это можно встретить в выводе инпутов, при формировании ошибок поиска (мол "по запросу $userInput ничего не найдено. То есть вставляем в инпут подключение наших js скриптиков, если это форма поиска - делимся с "другом" и забираем его сессию. Ну или еще какие забавные штуки можно делать. А ведь все очень просто решается. Ставим какую-то функцию, которая по умолчанию будет фильтровать XSS инъекции при выводе, и не будет этого делать только если мы попросим. Если писать просто на php - появляются отвратные функции, которые можно просто забыть вызвать. А с шаблонизаторами мы пишем красивые {{ someUserInput }} и можем спать спокойно.

Помогают соблюдать принцип DRY. Современные средства шаблонизации (twig например), предоставляют вам возможность разделять шаблоны на блоки, переиспользовать их несколько раз, выделять макросы, наследовать шаблоны... словом все что угодно. лишь бы вы могли реюзать куски html а не копипастить их.

Ограничивают полет фантазии разработчика. Далеко не новость что разработчики ленивые засранцы. Особенно молодые. Если им в шаблоне внезапно понадобились какие-то данные из БД, или данные связанные с запросом, большинство не будет париться и зафигачит нужный код прямо в темплейте. Так же некоторые грешат тем что часть бизнес логики размазывают по шаблонам. Так же встречал проекты отданные на суппорт, где чуваки в шаблонах разбирали через xpath ответы от сторонней апишки (которая использовалась вместо базы данных. То есть это дело было размазано по всему проекту). Рефакторинг в случае изменения апишки будет болью.

Хороший шаблонизатор должен настолько сильно усложинить вам процесс написания говнокода в шаблонах, что бы вы перехотели это делать и подумали как это можно сделать нормально. На выходе же мы имеем чистенькие шаблоны, которые ничего не знаю о бизнес логике приложения и знают только о логике отображения, чего мы и добиваемся вообще разделяя логику от представления. Это так же упрощает жить верстальщику (если он отдельно существует) или вам же в будущем при суппорте.

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

Так как за все эти приятные вещи мы по сути ничего не платим (шаблонизатор должен компилировать все это в нативный php так что оверхэда просто не будет), почему бы не пользоваться?

Встречаем 6 лучших шаблонизаторов на PHP

Для чего вообще нужны движки шаблонов, когда можно использовать сам PHP в качестве шаблонизатора? Да, это возможно. Но зачем, если есть более надежные и доступные варианты.

Например, для отображения значения переменной в PHP вы бы написали:

Но то же самое, только с помощью более короткого кода, можно сделать Twig и Django:

PHP лучше всего подходит для бизнес-логики. Его нельзя смешивать с уровнем представления.

Бизнес-логика приложения определяет, как данные создаются, отображаются, сохраняются и изменяются. Уровень представления определяет, как данные будут предоставлены пользователю в определенном формате, таком как HTML, JSON, XML или другом.

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

Например, Django несколько лет назад ввел наследование шаблонов как способ имитации классов, только для шаблонов:

{% extends "base.html" %}
{% block header%}
{% endblock}
{% block body%}
{% endblock}
{% block footer%}
{% endblock}

Это настолько эффективное решение, что многие движки шаблонов теперь поддерживают данную функцию по умолчанию.

Мы продолжаем разрабатывать сложные веб-приложения, поэтому становится все более важно разделять back-end и front-end логику, чтобы авторы и сторонние разработчики могли сотрудничать в рамках работы над компонентами сайта, не наступая друг другу на пятки.

Он необходим, когда вы разрешаете пользователям редактировать шаблоны (например, когда вебмастерам разрешено редактировать некоторые back-end шаблоны). Это не абсолютное требование, в каждом конкретном случае нужно принимать решение индивидуально. Установка для шаблона режима песочницы означает возможность ограничения того, что в нем можно сделать.

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

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

PHP-шаблонизатор Twig был написан Армином Ронахером из Jinja. Это один из популярных движков шаблонов. Несмотря на то, что Twig один из наиболее полнофункциональных PHP-шаблонов, он также и самый быстрый:

Некоторые из основных функций Twig:

  • Встроенное наследование шаблонов (шаблоны компилируются как классы).
  • Полностью автоматизированное экранирование (без связанных с этим временных затрат, происходящих в процессе компиляции).
  • Безопасный режим песочницы, который позволяет использовать Twig в качестве языка шаблонов для приложений, в которых пользователи могут изменять дизайн шаблона.
  • Отличная расширяемость: вы переопределяете все, даже основные функции, добавляя собственные теги и фильтры в качестве расширения. Перед компиляцией также можно манипулировать AST (абстрактным деревом синтаксиса). Используя эти возможности, даже можно создать собственный DSL (Domain Specific Language), предназначенный для вашего приложения.
  • Шаблонно-ориентированный синтаксис.
  • Функциональный – поддерживает множественное наследование, блоки, автоматическое выключение вывода и многое другое.
  • Понятные сообщения об ошибках.

В Smarty большое внимание уделяется шаблону, и меньшее коду. Он использует простой синтаксис {tag}, который разработан специально для представлений:

Smarty предоставляет крутой учебный курс, с которого можно начать изучение данного движка. Он компилирует копии шаблонов в виде скриптов PHP. Благодаря чему вы можете использовать преимущества синтаксиса тегов шаблонов и скорости PHP.

Компиляция выполняется один раз, когда шаблон вызывается впервые. Затем скомпилированные версии используются в дальнейшем. Таким образом, Smarty позаботился о том, чтобы дизайнер мог просто редактировать шаблоны, и ему не нужно было управлять скомпилированными версиями.

Smarty также использует концепцию песочницы.

В Smarty 3 было введено наследование. Используя наследование, можно легко управлять блоками.

Движок расширяет теги в шаблоне, используя значения, предоставленные в хеше или объекте. Мы называем это “logic-less”, потому что в нем нет операторов if, условий else или циклов for. Вместо этого есть только теги.

Простой, но мощный движок шаблонов Laravel. Но это не означает, что вы не можете использовать его с другими фреймворками.

Blade — это автономный компонент, и его можно использовать отдельно. Движок был выпущен в 2011 году. На сегодняшний день является одним из наиболее часто используемых.

В отличие от других популярных шаблонизаторов, Blade не ограничивается использованием простого PHP-кода в представлениях. Фактически, все представления Blade компилируются в простой PHP-код и хранятся в кэше, пока не будут изменены. Это означает, что Blade практически не добавляет служебные данные для вашего приложения.

Но основная проблема Blade — недостаточно обширная документация. В ней отсутствует много важных аспектов.

PHP-шаблонизатор Volt — это быстрый и удобный язык шаблонов, написанный на языке C для PHP. Volt тесно интегрирован с другими компонентами Phalcon. Но при этом его можно использовать в своих приложениях в качестве автономного компонента.

Главный недостаток Volt заключается в том, что его нельзя полностью отделить от Phalcon. Поэтому, если хотите использовать Volt с другими фреймворками, вам это не удастся. Вы можете вернуться к использованию движка шаблонов Twig, который, является самым близким к Volt языком, но в то же время полностью автономным.

Как и Twig и Smarty, Dwoo поддерживает наследование, что дает возможность легко переопределять значения шаблонов по умолчанию. Но, к сожалению, у Dwoo нет функции песочницы, и его ядро является ​​недостаточно гибким.

Ключевые особенности:

  • Быстрее, чем Smarty.
  • Гибкое создание плагинов.
  • Совместимость с синтаксисом Smarty с несколькими дополнениями и ярлыками для ускорения написания шаблонов.

Twig — это движок шаблонов, который можно легко адаптировать. Он многофункциональный, легко настраиваемый и прекрасно задокументирован. И если вы знаете другие шаблонизаторы PHP, то сможете легко начать работу с Twig, потому что его синтаксис похож на другие движки.

Данная публикация представляет собой перевод статьи «6 Best Template Engines in PHP [updated]» , подготовленной дружной командой проекта Интернет-технологии.ру

Ещё один php шаблонизатор / Habr

Хочу рассказать о своём шаблонизаторе для проектов на PHP.
Понимаю, что рискую быть обвинённым в изобретении велосипеда, поэтому объясню свои мотивы: Большинство шаблонизаторов меня не устраивают изначально, среди них Smarty, Quicky и все им подобные, причина — мне кажется, что шаблонизатор должен избавлять от использования логики в шаблонах, а не навязывать свой синтаксис для той же логики.
Иначе говоря, такой:
  1. {?$x = 2+2}
, или такой
  1. {foreach name=my from=array('One','Two','Three') key="i" item="text"}
подходы для меня абсолютно неприемлимы!
Пожалуй, из всех шаблонизаторов больше всех удовлетворяет моим требованиям xtemplate, но у него есть целый ряд недостатков которые меня раздражают, например то, что все страницы нужно обрамлять в блоки, или то, что он интерпретирует шаблоны, а не компилирует, благодаря чему скоростью похвастаться не может. Ну и последнее — я решил написать шаблонизатор так, чтобы не было никаких проблем с добавлением функционала, а также, чтобы он был совместим с нативным шаблонизатором, который я использовал до этого, и к которому привык. Дело в том что конструкция 
  1. $tpl->assigned_var='abc';
которую часто используют нативные шаблонизаторы, мне нравится гораздо больше чем что-нибудь вроде:
  1. $thl->assign('assigned_var','abc');
В один прекрасный момент я понял, что проще написать свой шаблонизатор, чем искать тот, который мне подойдет. И, думаю, оказался прав, ведь дело обошлось несколькими вечерами.
Вообще говоря, процесс мне показался довольно интересным, и появилось много моментов, которые хотелось бы обсудить с сообществом.

Начну с описания синтаксиса:


1) Переменные:

Тут всё как обычно, разве что никаких "{$"
Бизнес логика Шаблон
  1. $tpl->var_name='...';
  1. {var_name}
  1. $tpl->var_name['sub_var']='...';
  1. {var_name.sub_var}

2) Блоки:

Нужны они, чтобы избавиться от конструкций типа {foreach name=my from=array ('One','Two','Three') key=«i» item=»text"}
Наподобие xtpl, вот только слегка автоматизировано, а именно, чтобы распарсить блок (еще говорят растиражировать), достаточно просто передать шаблону массив с данными!
Бизнес логика Шаблон
  1. $tpl->block_name[]['num']='4';
  2. $tpl->block_name[]['num']='8';
  3. $tpl->block_name[]['num']='15';
  1. <!--begin:block_name-->
  2. {block_name.num}
  3. <!--end:block_name-->
  1. $tpl->words['block']=array(
  2.     O=>array('word'=>'A'),
  3.     1=>array('word'=>'B'),
  4.     2=>array('word'=>'C'),
  5. );
  1. <!--begin:words.block-->
  2. {words.block.word}
  3. <!--end:words.block-->
Чтобы вывести переменную блока внутри — нужно назвать её {имя_блока.имя_переменной}
Это позволяет обращаться как к переменным блока, так и ко внешним переменным изнутри
Блок может быть абсолютно любой переменной, например, на втором примере блок строится по элементу «block» массива «words»
Так же блок может быть внутри другого блока, вот, например, простой способ построить таблицу умножения:
Бизнес логика Шаблон
  1. for ($i=1; $i<10; $i++)
  2.     for ($j=1; $j<10; $j++)
  3.         $tpl->table[$i]['row'][$j]['num']=$i*$j;
  1. <table>
  2.     <!--begin:table-->
  3.     <tr>
  4.         <!--begin:table.row-->
  5.             <td>{table.row.num}</td>
  6.         <!--end:table.row-->
  7.     </tr>
  8.     <!--end:table-->
  9. </table>

3) Проверки:

По сути, разновидность блоков. Нужна она, чтобы на основе какой-нибудь переменной либо показывать то что внутри, либо нет. Понятнее станет на примере:
Бизнес логика Шаблон
  1. $tpl->f_text=true;
  1. <!--if:f_text-->
  2. Пока f_text==true мы будем видеть этот текст
  3. <!--end:f_text-->
  1. $tpl->f_text=false;
  1. <!--if:f_text-->
  2. Тут можно писать что угодно, потому что заказчик не увидит
  3. <!--end:f_text-->

4) Функции:

Это скорее экспериментальная фича, хотелось бы услышать мнение, имеет ли право на жизнь такой подход:
Файл tpl.class.php Шаблон
  1. function up($text) {
  2.     return strtoupper($text)
  3. }
  1. {up}текст который нужно сделать БОЛЬШИМ{/up}
Обращаю внимание, что функции следует добавлять именно в класс шаблонизатора.
На данный момент функции работают только с одним параметром, и я думаю как следует расширить количество параметров — так:
  1. {func(param2,param3)}param1{/func}
, или так:
  1. {func}param1|param2|param3{/func}
или как-то ещё. Пока склоняюсь к первому варианту, его проще реализовать!

Теперь о принципах:


Шаблонизатор я решил разделить на две части:

1) Сам шаблонизатор (максимально компактный, всё самое нужное)
2) Компилятор (а вот тут вот всё остальное)
Это необходимо для повышения производительности, ведь не имеет никакого смысла в 8 кб кода компилятора, если шаблон уже скомпилирован и с тех пор не менялся.

Много подумать заставил процесс инклуда внутри шаблонов:

На первый взгляд, момент может показаться пустяковым, но это не так. Вообще говоря, инклуды пришлось разделить на две части — статические и динамические. Статический инклуд — это обычный инклуд, например
  1. <!--include:some_page.html-->
Такой инклуд обработается следующим образом — на его места вставится код из some_page.html, время изменения у файла откомпилированного шаблона будет на 1 секунду больше чем у самого шаблона, и из этого шаблонизатор узнает что нужно подключить специальный, также созданный компилятором файл, в который будет добавлена следующая строчка:
  1. if (filemtime('./some_page.html') != 1237369507) $needCompile=true;
Таким образом, при изменении этого файла — весь шаблон будет перекомпилирован.
Зачем это нужно, почему не вставить просто инклуд? А что если потребуется выводить блок из 1000 строк, внутри которого для удобства будет вставлен инклуд? Тогда такой фокус очень существенно поможет производительности!
Теперь о другом типе инклудов — динамические. Выглядит это чудо в моём шаблонизаторе например вот так:
  1. <!--include:{page_name}.html-->
То есть мы инклудим не какой-нибудь заранее указанный файл, а берём его имя или часть имени из переменной! Иногда может быть очень удобно, но старый способ при таком подходе уже не прокатит, ведь нужно чтобы при изменении в бизнес логике переменной, инклудился уже другой файл, поэтому такая конструкция откомпилируется в следующий код:
  1. <?php $this->render(''.$this->page_name.'.html');?>
Замечу что на данный момент такой инклуд не будет работать внутри блока, то есть работать будет, но внутри подключённого файла переменные блока будут недоступны, но думаю это не очень страшно, ведь у меня в отличие от xtpl блоки нужны только для циклического вывода какого-нибудь массива.

Php код внутри:

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

Ну и, наконец, какими принципами я руководствовался решая, какой будет синтаксис:

1) Минимум логики, всю логику — бизнес логике
2) Всё как можно естественнее
3) Меньше кода
4) Максимум возможностей

Код самого шаблонизатора:

  1. <?php
  2. class tpl {
  3.     function tpl($tplDir,$tmpDir) {
  4.         $this->tplDir=$tplDir;
  5.         $this->tmpDir=$tmpDir;
  6.     }
  7.     function Render($Path) {
  8.         $tmpName='tpl_'.str_replace(array('/','\\'),'.',$Path).'.php';
  9.         $tmpPath=$this->tmpDir.'/'.$tmpName;
  10.         if (file_exists($tmpPath))
  11.             $tmpChange=filemtime($tmpPath);
  12.         $tplChange=filemtime($Path);
  13.         if ($tplChange+1==$tmpChange) include($tmpPath.'.coll.php');
  14.         elseif ($tplChange!=$tmpChange) $needCompile=true;
  15.         if ($needCompile) {
  16.             # Вызов компилятора
  17.             include_once 'tcompiler.class.php';
  18.             $compiler = new tcompiler($this,$this->tmpDir);
  19.             $compiler->compile($this->tplDir.'/'.$Path,$tmpPath);
  20.         }        
  21.         include $tmpPath;
  22.     }
  23. }
  24. ?>

Как видите, не густо, зато быстро!
На первый взгляд может показаться что такая автозамена:
  1. $tplName='tpl_'.str_replace(array('/','\\'),'.',$path).'.php';
Работает довольно долго и лучше использовать хэш, но я протестировал, хэш работает дольше.

Сравнение кода:

Решил в удобном виде привести листинги кода в разных шаблонизаторах делающих одно и тоже, чтобы можно быро сравнить читаемость и удобство подходов
Мой
  1. $tpl->num=4815162342;
  2. $tpl->post['page']['id']=316;
  3. for ($i=1; $i<30; $i++) $tpl->bin[]=array('dec'=>$i, 'bin'=>decbin($i));
  4. for ($i=1; $i<10; $i++) for ($j=1; $j<10; $j++) $tpl->table[$i]['row'][$j]['num']=$i*$j;
Smarty/Quicky
  1. $smarty->assign("num",4815162342);
  2. $smarty->assign("post",array('page'=>array('id'=>316)));
  3. for ($i=1; $i<30; $i++) $bin[]=array('dec'=>$i, 'bin'=>decbin($i));
  4. $smarty->assign("bin",$bin);
  5. for ($i=1; $i<10; $i++) for ($j=1; $j<10; $j++) $table[$i]['row'][$j]['num']=$i*$j;
  6. $smarty->assign("table",$table);
Xtemplate
  1. $xtpl->assign('num',4815162342);
  2. $post['page']['id']=316;
  3. $xtpl->assign('post',$post);
  4. for ($i=1; $i<30; $i++) $xtpl->insert_loop("page.bin",array("dec"=>$i,"bin"=>decbin($i)));
  5. for ($i=1; $i<10; $i++) {
  6.         for ($j=1; $j<10; $j++) $xtpl->insert_loop("page.table.row",'rownum',$i*$j);
  7.         $xtpl->parse("page.table");    
  8. }

Подключение:

Подключается шаблонизатор следующим образом:
  1. require_once 'путь_до_шаблонизатоора/tpl.class.php';
  2. $tpl=new tpl('путь_к_папке_с_шаблонами','путь_к_папке_с_кешем');
Не забудьте дать права папке с кешем!

Скачать:

Пока шаблонизатор лежит вот тут скачать, пока это только Бета-версия, поэтому не стоит тестить на серьёзных проектах, я лишь хотел выслушать замечания, и идеи на эту тему!
Если эксперемент удасться и подобный гибрид нативного и обычного шаблонизатора будет кому-то нужен, обязательно, буду его развивать. Кстати скорее всего он будет называться «LL».
По поводу багов просьба отписываться на olegemby.ru

Заключение:

В заключение не буду делать громких заявлений, вроде «В отдельных случаях данный шаблонизатор быстрее php native». Все мы понимаем, что в отдельных случаях трактор «Беларусь» может оказаться быстрее новенькой Porshe Panamera, в любом случае шаблонизатор будет медленнее, хотябы потому что ему нужно сравнивать даты изменения шаблона и его откомпилированной версии, а это два лишних обращения к ФС. Касатемо оптимизаций, никто не мешает оптимизировать и нативный код.
Разумеется, как и все шаблонизаторы, мой работает медленнее нативного php, но на самую малость, в доказательство привожу результаты тестов:

Все тесты проводил по несколько раз, дабы убедиться, что НЛО не повлияло на результаты. Если что выложил их сюда.

Настройка html шаблона

Настройка HTML шаблона

От автора: вы купили HTML-шаблон. Но прежде чем загружать его на сервер, необходимо его настроить. И вот проблема – вы почти не разбираетесь в коде и не уверены, как это сделать. Не волнуйтесь, в этой статье мы расскажем вам весь процесс настройки html шаблона.

Мы предполагаем, что вы ни разу в жизни не видели ни одной строки HTML кода, не говоря уже о его редактировании. Так что, неважно насколько вы новичок, мы вам расскажем, что делать на каждом этапе. Начнем с самого начала

Что такое HTML?

С технической точки зрения ответом на этот вопрос будет «Язык разметки гипертекста». Но так как нам нужно всего лишь настроить шаблон, то вы можете определить HTML как серию открывающихся и закрывающихся тегов, вот так:

Настройка HTML шаблона

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теги обозначаются символами < и >, а закрывающие теги всегда пишутся со знаком /. Между тегов расположен контент, вот так:

<h2>Джон Смитт, Front End разработчик</h2>

<h2>Джон Смитт, Front End разработчик</h2>

Но иногда встречаются и одинарные теги без закрывающей пары, как, например, этот тег:

Разные теги создают разный контент на веб-странице. Пример выше <h2></h2> создает крупный заголовок «Джон Смитт, Front End разработчик», а пример <img> отображает файл изображения «mypic.jpg». Чтобы редактировать HTML-шаблон вам необходимо знать, какой тег отвечает за ту часть страницы, которую вы хотите изменить, как найти его в коде, и как его отредактировать таким образом, чтобы он показывал то, что хотите вы.

Найдите себе редактор кода

Редактировать HTML код вполне можно и в Notepad или схожей программе, но обучение пройдет более гладко, если вы подберете себе подходящий редактор кода. Одна из главных причин – ваш код будет подсвечиваться разными цветами. Немного позже вы поймете, что так код намного легче читать и редактировать. Я рекомендую работать в Sublime Text. Загрузить его можно по ссылке: https://www.sublimetext.com/3

Загрузите и откройте ваш HTML-шаблон

Загрузите купленный вами шаблон – в уроке мы будем работать с Clean CV.

Настройка HTML шаблона

Большинство шаблонов запакованы в ZIP, поэтому вам придется их распаковать. Поройтесь в папках шаблона и найдите там index.html или index.htm. В нашем шаблоне CV файл index.html расположен в папке 01.html-website.

Настройка HTML шаблона

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

Определите часть кода которую хотите изменить

Если вы в первый раз редактируете шаблон, постарайтесь не сильно погружаться в настройку цвета шаблона. Для этого вам придется изучить CSS, язык, отвечающий за стили. Если вы новичок сосредоточьтесь на чем-то одном, и лучше всего начать с HTML. Для начала взгляните в Chrome на свой шаблон и определите, какие элементы и изображения вы хотите изменить. Можете составить список, чтобы вы шли по нему и вычеркивали пункты. В нашем шаблоне CV мы хотим исправить:

Имя

Профессию

Личное изображение

Ссылки на социальные сети

Контактную информацию

CV секции: «Профессиональный профиль», «Опыт работы», «Технические навыки» и «Образование»

Текст авторских прав

После того, как мы составили список изменений, мы можем найти соответствующие HTML теги в коде. Начнем с имени.

Найдите тег через инспектор

Кликните правой кнопкой мыши на имени «John Smith» и нажмите просмотреть код:

Настройка HTML шаблона

В браузере должна открыться такая панель:

Настройка HTML шаблона

С помощью этой панели мы можем смотреть код в интерактивном режиме. Наведите курсор мыши на строку с <h2>…</h2> (заголовок первого уровня), и секция с именем подсветится, как на скриншоте выше.

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

Теперь откройте тег h2, кликнув на маленький треугольник слева. Тег раскроется, и внутри вы увидите контент, т.е. John Smith <small>Front End Developer</small>.

Настройка HTML шаблона

Надпись совпадает с той, которую вы видите на экране, значит, вы правильно нашли код.

Отредактируйте тег в HTML

Теперь необходимо отредактировать HTML файл. Откройте файл index.html в Sublime Text. Вы увидите что-то типа:

Настройка HTML шаблона

Вам необходимо найти код, который вы видели в панели разработчика Chrome. Прокручивайте файл, пока не наткнетесь на этот код на строках 61-64.

Настройка HTML шаблона

Можно отредактировать контент между тегов и заменить имя и профессию на свои. Сперва, изменим имя John Smith:

Настройка HTML шаблона

Затем замените профессию в тегах small Front End Developer на свою.

Настройка HTML шаблона

Сохраните файл и обновите страницу в Chrome. Изменения должны вступить в силу:

Настройка HTML шаблона

Отредактируйте остальной контент

Теперь вы поняли основной процесс:

Инспектируете контент, который хотите изменить

Находите соответствующий тег

Находите эти теги в HTML файле

Редактируете код

Повторим данный процесс и отредактируем оставшиеся теги.

Добавляем свое изображение

Далее нам необходимо добавить свое изображение слева от имени и профессии. Правый клик мыши на изображении – просмотреть код – и находим соответствующий тег:

<img src="_content/140x140.png" alt="">

<img src="_content/140x140.png" alt="">

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

Настройка HTML шаблона

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Настройка HTML шаблона

Вернитесь в HTML файл и найдите этот тег на 59 строке:

Настройка HTML шаблона

В этом теге необходимо изменить значение атрибута src, который находится внутри тега img. Вам нужно заменить текст в кавычках, необходимо указать полный путь к вашему изображению. Создайте свое изображение размером 150px х 150px (не обращайте внимание, что старый файл 140×140.png, размер на самом деле 150х150). Переместите изображение в папку «_content», которая расположена в той же папке, что и индексный файл.

Настройка HTML шаблона

Теперь замените значение «140×140.png» атрибута src в HTML файле на полный путь к вашему файлу, который хранится в папке «_content». Проверьте правильность расширения, оно должно совпадать с вашим, т.е. «png» / «jpg»:

Настройка HTML шаблона

Сохраните файл, обновите страницу и вы увидите свое изображение:

Настройка HTML шаблона

Редактируем ссылки социальных сетей

Теперь давайте отредактируем ссылки социальных сетей в верхнем правом углу шаблона. Все как и раньше, кликаем правой кнопкой мыши на иконке, нажимаем просмотреть код. В окне находим строку, которая выше подсвеченной и видим, что в ней есть текст «facebook-icon». Мы используем этот текст для поиска кода в HTML файле.

Настройка HTML шаблона

Возвращаемся в Sublime Text, нажимаем CTRL + F и запускаем поиск по фразе «facebook-icon». Текст будет найден на строке 75.

Настройка HTML шаблона

Тег a на 75 строке создает ссылку для иконки, а атрибут href внутри тега a задает адрес для перехода. Необходимо заменить этот адрес на свой Facebook аккаунт (к примеру, https://www.facebook.com/mylink). Замените символ #, который пишется по умолчанию, на свой адрес. Затем проделайте то же самое для Twitter на строке 79, Google+ на строке 83 и LinkedIn на строке 87.

Настройка HTML шаблона

Если вы хотите удалить некоторые иконки социальных сетей, выделите их от тега <a> до закрывающего </a> и удалите этот код. Сохраните и обновите страницу. Теперь при клике на иконки вы будете переходить на правильные адреса.

Редактируем контактную информацию

Давайте отредактируем контактную информацию прямо под иконками социальных сетей. Начнем с инспектирования слова Email, чтобы мы могли определить расположение секции в коде. Обратите внимание на подсвеченную строку и на ту, которая под ней. По ним мы сможем найти секцию контактной информации в HTML коде.

Настройка HTML шаблона

В редакторе Sublime Text нажмите CTRL + F и вбейте в поисковую строку «Email». Необходимо найти слово «Email», которое будет окружено именно теми тегами, которые мы видели в инспекторе. Результат находится на строке 94. Подсвеченный адрес электронной почты по умолчанию [email protected] указан два раза:

Настройка HTML шаблона

Замените данные значения на свой адрес электронной почты. На следующей строке можно заменить номер телефона, а еще одной строкой ниже можно указать свой сайт:

Настройка HTML шаблона

Редактируем CV секции

Давайте перейдем к CV секциям шаблона. В шаблоне их несколько, мы проинспектируем каждую из них, чтобы вы знали, как найти их в коде. Также вы закрепите свои навыки передвижения по коду через инспектор. Прокрутите веб-страницу до секции Professional Profile, кликните правой кнопкой мыши по параграфу текста и просмотрите его код.

Настройка HTML шаблона

В инспекторе будет подсвечен тег p – с помощью этого тега можно создавать параграфы текста.

Настройка HTML шаблона

Теперь нам необходимо узнать, как выглядит вся CV секция, а не только сам параграф. Если в инспекторе кликнуть на одну строку выше параграфа, то вы увидите, что весь текст опять подсвечивается:

Настройка HTML шаблона

Это говорит нам, что каждая секция кода обернута в тег <div class=»cv-item»>…</div>. Div – сокращение от division (разделение), данный тег используется для контроля и стилизации макета. Теперь давайте проинспектируем заголовок секции Professional Profile:

Настройка HTML шаблона

Сперва вы увидите просто еще один набор div’ов, просто заголовок расположен внутри этого тега. Кликните по маленькому треугольнику слева для раскрытия кода. Делайте так до тех пор, пока не увидите текст «Professional Profile», который вы ищите. Текст будет обернут в теги h3, теги заголовка второго уровня:

Настройка HTML шаблона

Теперь мы знаем, как выглядит код CV секции и можем редактировать его через Sublime Text. Кликните в самой верхней части HTML документа, чтобы начать поиск с самого начала. Нажмите CTRL + F и вбейте «cv-item». Ищите, пока не встретите <div class=»cv-item»>. Этот код идет сразу после <h3>Professional Profile</h3>.

Настройка HTML шаблона

Теперь вы можете заменить текст Professional Profile на свой. Каждый параграф текста размещайте в тегах <p>…</p>. Когда закончите, проверьте, чтобы в открывающем теге последнего параграфа текста был атрибут class со значением last, вот так <p class=»last»>…..</p>. Данный класс прописан в файле стилей шаблона и нужен для правильной настройки отступа после секции.

Настройка HTML шаблона

Если теперь сохранить HTML документ и обновить страницу, то верхние две секции будут полностью обновлены.

Настройка HTML шаблона

Осталось отредактировать остальные секции точно так же, как и с секцией Professional Profile. Проинспектируйте каждую часть секции, чтобы знать, что искать в коде. Проинспектируем должность:

Настройка HTML шаблона

Период работы:

Настройка HTML шаблона

Маркированный список:

Настройка HTML шаблона

Проделайте все то же самое, что делали с секцией Professional Profile и измените оставшиеся секции. Чтобы отредактировать должность, период работы или маркированный список, найдите код, который вы видели в инспекторе. Все точно так же, как и раньше. Для создания параграфа используйте тег p. Так же как и с секцией Professional Profile, если секция заканчивается параграфом, добавьте class=»last» (<p class=»last»>…</p>). Замечание: Если вы хотите добавить новую CV секцию или удалить существующую, найдите полный код секции в инспекторе.

Настройка HTML шаблона

В этом примере вся секция находится в теге <div class=»cv-item»>…</div>. В коде вы можете найти весь блок и скопировать его, чтобы создать еще одну секцию или удалить существующую.

Настройка HTML шаблона

Редактируем текст авторских прав

После редактирования CV секций нам осталось изменить последний пункт в списке – текст авторских прав в футере. Мы будем использовать ту же тактику. Кликаем правой кнопкой мыши на тексте и просматриваем его код:

Настройка HTML шаблона

Затем находим нужный код в HTML файле и заменяем год на текущий, а имя на свое.

Настройка HTML шаблона

Вот и все!

Мы закончили! Только что вы полностью настроили HTML шаблон под свой контент. Надеюсь, в будущем вы будете чувствовать себя намного увереннее при редактировании кода. Может быть, наш шаблон был и прост, главное помните, что процесс редактирования всегда одинаков и не зависит от сложности шаблона. Просто инспектируйте шаблон и находите код той части, которую хотите изменить. Находите код в HTML файле и редактируйте его. Если во время редактирования вам встречаются неизвестные теги, пусть они не пугают вас. В сети полно информации, которая поможет вам запомнить, что каждый тег делает.

Автор: Kezz Bracey

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Настройка HTML шаблона

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Настройка HTML шаблона

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Урок 10. Верстаем шаблон

Представим, что у нас есть вот такой html шаблон. Он который сверстан табличным методом:

шапка сайта
меню контент
низ сайта

 Этот HTML шаблон имеет следующий код:


<html>

   <head>
        <title>CSS позиционирование</title>
   </head>

   <body>

     <table  border="1"
          align="center" cellspacing="0" cellpadding="10">

        <tr bgcolor="darkred">
            <td colspan="2">шапка сайта</td>
        </tr>

        <tr bgcolor="oldlace">
            <td >меню</td>
            <td>контент</td>
        </tr>

        <tr bgcolor="darkred">
            <td colspan="2">низ сайта</td>
        </tr>

    </table>

   </body>

</html>   

 Давайте сверстаем этот HTML шаблон с помощью CSS.

Визуально можно разделить страницу на четыре блока: шапка сайта, меню, контент и низ сайта. Пишем html-код страницы с четырьмя div-ами и каждому назначаем id:

 

<html>

   <head>
     <title>CSS позиционирование</title>
     <link rel="stylesheet" type="text/css" href="/style.css">
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>контент</div>
     <div>низ сайта</div>
   </body>

 </html>    

 

Заходим в таблицу стилей (style.css) и задаем свойства которые уже знаем (ширина, высота и фон каждого блока):

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
   

Смотрим на наш новый HTML шаблон:

 

Все элементы отображаются сверху вниз друг за другом, - это называется позиционированием в нормальном потоке. Для верстки нашего HTML шаблона нам это позиционированные не совсем подходит, давайте воспользуемся другими видами позиционирования, в CSS есть еще три вида позиционирования:

абсолютное
относительное
плавающая блоковая модель

Для определения позиционирования используется свойство position, имеет четыре значения:

static - блок позиционируется в нормальном потоке. Значение по умолчанию
relative - относительное позиционирование (относительно нормального потока)
absolute - абсолютное позиционирование
fixed - фиксированное позиционирование (фиксируется относительно области просмотра)

В этом уроке мы будем рассматривать абсолютное позиционирование:

При абсолютном позиционирование расположение блока на странице не зависит html-кода (в каком месте html-кода расположен этот блок). Расположение задается указанием, в каком месте экрана отобразить данный блок. В этом нам помогают четыре свойства:

left - указывает на сколько надо сместить блок относительно левого края окна
right - указывает на сколько надо сместить блок относительно правого края окна
top - указывает на сколько надо сместить блок относительно верхнего края окна
bottom - указывает на сколько надо сместить блок относительно нижнего края окна

Вернемся к нашему HTML шаблону. Блоки header, menu и footer расположены там где и должны быть, поэтому пусть позиционируются в нормальном потоке. Блок content нужно расположить в другом месте, поэтому указываем свойство position: absolute и задаем смещение: от левого края окна на ширину блока menu, а от верхнего края окна на высоту блока header.

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
  position:absolute;
  left:190px;
  top:100px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}    

Блок встал не совсем так, как задумывалось. Произошло это так как: у браузеров есть свои, встроенные таблицы стилей. Если мы не задаем свойство, то браузер использует свойство по умолчанию.

По умолчанию для элемента body определены поля, которые мы не учли. Чтобы выровнять блок в нашем HTML шаблоне, достаточно задать для body собственные значения margin:0px:

body{
  margin:0px;
}

Проверяем:

Главное, что необходимо запомнить: при абсолютном позиционировании смещения происходит относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может бывает и по-другому.

Представьте, мы решили добавить блок новостей и разместить его в блоке контента:

В html-страницу в div мы добавим div:

 

<html>

   <head>
     <title>css potision</title>
     <link rel="stylesheet" type="text/css" href="/style.css">
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>
       контент
       <div>блок новостей</div>
     </div>
     <div>низ сайта</div>
   </body>

 </html>    

 

В таблице стилей смещение будем указывать относительно блока content:

#news{
  background:yellow;
  width:150px;
  height:280px;
  position:absolute;
  left:365px;
  top:10px;
}   

Ширина блока content 525px, а ширина news - 150px. Следовательно, смещение от левого края равно (525-150) 375px, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365px. Аналогично рассчитываем смещение от верхнего края.

На этом мы закончим, в следующем уроке будем изучать остальные схемы позиционирования.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *