DLE – создание и разработка шаблонов. С чего начать

dle startup create template - DLE - создание и разработка  шаблонов. С чего начать

Наконец-то сдвинулась с мертвого места и эта статья, которая планировалась еще в середине мая, а сейчас – начало октября. Данная статья – подробное описание того, как из html исходника создается полноценный шаблон для dle.

Официальный мануал по DLE:
http://dle-news.ru/extras/online/index.html

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

Шаблон dle находится всего в одном файле – main.tpl и в него подключаются остальные модули:

  • короткие новости – shortstory.tpl;
  • полные новости – fullstory.tpl
  • прочие мелке модули;

Подключаются они легко. Например, форма логин-пароль подключается в шаблон всего одним словом: {lоgin} в нужном месте файла main.tpl. По факту происходит следующее: в ядре движка прописано, что вместо этого спец тега подставлять в это место login.tpl

Удобно? Как по мне, то даже очень и так со всеми примерами, например, {tag}, но зачастую вместо целого файла в такие вот теги выводятся какие-то параметры из базы данных, например:

  • дата написания статьи;
  • ее категория;
  • количество комментариев;
  • просмотров;
  • прочее;

Верстка каркаса в main.tpl

Открываем данный файл и чистим все, пока не получим код, как на скриншоте ниже

dle carcas main tpl - DLE - создание и разработка  шаблонов. С чего начать
Структура шаблона main.tpl

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

Подключение сторонних скриптов

В head нужно подключить наши скрипты – css, js и прочее, но обязательным условием является тег {THEME}

Важно! JQuery библиотеки подключать не нужно. Они уже есть в стандартной комплектации!

<link href="{THEME}/1style.css" rel="stylesheet" type="text/css" />

Дизайн

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

dle sozdanie shablona 3 - DLE - создание и разработка  шаблонов. С чего начать
Простая сетка для шаблона main.tpl

Подключение дополнительных, необязательных модулей (логин, топ новостей, голосования, архивы, календарь и прочее) я описывать не буду. Об этом читайте в мануале по ссылке в начале статьи.

Верстка shortstory.tpl и fullstory.tpl

Тот код, который мы не вставили в main.tpl нужно поместить сюда. Опять же, весь контент и все данные, которые берутся из базы данных выводятся на специальных тегах в фигурных скобках, а html разметка используется только как каркас.

dle shortstory - DLE - создание и разработка  шаблонов. С чего начать
Верстка файлов shortstory.tpl и fullstory.tpl
dle shortstory2 - DLE - создание и разработка  шаблонов. С чего начать
Пример вывод шаблонов shortstory.tpl и fullstory.tpl на верстке выше

Это две одинаковые картинки. На первой — исходный код, а на второй — вывод данных, взятых из базы данных и подставленных вместо спец. тегов. Заголовок, дата, категория и остальное это чисто условность, пример, по которому следует ориентироваться.

Fullstory.tpl

  • Берем файл из дефолтного шаблона;
  • Очищаем весь код и оставляем только спец. теги;
  • Идем на официальную базу и читаем о возможностях данного файла;
  • Проворачиваем у себя в голове полученную информацию и строим свою страницу полных новостей;

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

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


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

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