Skip to content

Latest commit

 

History

History
526 lines (425 loc) · 24.4 KB

examples.md

File metadata and controls

526 lines (425 loc) · 24.4 KB
Raw

Примеры использования модуля

Допполя

Заменяем громоздкую конструкцию стандартного вывода допполей

Пример демонстрирует простоту использования условий вывода данных из допполей. Стандартными средствами такого результата не достичь.

Более подробно про условия вывода в шаблонизаторе fenom.

{*
	Заменяем громоздкую конструкцию стандартного вывода допполей:
	<a href="[xfgiven_profile-1][xfvalue_profile-1][/xfgiven_profile-1]">
    [xfgiven_name-1][xfvalue_name-1][/xfgiven_name-1]
    </a> 

    И дополним её "плюшками"
*}

{*Пробегаем по массиву с новостями*}
{foreach $list as $key => $el}

	{* Проверяем есть ли какой-то контент в требуемых полях  "profile-1" и "name-1" *}
	{if $el.xfields['profile-1'] && $el.xfields['name-1']}
		{* Если оба поля заполнены выведем ссылку *}
		<a href="{$el.xfields['profile-1']}">{$el.xfields['name-1']}</a>
	{elseif $el.xfields['profile-1'] && !$el.xfields['name-1']}
		{* Если заполено  только поле "profile-1" выведем просто текст *}
		{$el.xfields['name-1']}
	{else}
		{* В остальных случаях выведем текст "Поле не заполнено" *}
		Поле не заполнено
	{/if}

{foreachelse}
	{*Если новостей нет - выведем информацию об этом*}
	<p>Новостей нет</p>
{/foreach}

Как уменьшить картинку, если она лежит в допполе в виде ссылки

Пример демонстрирует способ, которым легко можно уменьшить картинку, лежащую в допполе в виде ссылки.

Информация о шаблонном теге set

{* Устанавливаем картинку-заглушку *}
{set $noimage}
	{* 
        В данном примере оно и не особо нужно 
        т.к. картинка у нас в любом случае будет,
        но всё же... 
    *}
	{$theme}/blockpro/noimage.png
{/set}

{*Пробегаем по массиву с новостями*}
{foreach $list as $key => $el}

    {* Определяем переменную, в которой будет картинка *}
	{set $image}
		{if $el.xfields['image']}

            {* Если в допполе есть ссылка на картинку - подставим её *}
			<img src="{$el.xfields['image']}">
		{else}

            {* Если ссылки нет, подставим заглушку *}
			<img src="{$theme}/blockpro/noimage.png">
		{/if}
	{/set}

    {* А теперь работаем с полученной картинкой *}
	<img src="{$image|image:$noimage:'small':'1':'250x150':'':'':true:false}" alt="{$el.title}">
{/foreach}

Как вывести допполе в виде перекрёстных ссылок

Пример демонстрирует способ, которым можно вывести данные из допполя в виде перекрёстных ссылок.

{* Выводим допполе-перекрёстные ссылки *}

