9.07.13, 11:01
0 комментарий
  Уроки

Как адаптировать простой html шаблон под DLE

И так в данной теме я вам попробую объяснить как адаптировать простые html шаблоны под Datalife Engine.

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

И так с чего мы начнем:

1. В первую очередь мы начнем с основного, копируем все содержимое в шаблон DLE, в моем случае это Site.ru/templates/gemini/, копируем файлы и папки в таком порядке каком они лежать у вас в оригинале, все кроме index.html.

2. Сам index.html открываем и чистим шаблон - удалим все не нужные нам ссылки.

3. Далее открываем файл main.tpl в папке с дизайном DLE (допустим это шаблон Gemini) и вставляем в него весь html код который мы скопируем в файле index.html вашего шаблона.

4. После того как мы скопировали весь код в main.tpl, файл index.html мы можем закрыть и думаю он нам больше не пригодится. В main.tpl после строки HEAD удаляем все meta строки а так же строку title и вставляем на их место тег {headers}, этот тег выводит заголовок страницы TITLE а так же все meta

5. Не забываем добавить перед строкой style.css строку engine.css

6. После тега BODY вставляем тег {AJAX}, таким образом мы подключим все скрипты в том числе jquery

7. Далее в main.tpl мы ищем контент, в каждом случае он бывает разный зависимо от шаблона и что то определенного я посоветовать не смогу, здесь вам придется самому изучать код вашего шаблона. Но для примера я покажу на своем шаблоне.

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

Поэтому я не трогал div id="site_content". После того как вы скопировали код, вставьте его в shrtstory.tpl и fullstory.tpl, а в main.tpl замените эти строки тегами {info} выводящий ошибки или информацию, и тег {content} отвечающий за контент.

8. Заходим в файл shortstory.tpl и в нужных местах вставляем тег [full-link]{title}[/full-link] это ссылка на полную новость. Там где должен выводится текст вставляем {short-story}, данный тег будет выводить для нас короткое описание новости.

В файле fullstory.tpl вносим следующие изменения: в нужном месте вставляем {title}, и {full-story}, этот тег выводит у нас полную новость.

Ну и последний основной файл который стоило бы отредактировать это static.tpl, там мы вставляем {description} выводит описание статической страницы, {static} выводит текст статической страницы, {pages} Навигация по нескольким страницам одной статической страницы.

Ну и весь список тегов можно найти на официальном сайта dle-news

В общем то основная работа выполнена, осталось поправить путь к скриптам, изображениям и стилям. Что мы для этого будем делать: Ищем для начала строки стилей /css/style.css и заменяем в них путь к самому стилю добавляю тег /templates/RuScript, в итоге получится должно что то вроде /templates/RuScript/css/style.css и так поступаем со всеми скриптами и изображениями, /templates/RuScript это у нас путь к папке с вашим дизайном, /style/ это папка где лежит стиль, у каждого она своя, style.css конечный файл.

Так же проверьте ваш style.css, возможно в стилях указан немного не тот путь что нам нужен будет в работе, открываем style.css ищем любое изображение в нем и смотрим путь, если он у вас в виде (images/images.png) это не верно, добавляем перед images.png две точки, и слэш, в итоге это будет выглядеть так (../images/images.png) обратите внимание что каждый шаблон в своем роде уникален и путь к изображению может быть разным.шаблоны для dle 11.2

Напишите своё мнение