DLE – разработка шаблона на дополнительных полях

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

Преимущества доп. полей в DLE

• множество блоков с индивидуальной стилизацией;
• упрощенное создание новости;
• удобство и простоту;

Далее на примере скриншота выше разберем конструкцию и технические особенности страницы fullstory.tpl, выполненной с применением дополнительных полей.

Разработка шаблона

Для начала следует определиться с функционалом будущей страницы и блоками, которые планируется размещать в обход стандартного редактора {full-story}. В случае со страницей выше, применялись следующие блоки и поля с индивидуальной конфигурацией.

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

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

Создание доп. полей

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

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

Изображение

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

Размер изображения в данном случае особую роль не играет т.к. будет стилизован на CSS.

Картинка в примере выше получила название fullimage, для вывода которой в шаблоне нужно подставить обязательную приставку [xfvalue_fullimage]

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

Выводим картинку в шаблон

Открываем файлы: {THEME}/fullstory.tpl и {THEME}/shortstory.tpl и там, где планируется вывод картинки прописываем строку:

<img src="[xfvalue_fullimage]" align=""/>

Далее на стилях css редактируем и подправляем под себя. Пример кода полной и короткой новости со скриншота выше:

<article class="post">
	[full-link]
	<div class="post-title">{title}</div>

	<div class ="post-meta"><strong>Раздел: </strong>{link-category}  

	<figure class="post-image">
		<img src="[xfvalue_fullimage]"/>
	</figure>

	<div class="post-content">
		{short-story}
	</div>
	
	<p>Просмотров: <b>{views}</b> {favorites}  <b>Скачать</b></p>
	
	[/full-link]
</article>

Остальные блоки

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

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

• характеристики программы;
• описание программы;
• системные требования;
• скриншоты;
• ссылки на скачивание;

Они все, за исключением скриншотов и ссылок на скачивание, практически идентичны и отличаются лишь стилизацией CSS. Исходник:

<article class="post">
	[full-link]
	<div class="post-title">{title}</div>

	<div class ="post-meta"><strong>Раздел: </strong>{link-category}  
	
	<!-- field -->
	<figure class="post-image">
		<img src="[xfvalue_fullimage]"/>
	</figure>

	<!-- field -->
	<div class="post-description">
		[xfvalue_descripte]
	</div>

	<!-- field -->
	<h2>Описание программы:</h2>
	<div class="post-content">
		{full-story}
	</div>
	
	<!-- field -->
	<h2>Минимальные требования:</h2>
	<div class="post-power">
		[xfvalue_fullpower]
	</div>

	<!-- field -->
	<h2>Скриншоты:</h2>
	<div class="post-screenshots">
		[xfvalue_fullscreens]
	</div>

	<!-- static -->
	<div class="post-ads">
		<!-- advertise -->
	</div>

	<!-- field -->
	<h2>Скачать </h2>
	<div class="post-load">
		[xfgiven_ofsiteload]<a href="[xfvalue_ofsiteload]"target=_blank>Скачать {title} с официального сайта</a><br/>[/xfgiven_ofsiteload]

		[xfgiven_rutrackerload]<a href="[xfvalue_rutrackerload]"target=_blank> Скачать {title} с RuTracker.org </a><br/>[/xfgiven_rutrackerload]

		[xfgiven_rutorload]<a href="[xfvalue_rutorload]"target=_blank>Скачать {title} с Rutor.org </a>[/xfgiven_rutorload]
	</div>

	<p>Просмотров: <b>{views}</b> {favorites}  <b>Скачать</b></p>
	
	[/full-link]
</article>

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

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

xfgiven применяется в случае, когда поля могут быть пустыми. Если обвернуть например блок со скриншотами вот так:

[xfgiven_fullscreens]
<h2>Скриншоты:</h2>
<div class="post-screenshots">
	[xfvalue_fullscreens]
</div>
[/xfgiven_fullscreens]

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

Дополнительно по теме

Картинки из дополнительных полей в похожие новости related-news

Новости в две колонки полностью на css