{*Пробегаем по массиву с новостями*}
{foreach $list as $el}	
	{if $el.xfields.link!} {* https://github.com/fenom-template/fenom/blob/964f20a9148f2b218087b2126dbe4ef62eb709df/docs/ru/operators.md#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B-%D0%BF%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B8 *}
		{* Для начала разобъём строку с текстом допполя (поле и имененм link) на массив *}
		{set $arField = $el.xfields.link|split} {* https://github.com/fenom-template/fenom/blob/8ce6779119c098562d2bafba9167fbb4e2a222be/docs/ru/mods/split.md *}
		{* Пробежимся по полученному массиву *}
		{foreach $arField as $k=>$link}
			{* И завёрём каждый элемент массива в ссылку *}
			{set $links[$k]|strip} {* https://github.com/fenom-template/fenom/blob/8ce6779119c098562d2bafba9167fbb4e2a222be/docs/ru/mods/strip.md *}
				<a href="/xfsearch/{$link|escape:'url'}">{$link}</a> {* https://github.com/fenom-template/fenom/blob/8ce6779119c098562d2bafba9167fbb4e2a222be/docs/ru/mods/escape.md *}
			{/set} 
		{/foreach}
		{* Выведем сформированные перекрестные ссылки через запятую, или через любой другой символ по вашему желаню *}
		{$links|join:', '} {* https://github.com/fenom-template/fenom/blob/8ce6779119c098562d2bafba9167fbb4e2a222be/docs/ru/mods/join.md *}
		{* Ну и не забываем удалить созданные переменные на случай, если в других новостях такоых нет *}
		{unset $links $arField}

	{/if}
{/foreach}

Как вывести изображение из нового типа допполя "Загружаемое изображение" после обновления на DLE11

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

{* 
	Как вывести изображение из нового типа допполя "Загружаемое изображение" после обновления на DLE11.
*}

{* Устанавливаем картинку-заглушку *}
{set $noimage}
	{$theme}/blockpro/noimage.png
{/set}

{foreach $list as $el}
	<p>{$el.title}</p>
	{if $el.xfields.image!}
		{* Если есть картинка в допполе *}
		{if $el.xfields.image|match:"\/uploads\/"} {* https://github.com/fenom-template/fenom/blob/master/docs/ru/mods/match.md *}
			{* 
				Если в допполе есть ссылка на картинку вида http://site.ru/uploads/...
				значит это старые картинки, берём как есть.
			*}
			{set $image = $el.xfields.image}
		{else}
			{* 
				Если uploads нам не попалось, значит это допполе типа "загружаемая картинка", 
				нужно подставить путь от корня сайта т.к. новые допполя записываются по новому.
			*}
			{set $image = "/uploads/posts/{$el.xfields.image}"}
		{/if}

		{* Создаём картинку, т.к. модулю нужна именно она *}
		{set $imageTag}
			<img src="{$image}">
		{/set}

		{* Теперь можно выводить уменьшенную картинку *}
		<img src="{$imageTag|image:$noimage:'small':'1':'250x150':'':'':true:false}" alt="{$el.title}">
	{/if}
{/foreach}

Как вывести галерею изображений из нового допполя типа галерея

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

{*Определение картинки-заглушки*}
{var $noimage}{$theme}/blockpro/noimage.png{/var}

{foreach $list as $el}
	{* 
		Если допполе содержит симвлы, отличные от букв, 
		то лучше использовать обращение к нему вот так: $el.xfields['my-gallery'],
		потому, что  $el.xfields.my-gallery - выдаст ошибку
	*}
	{* Если допполе заполнено — работаем *}
	{if $el.xfields.gallery!}

		{* 
			Первым делом превратим список картинок в массив
			https://github.com/fenom-template/fenom/blob/master/docs/ru/mods/split.md
		*}
		{set $gallery = $el.xfields.gallery|split}

		{* Определим пустой массв, куда будем складывать картинки галереи *}
		{set $elGallery = []}

		{* Пробегаемся по полученному массиву необработанных картинок *}
		{foreach $gallery as $image index = $index}
			{*
				Выведем только три первыых картинки из галлереи ($index начинается с нуля).
				Если нужно вывесли все картинки — просто убираем условие с проверкой.
			*}
			{if $index > 2}
				{continue}
			{/if}

			{* Создаём картинку, т.к. модулю нужна именно она *}
			{set $imageTag}
				<img src="/uploads/posts/{$image}">
			{/set}

			{* Выводим картинку *}
			<img src="{$imageTag|image:$noimage:'small':'1':'150x200':'80':'':true:false}" alt="{$el.title}">
		{/foreach}
	{/if}
{/foreach}

Карусель

Слайдер из BlockPro и owlCarousel

Пример демонстрирует способ использования модуля для организации слайдера из новостей с использованием плагина owlCarousel.

{* 
    Подключение стилей и скрипта можно вынести в main.tpl
    Подробнее про плагин owlCarousel https://owlcarousel2.github.io/OwlCarousel2/
*}

<link rel="stylesheet" href="[owlcarousel_dir]/owl.carousel.min.css">
<link rel="stylesheet" href="[owlcarousel_dir]/owl.theme.default.min.css">
<script src="[owlcarousel_dir]/owl.carousel.min.js"></script>
<script>
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
    });
</script>

{* Устанавливаем картинку-заглушку *}
{set $noimage}
    {$theme}/blockpro/owl/250x150.png
{/set}

<div class="owl-carousel">
    {*Пробегаем по массиву с новостями*}
    {foreach $list as $key => $el}
        <div class="carousel-item">
            <img src="{$el.short_story|image:$noimage:'small':'1':'250x150':'':'':true:false:'owl'}" alt="{$el.title}">
        </div>
    {/foreach}
</div>

Редактирование новостей

Как реализовать возможность редактирования новостей из BlockPro

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

<ul class="topnews">
	{foreach $list as $el}
		<li>
		{if $el.allow_edit} 
			<span {$el.editOnclick}>редактировать</span>
		{/if}
			<a href="{$el.url}" title="{$el.title}">{$el.title}</a>
		</li>
	{/foreach}
</ul>

Условия для категорий

Как выводить данные в зависимости от категории

Пример демонстрирует способ, которым возможно выводить контент в зависимости от того, к какой категории принадлежит новость.

{* Пробегаем по массиву с новостями *}
{foreach $list as $key => $el}

	{* Превращаем категорию новости в массив *}
	{set $catIds = $el.category|split}

	{* 8 - ID категории, которую требуется проверить *}
	{if 8 in list $catIds}
		{* Если новость принадлежит категории 8 - выведем текст *}
		<p>Я новость из категории 8</p>
	{/if}

	{* 15 - ID категории, которую требуется проверить *}
	{if 15 not in list $catIds}
		{* Если новость НЕ принадлежит категории 15 - выведем текст *}
		<p>Я не из 15 категории</p>
	{/if}
{/foreach}

Автор новости

Как вывести информацию об авторе новости

Пример демонстрирует способ, которым можно вывести любую информацию об авторе новости непосредственно в шаблоне модуля.

{*
	$block_id - это уникальный идентификатор блока (у блоков с разными настройками он разный) для того,
	что бы правильно организовать постраничную навигацию на ajax.
*}
<div id="{$block_id}">
	{* Массив с логинами авторов новостей *}
	{set $users = []}
	{* Заполняем массив логинами *}
	{foreach $list as $key => $el}
		{set $users[] = $el.autor}
	{/foreach}	
	{* Получаем нужные данные из таблицы пользователей *}
	{* 
		Первым параметром модификатор принимает массив с логинами пользователей.
		Вторым параметром поля, которые требуется вернуть, чем больше полей, 
		тем тяжелее запрос, не забывайте. 
		Если второй параметр не указать — будут возвращены все данные о пользователе, кроме пароля.

		На выходе получим массив, ключами которого являются логины, а значениями — массив данных о пользователе.
		Это сделано для экономии ресурсов сервера, 
		ведь на странице может быть несколько новостей одного автора и не имеет смысл дёргать одного автора несколько раз.
	*}
	{set $arUsers = $users|getAuthors:'email, user_id, news_num, comm_num, foto'}

	{* Удалем ненужную переменную *}
	{unset $users}

	{*Пробегаем по массиву с новостями*}
	{foreach $list as $key => $el}
		<p>{$el.title}</p>
		{* 
			Выводим информацию об авторе новости в каждой новости
			Нам заранее известен логин пользователя и известно,
			что логин является ключом, поэтому будем обращаться к массиву, 
			полученных ранее пользователей, по ключу.
		*}
		<p>email: {$arUsers[$el.autor].email}</p>
		<p>user_id: {$arUsers[$el.autor].user_id}</p>
		<p>news_num: {$arUsers[$el.autor].news_num}</p>
		<p>comm_num: {$arUsers[$el.autor].comm_num}</p>
		<p>foto: {$arUsers[$el.autor].foto}</p>
	{/foreach}

	{$pages}
</div> <!-- #{$block_id} -->

Как вывести ссылку на автора новости

Пример демонстрирует способ, которым можно вывести ссылку на автора новости с возможностью просмотра профиля в попап-окошке.

{* Формируем ссылку на автора новости с посмотром попап-профиля *}

{*Пробегаем по массиву с новостями*}
{foreach $list as $el}	
	{set $urlUser = $el.autor|escape:'url'} {* https://github.com/fenom-template/fenom/blob/8ce6779119c098562d2bafba9167fbb4e2a222be/docs/ru/mods/escape.md *}
	<a href="/user/{$urlUser}" onclick="ShowProfile('{$urlUser}', '/user/{$urlUser}/', '1'); return false;">{$el.autor}</a>
{/foreach}

Группировка новостей

Как вывести новости с группировкой по дням

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

{* Пример вывода новостей с группировкой по дням *}

{* Определяем пустой массив для сгруппированных новостей *}
{set $groupList = []}

{* 
	Пробегаем по существующему массиву с новостями и 
	собираем новый массив, группируя его по нужному параметру
*}
{foreach $list as $key=>$item}
	{* Для начала определим параметр группировки *}
	{* 
		В даном случаи это дата новости в формате [год][номер месяца][число месяца],
		это будет ключ будущего нового массива, 
		таким образом новости сгруппируются по дням
	*}
	{set $groupKey = $item.date|dateformat:'Ymd'}

	{* Теперь определим название (заголовок) группы на основе даты*}
	{* 
		Если приведение текущего unix времени к формату [год][номер месяца][число месяца] 
		равно дате новости — значит название группы будет "Сегодня" 
	*}
	{if $groupKey == $.php.time()|date_format:"%Y%m%d"} {* https://goo.gl/QrL5N7 *}
		{set $groupName = $lang.time_heute}

	{* 
		Если приведение текущего unix времени к формату [год][номер месяца][число месяца], 
		за вычетом одного дня равно дате новости — значит название группы будет "Вчера"  
	*}
	{elseif $groupKey == ($.php.time()-86400)|date_format:"%Y%m%d"}
		{set $groupName = $lang.time_gestern}

	{* В противном случае название группы будет равно дате в формате дд.мм.гггг *}
	{else}
		{set $groupName = $item.date|dateformat:'d.m.Y'}
	{/if}

	{* Теперь соберём элементы нового массива с новостями  *}

	{set $groupList[$groupKey]['name'] = $groupName}
	{set $groupList[$groupKey]['news'][] = $item}

{/foreach}
{* Больше этот массив с новостями нам не нужен, удалим его из памяти *}
{unset $list}

{* Для проверки результата операции можно воспользоваться модификатором dump *}
{* <pre><code>{$groupList|dump}</code></pre> *}

{* Теперь можно пройтись по новому массиву новостей и вывести результаты *}
{foreach $groupList as $group}
	{* Выводим название группы *}
	<h2>{$group.name}</h2>
	<hr>
	{* Выводим новости группы *}
	<div class="group-news">
		{* 
			Т.к. массив с новостями группы хранится в $group.news, 
			то и цикл будет именно по $group.news, а не по $group 
		*}
		{foreach $group.news as $el}
			{* Тут уже работаем как с обычной новостью *}
			<div class="group-news-item">
				<h4>{$el.title}</h4>
				<i>Опубликовано в: {$el.date|dateformat:'H:i'}</i>
				<p>{$el.short_story|limit:'200'}</p>
			</div>
		{/foreach}
	</div>
{/foreach}

Модификатор ematch_all

Как использовать модификатор ematch_all

Модификатор ematch_all является аналогом php-функции preg_match_all и предназначен прежде всего для вывода в шаблоне информации, на основе совпадения с регулярным выражением. На примере ниже можно видеть конкретный пример применения этого модификатора.

{* 
   Пример демонстрирует работу модификатора ematch_all в модуле BlockPro
   показано как можно посчитать количество картинок в новости.
*}

{foreach $list as $key => $el}
	{* Счётчик гифок *}
	{set $totalGifs = 0}

	{* Счётчик остальных картинок *}
	{set $otherImages = 0}

	{* Получаем картинки *}
	{set $images = $el.short_story|ematch_all:'/<img(?:\\s[^<>]*?)?\\bsrc\\s*=\\s*(?|"([^"]*)"|\'([^\']*)\'|([^<>\'"\\s]*))[^<>]*>/i'}

	{* Для вывода результатов работы модификатора можно использовать конструкцию: *}
	{* <pre>{$images|dump}</pre>  *}


	{* Если нашлась хоть одна картинка — работаем *}
	{if $images[1]|length}
		{* Пробегаем по картинкам *}
		{foreach $images[1] as $image}
			{* Если спойлер или смайлик — пропускаем *}
			{if ('dleimages' in $image) || ('engine/data/emoticons' in $image)}
				{continue}
			{/if}

			{set $imgInfo = $image|pathinfo}

			{if $imgInfo.extension == 'gif'}
				{* Если гифка — добавим счётчик гифок *}
				{set $totalGifs = $totalGifs + 1}
			{else}
				{* Если дугая картинка — добавим счётчик других картинок *}
				{set $otherImages = $otherImages + 1}
			{/if}
		{/foreach}
	{/if}

	{* Выводим информацию *}
	<p>
		В новости <b><a href="{$el.url}">{$el.title}</a></b>
		{$totalGifs} {$totalGifs|declination:'гиф|ка|ки|ок'}, 
		а так же 
		{$otherImages} {$otherImages|declination:'|другая картинка|других картинки|других картинок'} 
	</p>

{/foreach}

Многостраничный блок

Как построить многостраничный топ новостей с нумерацией

Пример демонстрирует способ, которым можно реализовать многостраничные нумерованные списки. Бывает полезно при построении топов новостей.

{* 
	Пример демонстрирует способ, которым можно реализовать многостраничные нумерованные списки.
	Бывает полезно при построении топов новостей.
*}

<div id="{$block_id}">

	{$pages}

	{* 
		Вычисляем коэффициент, который необходимо прибавить для каждой страницы постраничной навигации,
		если мы находимся на второй или следующей страницах.

		Для этого будем использовать служебный тег $cfg http://bp.pafnuty.name/documentation/#cfg

		- pageNum содержит номер текущей страницы
		- limit содержит количество новостей, выводимых на одной странице
	*}

	{set $delta = ($cfg.pageNum > 1) ? $cfg.pageNum * $cfg.limit - $cfg.limit  : 0}


	{*
		Пробегаем по массиву с новостями
		для вывода порядкового номера новости используем index=$index
		https://github.com/fenom-template/fenom/blob/master/docs/ru/tags/foreach.md
	*}

	{foreach $list as $el index = $index}

		{* 
			Определяем переменную, которая будет выводить позицию новости.
			Т.к. $index всегда начинается с нуля - прибавляем единичку.
		*}

		{set $i = $index + 1 + $delta}

		<h2>
			<small>{$i} — </small>
			{$el.title}
		</h2>

	{/foreach}
</div> <!-- #{$block_id} -->