Относительно недавно я писал о том, . И там я сказал, что для HTML-кода надо создавать специальные файлы-шаблоны, которые имеют расширение tpl . Однако, один из моих посетителей попросил меня поподробнее рассказать о том, как использовать файлы tpl . И в этой статье я постараюсь подробно рассказать о том, зачем нужны файлы tpl , как их использовать, и приведу небольшой пример.
Файлы tpl используются для написания в них HTML-кода , который впоследствии будет "вытащен" PHP и выведен пользователю на конкретных страницах. Например, в файле tpl может быть форма регистрации. То есть просто HTML-код обычной формы, ничего больше. В другом файле tpl может быть блок с панелью пользователя. В этой панели идёт "Приветствие пользователя " по имени, различные ссылки на редактирование профиля, а также кнопка выхода. Это всё примеры, где регулярно используются файлы tpl .
Однако, есть один очень важный нюанс. Рассмотрим поподробнее файл tpl с панелью пользователя . Я написал, что там идёт приветствие пользователя по имени. Но файл один, а пользователей очень много (следовательно, и имён много). Глупо создавать для каждого пользователя отдельный файл, где жёстко прописано его имя. Поэтому в файлах tpl используются специальные элементы - шаблонизаторы. Они записываются примерно в таком виде: {username} . Давайте приведу пример файла tpl , где используется шаблонизатор {username} (пусть файл называется user_panel.tpl ):
Как видите, никаких <html >, <head > и <body > здесь нет. Только тот HTML-код , который отвечает за панель пользователя.
Теперь напишем PHP-код , который этот tpl-файл обрабатывает:
$username = "Пётр"; //Разумеется, это имя Вы должны сначала откуда-то взять, например, из базы данных
$user_panel = file_get_contents("user_panel.tpl");
$user_panel = str_replace("{username}", $username, $user_panel);
echo $user_panel;
?>
Как видите, всё очень и очень легко. Мы здесь получили содержимое файла user_panel.tpl , а затем с помощью функции PHP str_replace() заменили {username} на конкретное имя пользователя.
Это основа, которую необходимо знать для использования tpl-файлов . Далее Вы должны теперь понять, что страница будет собираться по кирпичикам, выводя все tpl-файлы в нужном порядке. Главное преимущество такого подхода, что разделяется программная часть и дизайнерская, благодаря чему становится крайне легко изменять дизайн и код PHP независимо друг от друга.
Статья поможет пользователям, которые еще довольно мало знакомы с шаблонами Dle и tpl файлов в частности. Статья поможет разобраться в чем их основное предназначение и как с ними работать.
Люди которые хорошо знакомы и не очень с HTML и CSS легко освоят работу с файлами шаблона dle.
Итак начнем в состоящий из шаблонов с расширением *.tpl есть стандартные и обязательные файлы шаблонов, которые должны там присутствовать. При отсутствии одного из файла система будет сообщать о ошибке
, в некоторых случаях интернет-портал не будет работать совсем.
Подробно о каждом файле шаблона DataLife Engine
addcomments.tpl - Форма для добавления комментариев только в полной новости.
addnews.tpl - Форма для добавления публикации на веб-ресурс, для заполнения данных о новости: заголовок, категорию новости, короткую и полную новость, поля для облака тегов и различные администраторские функции.
comments.tpl - Отвечает за оформление комментариев, как в полной публикации так и последние комментарии.
feedback.tpl - Основное оформление формы обратной связи с поля заполнения.
fullstory.tpl - Шаблон файл оформление полной новости, дату публикации, автор, количество комментариев, вывод похожих новостей и т.д.
info.tpl - Форма сообщения страницы ошибки на веб-ресурсе, выходит например при неправильной авторизации.
informer.tpl - Файл оформления вывода информера (партнеров или например новости Яндекс и т.д.) на блоге.
login.tpl - Основной файл оформления формы Авторизации, Админ панели
lostpassword.tpl - Форма восстановления (при потери) пароля, выводится только для не авторизованных пользователей.
main.tpl - Основной файл оформления главной страницы вывода информации блога DLE, к которому подключаются остальные шаблоны.
navigation.tpl - Шаблон оформления перехода по страницам, постраничная навигация.
offline.tpl - Страница отключенного сайта при технических работах, если необходимо провести глобальные изменения на веб-проекте. Будет виден всем кроме администрации интернет источника.
pm.tpl - Форма оформления Отправки, Входящих и Отправленных сообщений на интернет-портале дле, отвечает за оформление личных сообщений пользователя.
preview.tpl - Настройки оформления стилей CSS для окна предварительного просмотра при добавлении новости, в которую входит оформление для короткой и полной новости.
print.tpl - Страницы Распечатки для принтера.
profile_popup.tpl - Всплывающее модальное окно при включенном AJAX скрипте, которое выходит при выборе логина пользователя мышкой. Отвечает за оформление POP - Up окна с краткой информацией о пользователе.
registration.tpl
- Форма регистрации нового пользователя после принятия правил выдает анкету с полями для заполнения и регистрации.
ПС.Правила интернет-портала находятся в статической странице, и не присутствуют в данном шаблоне.
relatednews.tpl - Форма оформления Вывод похожих новостей.
search.tpl - Выводит страницу простого поиска по веб-ресурсу, куда входит поле для заполнения и кнопки Поиск и Расширенный поиск.
searchresult.tpl - Форма оформления результата поиска, а также при выборе Расширенный поиск выводит поля для заполнения.
shortstory.tpl -Важный шаблон осуществляет оформление короткой новости.
speedbar.tpl - Данный файл выводит полную ссылку на категорию в которой опубликована новость, и отвечает за быстрый переход в нужный раздел (хлебные крошки).
static.tpl - Данный файл шаблона отвечает за оформление и вывод статических страниц созданных в админ панели Dle.
static_print.tpl - Применяется для оформления статической страницы Версия для печати
stats.tpl - Оформление Статистики веб-ресурса, с выводом всей информации.
tagscloud.tpl - Шаблон оформления облака тегов.
topnews.tpl - Применяется для оформления популярных новостей.
userinfo.tpl - Форма оформления профиля информации о пользователи, а также POP - Up окном для последующего редактирования данных, открывается если пользователь зарегистрирован на веб-проекте.
vote.tpl - Используется оформления вывода результатов голосований, как Все опросы на DLE или Всего проголосовало.
На данный момент перечислены основные tpl файлы шаблона Dle, с выходом новых версий возможны изменения и добавления новых шаблонов TPL для движка DataLife Engine .
Помимо основных шаблонов TPL в DLE, любой пользователь может добавить свои, для удобного оформления, улучшения и установки сторонних модулей на веб-проект!
Для этого создается сам шаблон например:
leftblocks.tpl (левый блок веб-проекта) в который добавляются элементы оформления.
Внимание! Для нормальной работы файл должен находится в папке с основными шаблонами там же где и main.tpl!
Для подключения такого блока используется тег {include} Например:
Который вставляется в нужном месте main.tpl
{include file="leftblocks.tpl"}
Помимо такой вставки есть ещё вариант подключения коротких новостей с помощью шаблонов например:
shortstory-1.tpl Короткая новость в который добавляются элементы оформления. Пример вставки:
{title}
В main.tpl вставляем тег с настройками:
{custom category="2,3" template="shortstory-1" aviable="global" from="0" limit="5" cache="yes"}
В результате если вставить такую вставку например: в правый блок, появится ссылка и title последних новостей категории 2 и 3 как на нашем сайте сайт раздел Новости "Модули ДЛЕ " и т.д., где
custom category="2,3" (категории из которых берется новость можно добавить ещё через запятую)
template="shortstory-1" (название шаблона)
aviable="global" (глобально для всех, можно установить main вместо global будет только на главной выводится информация)
from="0"
limit="5" (количество публикаций)
cache="yes" (Включить/Выключить кеширование)
Также в шаблонах присутствую стандартные папки:
bbcodes (Папка с файлами картинок для редактирования таких как Смайлов, HTML цвета и BBcodes)
dleimages (Папка с файлами картинок для оформления рейтинга, закладок, водяного знака и т.д.)
images ((Папка с файлами изображений для оформления шаблона. может иметь разное название)
js (Папка с файлами скриптов JS и т.д.)
style (Папка с файлами каскадов стилей для оформления шаблонов)
Внимание!
Скрипты обязательно должны находиться в папке JS ,в котором должен быть файл.htaccess для защиты от разного рода угроз, если такого файла не будет скрипт не запустится (сработает система защиты Dle).
Внимание!
Во всех папках шаблона также должен быть файл.htaccess
Пример файла.htaccess с данными внутри:
Order Deny,AllowAllow from all
Внимание!
В шаблоне там же где main.tpl должен быть файл.htaccess С таким кодом:
Order allow,denyDeny from all
Файл.htaccess можно скачать из шаблона дистрибутива движка DataLife Engine
О многих других возможностях читайте в документации к движку Documentation/readme.chm
Там есть информация о каждом теге и многое другое!
Например: Подключение самих модулей (голосование, авторизация, полной и короткой новости и др.) осуществляется в файлах tpl по средствам специальных тегов. Чтобы подключить модуль голосования, к примеру следует вписать тег {poll}, который будет выводить голосование в дополнительном шаблоне tpl, а все оформление голосование будет храниться в tpl файле голосования, то есть в poll.tpl.
- Расширение (формат) - это символы в конце файла после последней точки.- Компьютер определяет тип файла именно по расширению.
- По умолчанию Windows не показывает расширения имен файлов.
- В имени файла и расширении нельзя использовать некоторые символы.
- Не все форматы имеют отношение к одной и той же программе.
- Ниже находятся все программы с помощью которых можно открыть файл TPL.
Bluefish – мощная программа для программирования и веб-разработки. Имеет множество функций для разработки сайтов, скриптов а так же программных кодов. Программа работает на большой скорости, может загрузить сотни файлов в считанные секунды. Без каких либо проблем откроет более 500+ документов одновременно. Есть очень полезные функции, как хороший поиск по файлам а так же без лимитные функции «Отмена» и «Повтор». Автоматическое восстановление при незапланированном выключение. Интеграция внешних программ и внешних фильтров. Поддержка языка, а именно справочная информация онлайн. Программа в разработке, но уже поддерживает 17 язык...
Komodo Edit - удобный редактор кода, поддерживающий широкий спектр различных языков программирования. Программа дает пользователям возможность работать сразу с несколькими файлами, писать код станет более эффективно с использованием функции автозаполнения, подсказок. Приложение позволяет автоматически выделять переменные при их выборе. С помощью редактора можно просматривать файлы на других программных языках. Программа поддерживает окраску синтаксиса, отступы. Может проверять параметры синтаксиса, сниппеты, используемые для хранения кода исходного столбца. Имеет режим простого редактирования и поддерживает перетаскивание элеме...
В интернете очень много программ, позволяющих редактировать исходный код другой программы, файла и др. Однако большинство из подобных программ являются всего лишь текстовым редактором наподобие блокнота. Отличаются они от вышеуказанного редактора лишь тем, что имеют подсветку синтаксиса. Однако в некоторых случаях, такого функционала программы оказывается недостаточно. Программисту бывает необходимо быстро находить различные части документа. И вот, наконец-то, в появилась программа, позволяющая решить эту проблему. Программа называется SynWrite. Её отличительная особенность – наличие навигационной панели с деревом, котор...
Проще всего делать шаблоны на основе уже сверстанных в HTML статических страниц. Рассмотрим создание и подключение шаблона на примере. Допустим, уже есть HTML-файл такого содержания:
<html > <head > <meta name="description" content= /> <meta name="keywords" content= /> <title > title > <link href="style.css" rel="stylesheet" type="text/css" /> head > <body > // начало меню <table border="1" > <tr > <td > <a href="/" > <b > Главнаяb > a > td > tr > <tr > <td > <a href="/about/" > Обо мнеa > td > tr > <tr > <td > <a href="/me_and_me/" > Я и мировое господствоa > td > tr > <tr > <td > <a href="/contacts/" > Контактыa > td > tr > table > // конец меню <h1 > Главная страницаh1 > <p > p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > body > html >Для того, чтобы добавить шаблон в CMS, нужно создать файл в директории tpls/content , например, test.tpl , и вставить туда ваш HTML-код. CSS-файл следует положить в папку css/cms и назвать style.css . Изображения желательно положить в папку images . Не забудьте поменять пути ко всем изображениям и CSS-файлам.
Замечание
В названии файла шаблона нельзя использовать русские буквы!
Чтобы система «увидела » новый шаблон и начала использовать его для вывода страниц, шаблон необходимо добавить в систему. Для этого следует зайти в настройки модуля «Структура », вкладка «Шаблоны » (http://yourdomain.ru/admin/content/config/ ). Вы увидите список уже установленных шаблонов в каждом домене, которые существуют в выбранной языковой версии.
Чтобы подключить новый файл шаблона, заполните в самой нижней свободной строке поля «Название шаблона » (дайте ему какое-нибудь осмысленное название, например «Мой тестовый шаблон ») и «Имя файла » (в нашем случае, test.tpl) и нажмите кнопку «Сохранить ».
Если вы хотите, чтобы этот шаблон использовался в качестве шаблона по умолчанию, поставьте напротив него отметку «Основной ». Теперь этот шаблон будет выбран по умолчанию в выпадающем списке выбора шаблонов. Так же он будет использоваться для вывода системных страниц, которые используют шаблон по умолчанию (Регистрация, Восстановление пароля, Карта сайта).
Шаблоны будут видны в выпадающем списке при редактировании каждой страницы:
Таким образом, на одном сайте можно одновременно использовать много шаблонов, выбирая подходящий шаблон как для отдельной страницы, так и для группы страниц.
Попробуйте создать новую страницу (убедитесь, что в опции «Шаблон дизайна » выбран новый шаблон) и посмотрите, что получилось на сайте.
На сайте должен появиться ваш HTML-шаблон. Но сейчас он статический. Теперь вам надо сделать его динамическим.
Для начала надо определить, какие части HTML-кода будут изменяться. В нашем случае изменяться будут:
заголовок окна
мета-теги keywords и description;
заголовок текста
;
собственно текст;
меню сайта.
Значит, предстоит немного поработать с HTML-шаблоном и вместо изменяющихся участков поставить соответствующие макросы.
Например, в начале HTML-файла заданы мета-теги и тайтл:
<meta name="description" content="описание сайта Василия Пупкина" /> <meta name="keywords" content="Вася Василий Пупкин официальный сайт" /> <title > Сайт Васи Пупкина: Главная страницаtitle >Заменяем их на соответствующие макросы (список макросов дан в приложении):
<meta name="description" content="%description%" /> <meta name="keywords" content="%keywords%" /> <title > %title%title >Теперь система при формировании страниц будет брать мета-теги и тайтл, прописанные для каждой страницы индивидуально, и подставлять их вместо соответствующих макросов. Названия макросов запомнить очень просто.
Аналогично поступим с заголовком текста. Было так:
<h1 > Главная страницаh1 >А станет так. Заголовок текста выводится макросом %header%:
<h1 > %header%h1 >Основной текст страницы тоже изменяется:
<p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p > <p > Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: p >Для вывода основного текста страницы есть макрос %content% :
%content%В начало файла между тегами
и вставляем макрос:Эта строчка подключает функцию быстрого редактирования и другие полезные возможности. При помощи нее вы сможете, нажав Shift +D , быстро перейти к правке текущей страницы сайта или каких-либо ее фрагментов.
В итоге должно получиться следующее:
<html > <head > <meta name="description" content="%description%" /> <meta name="keywords" content="%keywords%" /> <title > %title%title > <link href="style.css" rel="stylesheet" type="text/css" /> %system includeQuickEditJs()% head > <body > // начало меню <table border="1" > <tr > <td > <a href="/" > <b > Главнаяb > a > td > tr > <tr > <td > <a href="/about/" > О компанииa > td > tr > <tr > <td > <a href="/projects/" > Проектыa > td > tr > <tr > <td > <a href="/contacts/" > Контактыa > td > tr > table > // конец меню <h1 > %header%h1 > %content% body > html >Итак, мы сохраняем файл шаблона и смотрим на результат. Теперь страница практически полностью динамическая, за исключением меню. Предстоит «оживить » меню сайта. Посмотрим как сверстано меню:
// начало меню <table border="1" > <tr > <td > <a href="/" > <b > Главнаяb > a > td > tr > <tr > <td > <a href="/about/" > Обо мнеa > td > tr > <tr > <td > <a href="/me_and_me/" > Я и мировое господствоa > td > tr > <tr > <td > <a href="/contacts/" > Контактыa > td > tr > table > // конец менюМеню состоит из пунктов. Само меню как-то оформлено, и у пунктов тоже есть оформление. Например, у всего меню может быть некая рамка или фон, текущий пункт меню может быть выделен жирным и т.п. Также в одном меню могут быть разные уровни.
Выделим обрамление меню:
// начало меню <table border="1" > table > // конец менюПункт меню оформлен так:
<tr > <td > <a href="/contacts/" > Контактыa > td > tr >Текущий пункт меню оформлен по-другому:
<tr > <td > <a href="/" > <b > Главнаяb > a > td > tr >Исходный шаблон меню находится в файле /tpls/content/menu/default.tpl и выглядит так:
%text%