Как адаптировать простой html шаблон под DLE
Что нам для этого нужно, для начала качаем сам архив 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 мы ищем контент, в каждом случае он бывает разный зависимо от шаблона и что то определенного я посоветовать не смогу, здесь вам придется самому изучать код вашего шаблона. Но для примера я покажу на своем шаблоне.
Поэтому я не трогал div id="site_content". После того как вы скопировали код, вставьте его в shrtstory.tpl и fullstory.tpl, а в main.tpl замените эти строки тегами {info} выводящий ошибки или информацию, и тег {content} отвечающий за контент.
8. Заходим в файл shortstory.tpl и в нужных местах вставляем тег [full-link]{title}[/full-link] это ссылка на полную новость. Там где должен выводится текст вставляем {short-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) обратите внимание что каждый шаблон в своем роде уникален и путь к изображению может быть разным.
Автор: BlackSand
Источник: BlackSand.ru
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) обратите внимание что каждый шаблон в своем роде уникален и путь к изображению может быть разным.
Автор: BlackSand
Источник: BlackSand.ru
Комментариев 0