Вкусности версии 1.8.2
Posted: Tue Sep 07, 2010 11:45 pm
Порадовала возможность использовать возможности шаблонизатора в css. А именно товый тэг {cms_stylesheet}.
Но в анонсе не упомянуто, что помимо простых assign можно использовать вызовы модулей... Только единственное НО: в шаблонах этих модулей вместо {...} нужно использовать [[...]].
Чем это хорошо:
Например, я использовал это для создания менюшек с картинками - спрайтами.
Как работает:
Временно сайт располагается здесь: http://licey40.nnov.ru/
Если перенесут - сообщу...
Как это можно было реализовать раньше:
1 способ (старый):
Создать картинки с названием по шаблону, например, menu_{content_id|conent_alias}_{on|off}
В шаблоне меню прописать вызов этой картинки - благо в нодах есть и id и alias.
Сделать скрипт, который меняет картинки при наведении и активности
2 способ (без скрипта):
Использовать то-же самое, только в шаблоне меню вместо картинок прописать классы. А в таблице стилей для каждого пункта прописать свой стиль...
При этом, если нужно добавить новый пункт - необходимо править стиль.
3 способ.
Как второй, но на странице 2 раза вызывать модуль меню. Первый раз - чтобы в заголовке прописать стили в , а второй - непосредственно меню.
Подробнее о текущей реализации (для левого меню, например):
1. В шаблоне страницы добавляем дополнительное поле (именно в коментариях - места не много, а assign в content_image - я не нашел (может плохо искал)). При этом - картинки на странице не будет, а в исходнике места не много займет... Можно сделать и перехватом контента {capture}, тогда и в исходнике не будет картинки:
2. в папку /uploads/template/images/menu закачиваем картинки
3. Создаем страницы с содержимым как обычно, только выбираем из списка картинку для меню.
4. Создаем шаблон меню, например:
Самое интересное здесь - class="{$node->alias}" - тоесть для каждого пункта будет прописан уникальный класс, и этот класс уже привязан к конкретной странице. Чтобы точно не пересечь существующий класс с каким-нть альясом можно добавить префикс, например, class="menu_{$node->alias}"
Ну а как пользовать спрайты - кто незнает - посмотрите сами...
5. Вызываем меню с данным шаблоном в шаблоне страницы.
6. Пишем пользовательский тег, для того, чтобы достать путь к картинке (назовем, например, R_node - я уже писал о нем раньше, здесь сокращенный вариант):
6. Создаем новый шаблон меню (назовем, например, Left_css) следующего содержания:
Вот то, о чем я говорил:
во-первых - мы вместо фигурных скобок используем двойные квадратные;
во-вторых - привязка осуществляется по классу - нет необходимости где-то дополнительно ее протаскивать - и при смене альяса - ничего не перестанет работать;
в-третьих - мы получаем картинку, привязаную к данной странице - тоесть, если нужно поменять картинку - можно в любой момент времени только выбрать другую при редактировании страницы, и все - ни стилей, ни классов - ничего менять дополнительно не нужно;
в четвертых - как указано в замечании к новому тегу - сам стиль сохраняется в папке кэша, поэтому нужно писать путь относительно корня: url(/[[$R_node.MenuImage]]) либо путь относительно данной папки...
7. Ну и самое последнее - вызываем меню в таблице стилей с новым шаблоном:
Вобщем-то все...
Еще раз повторю плюсы данного метода:
1. стили остаются в таблице стилей, а не прописываются на странице
2. Добавление нового пункта сводится к закачке картинки и выборе ее из списка
3. При необходимости поменять картинку - достаточно закачать другую и выбрать ее из списка.
4. Нет необходимости придумывать привязки названий стилей и картинок...
ПС... Я описал только ключевые моменты, которые, теоретически, можно использовать по отдельности... Если кому-то что-то поможет - буду рад, если будут вопросы - задавайте, найдете ошибку - сообщайте (пишу почти в 4 часа ночи
)...
Но в анонсе не упомянуто, что помимо простых assign можно использовать вызовы модулей... Только единственное НО: в шаблонах этих модулей вместо {...} нужно использовать [[...]].
Чем это хорошо:
Например, я использовал это для создания менюшек с картинками - спрайтами.
Как работает:
Временно сайт располагается здесь: http://licey40.nnov.ru/
Если перенесут - сообщу...
Как это можно было реализовать раньше:
1 способ (старый):
Создать картинки с названием по шаблону, например, menu_{content_id|conent_alias}_{on|off}
В шаблоне меню прописать вызов этой картинки - благо в нодах есть и id и alias.
Сделать скрипт, который меняет картинки при наведении и активности
2 способ (без скрипта):
Использовать то-же самое, только в шаблоне меню вместо картинок прописать классы. А в таблице стилей для каждого пункта прописать свой стиль...
При этом, если нужно добавить новый пункт - необходимо править стиль.
3 способ.
Как второй, но на странице 2 раза вызывать модуль меню. Первый раз - чтобы в заголовке прописать стили в , а второй - непосредственно меню.
Подробнее о текущей реализации (для левого меню, например):
1. В шаблоне страницы добавляем дополнительное поле (именно в коментариях - места не много, а assign в content_image - я не нашел (может плохо искал)). При этом - картинки на странице не будет, а в исходнике места не много займет... Можно сделать и перехватом контента {capture}, тогда и в исходнике не будет картинки:
Code: Select all
<!-- {content_image block="MenuImage" dir="template/images/menu"} -->3. Создаем страницы с содержимым как обычно, только выбираем из списка картинку для меню.
4. Создаем шаблон меню, например:
Code: Select all
<ul>
{foreach from=$nodelist item=node}
<li{if $node->parent||$node->current} class="active"{/if}>
<a href="{$node->url}" class="{$node->alias}"><span></span></a>
</li>
{/foreach}
</ul>
Ну а как пользовать спрайты - кто незнает - посмотрите сами...
5. Вызываем меню с данным шаблоном в шаблоне страницы.
6. Пишем пользовательский тег, для того, чтобы достать путь к картинке (назовем, например, R_node - я уже писал о нем раньше, здесь сокращенный вариант):
Code: Select all
global $gCms;
$pg = ContentOperations::LoadContentFromAlias($params['page']);
$smarty = &$gCms->GetSmarty();
$smarty->assign('R_node', array(
'MenuImage' => $pg->mProperties->mPropertyValues['MenuImage'],
));
Code: Select all
[[foreach from=$nodelist item=node]]
[[R_node page=$node->alias]]
.[[$node->alias]] span
{
background: url(/[[$R_node.MenuImage]]) center top no-repeat;
}
[[/foreach]]
во-первых - мы вместо фигурных скобок используем двойные квадратные;
во-вторых - привязка осуществляется по классу - нет необходимости где-то дополнительно ее протаскивать - и при смене альяса - ничего не перестанет работать;
в-третьих - мы получаем картинку, привязаную к данной странице - тоесть, если нужно поменять картинку - можно в любой момент времени только выбрать другую при редактировании страницы, и все - ни стилей, ни классов - ничего менять дополнительно не нужно;
в четвертых - как указано в замечании к новому тегу - сам стиль сохраняется в папке кэша, поэтому нужно писать путь относительно корня: url(/[[$R_node.MenuImage]]) либо путь относительно данной папки...
7. Ну и самое последнее - вызываем меню в таблице стилей с новым шаблоном:
Code: Select all
[[menu template="Left_css"]]
Еще раз повторю плюсы данного метода:
1. стили остаются в таблице стилей, а не прописываются на странице
2. Добавление нового пункта сводится к закачке картинки и выборе ее из списка
3. При необходимости поменять картинку - достаточно закачать другую и выбрать ее из списка.
4. Нет необходимости придумывать привязки названий стилей и картинок...
ПС... Я описал только ключевые моменты, которые, теоретически, можно использовать по отдельности... Если кому-то что-то поможет - буду рад, если будут вопросы - задавайте, найдете ошибку - сообщайте (пишу почти в 4 часа ночи
)...