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

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

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

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

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

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

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

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

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

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

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

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

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

DLE — список дополнительных полей
DLE — список дополнительных полей

Изображение

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

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

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

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

DLE — основная картинка через дополнительное поле
DLE — основная картинка через дополнительное поле

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

Открываем файлы: {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

Читайте также

Похожие записи

DLE — быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...
DLE — мой первый модуль, как написать свой модуль Datalife Engine
Как ни пытался уйти с DLE из-за того, что он платный, а на рынке существует куча бесплатных аналогов, не получается...
DLE на HTTPS — основные проблемы и их решение
Столкнулся с рядом проблем, когда наконец-то решился перебраться на https. Не появлялись некоторые картинки, видео, а в адресной строке писалось,...
DLE — Модуль форума SimpleBB 1.1
Полноценный форум с единой регистрацией и авторизацией, единым акаунтом и ссылками на профиль от dle \"user/username/\" на движке SimpleBB 1.1...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

  1. @Abhishek пишет:
    26.07.2013 в 11:33

    Great inhtsgi. Relieved I'm on the same side as you.

  2. @viktor6 пишет:
    24.10.2014 в 17:34

    как добавить эту статью в закладки

  3. @devarts пишет:
    24.10.2014 в 18:25

    Цитата: viktor6
    как добавить эту статью в закладки


    Сейчас добавлю такую возможность.

    Над похожими новостями, где выводятся все просмотры, комментарии и т.д. "+" зеленый появился)

  4. @viktor6 пишет:
    24.10.2014 в 22:42

    Цитата: artemmian
    Цитата: viktor6
    как добавить эту статью в закладки


    Сейчас добавлю такую возможность.

    Над похожими новостями, где выводятся все просмотры, комментарии и т.д. "+" зеленый появился)

    Спасиб работает.

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

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