Шаблоны
Документация по плагину шаблоны для DLE.
Все шаблоны расположены по пути engine/inc/maharder/admin/templates и engine/inc/maharder/_templates/ваш_модуль. Для оформления используется шаблонизатор Twig с некоторыми дополнениями.
Структура
📦templates
┣ 📂templateIncludes
┃ ┣ 📜addCheckbox.html
┃ ┣ 📜addInput.html
┃ ┣ 📜addSelect.html
┃ ┣ 📜addTextarea.html
┃ ┣ 📜boxes.html
┃ ┣ 📜loader.html
┃ ┗ 📜segRow.html
┣ 📂_macros
┃ ┣ 📜checkbox.twig
┃ ┣ 📜input.twig
┃ ┣ 📜menu.twig
┃ ┣ 📜pagination.twig
┃ ┣ 📜search.twig
┃ ┣ 📜select.twig
┃ ┗ 📜textarea.twig
┣ 📜base.html
┣ 📜breadcrumb.html
┣ 📜footer.html
┣ 📜menu.html
┗ 📜sidebar.htmlОсновное
base.html
Основной файл, который отвечает за всё подключение всех стилей и скриптов.
Блоки:
| Название | Описание |
|---|---|
| title | Блок заголовка |
| content | Блок основного содержимого |
| scripts | Блок содержимого дополнительных скриптов |
breadcrumb.html
Автоматическая генерация хлебных крошек
footer.html
Вывод подвала, а так-же генерация ссылок
menu.html
Вывод верхнего меню
sidebar.html
Вывод бокового меню для маленьких экранов
Подключение шаблонов
Все подключения находятся в папке engine/inc/maharder/admin/templates/templateIncludes.
- Для общего блага и простоты использование рекомендуется использовать макросы
- Все элементы выводятся через шаблон
engine/inc/maharder/admin/templates/templateIncludes/segRow.html
boxes.html
Важный объект для создания табов.
Пример использования:
<div class="ui segment">
{{ include('templateIncludes/boxes.html', {
boxes: {
main: {
link: '#',
name: 'Основные настройки',
icon: 'home icon'
},
cron: {
link: '#',
name: 'Настройки крона',
icon: 'clock outline icon'
},
telegram: {
link: '#',
name: 'Настройка бота',
icon: 'universal access icon'
},
templates: {
link: '#',
name: 'Шаблоны',
icon: 'pencil alternate icon'
},
}
})
}}
</div>Параметры:
{{ include('templateIncludes/boxes.html', {
boxes: {
id: {
link: '#',
name: 'Название',
icon: 'Класс'
}
}
})
}}Важным параметром является свойство boxes. Он перенимает объект в виде массива ссылок. Каждый элемент ссылки содержит четыре главных атрибута.
- id - Универсальный индикатор, который будет так-же установлен у сегмента или блока. У первого блока обязательно должен быть класс .active.
- id.link - Если указывается как часть табов, то нужно указывать #. Если же нужна ссылка в прямом смысле этого слова, то указывайте ссылку
- id.name - Название таба
- id.icon - Название класса иконки
Сегменты выглядят примерно так:
<form class="ui form segment">
<div class="ui bottom attached tab active" data-tab="main"></div>
<div class="ui bottom attached tab" data-tab="cron"></div>
<div class="ui bottom attached tab" data-tab="telegram"></div>
</form>segRow.html
Рекомендуется использовать лишь тогда, когда нет альтернативы или возможности вывести доп. информацию
Пример использования:
{{ include('templateIncludes/segRow.html', {
id: 'cron_descr',
name: 'Настройка крона',
descr: "Если вы не сильны в crontab и не знаете как правильно настроить всё - данная функция для вас",
html: 'Если у вас нет доступа к крону или SSH, то выполняем этот скрипт: <a href="' ~ dle_config.http_home_url ~ 'cron.php?cronmode=telegram" target="_blank">cron.php?cronmode=telegram</a><br>Если же вы всётаки его имеете, то выполните этот запрос <kbd>crontab -e</kbd> и в самый низ вставьте следующую строчку:<br><kbd>* * * * * /usr/bin/php -f ' ~document_root~ '/cron.php telegram</kbd><br>Простой генератор для крона можно увидеть тут: <a href="https://www.crontabgenerator.com" target="_blank">http://www.crontabgenerator.com</a><br>Замените <kbd>/usr/bin/php</kbd> на путь вашего интерпретатора. Если не знаете где он лежит, то узнаете это с помощью <kbd>which php</kbd>'
})
}}Параметры:
{{ include('templateIncludes/segRow.html', {
type: type,
id: id,
name: name,
descr: descr,
html: html,
})
}}Рекомендуются именно эти параметры для вывода дополнительной информации в сегмент отображения данных.
| Параметр | Описание |
|---|---|
| type | Тип строки, для простого текста достаточно указать html |
| id | Уникальное значение строки |
| name | Название строки |
| descr | Описание строки |
| html | Произвольная информация |
Макросы
Функционал, который помогает в оформлении шаблонов, особенно с рекурсивными значениями.
- Намерено для них было использование расширение twig, чтобы отличить от вставок
- Рекомендуется использовать именно макросы, нежели вставки шаблонов из
templateIncludes
checkbox.twig
Выводит переключатель
Метод подключения:
{% from "_macros/checkbox.twig" import checkbox %}Использование:
{{ checkbox('onof', 'Включить модуль?', 'Включает/Выключает модуль', settings) }}Параметры:
macro checkbox(id, name, descr, opts)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название кнопки |
| descr | Описание кнопки |
| opts | Объект с настройками плагина |
input.twig
Выводит форму простого заполнения текста
Содержит:
- input - Простой и обычный текстовой ввод
- tags - Текстовой ввод с поддержкой тегов
- number - Численный ввод
- hidden - Скрытое значение
- file - Тип загрузки файла
Метод подключения:
{% from "_macros/input.twig" import input(, tags, number, ...) %}Использование:
На примере input
{{ input('field', 'Укажите зависимость', 'Выберите поля зависимости, а так-же укажите значения, по которым будет вестись проверка данных перед отправкой в телеграм.', settings) }}Параметры:
- input - Простой и обычный текстовой ввод
- tags - Текстовой ввод с поддержкой тегов
- number - Численный ввод
- hidden - Скрытое значение
macro input(id, name, descr, opts)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название кнопки |
| descr | Описание кнопки |
| opts | Объект с настройками плагина |
macro file(id, name, descr, opts, extra)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название кнопки |
| descr | Описание кнопки |
| opts | Объект с настройками плагина |
| extra | Объект с дополнительными параметрами |
menu.twig
Содержит макрос для генерации меню
Метод подключения:
{% from "_macros/menu.twig" import item %}Использование:
{{ items(links, site, 'yes', 'no', 'firstLine') }}Параметры:
macro item(items, _site, _first, _child, _fclass)| Параметр | Описание |
|---|---|
| items | Массив с ссылками |
| _site | Указывается текущий объект / текущая страница |
| _first | Указывается первый ли ряд меню или нет. Принимает значения: yes или no. По умолчанию: yes |
| _child | Указывается дочерние эелемнты или нет. Принимает значения: yes или no. По умолчанию: no |
| _fclass | Перечень классов для первого ряда |
pagination.twig
Содержит макрос для генерации пагинации
Метод подключения:
{% from "_macros/pagination.twig" import pagination %}Использование:
{{ pagination(total_pages, page) }}Параметры:
pagination(total, current, pages_name, first_last_page, active_pages)| Параметр | Описание |
|---|---|
| total | Всего новостей / объектов |
| current | Текущая страница |
| pages_name | Название параметра страницы в ссылке страницы, по умолчанию: page |
| first_last_page | Указывается сколько страниц показывать в начале и конце пагинации, если страниц много. По умолчанию: 2 |
| active_pages | Указывается активный промежуток страниц и сколько страниц в нём должно быть отображено, если страниц много. По умолчанию: 3 |
search.twig
Содержит макрос для генерации поиска и фильтрации данных
ВНИМАНИЕ!
НАХОДИТСЯ В РАЗРАБОТКЕ!
Метод подключения:
{% from "_macros/search.twig" import search %}Использование:
{{ search('telegram', 'cron', 'attached' ) }}Параметры:
search(module, file, _type, _rmenu, _lmenu)| Параметр | Описание |
|---|---|
| module | Главный модуль, поиск будет происходить через ajax контроллер DLE и файл maharder.php |
| file | Файл, который будет отвечать за запросы |
| _type | Тип меню, название класса |
| _rmenu | Дополнительные ссылки на правой стороне меню |
| _lmenu | Дополнительные ссылки на левой стороне меню |
select.twig
Содержит макрос для выпадающего меню
Метод подключения:
{% from "_macros/select.twig" import select %}Использование:
{{ select('field', 'Доп. поле со статусом', 'Укажите поле, где на данный момент выводится статус сериала.', settings, xfields) }}Параметры:
macro select(id, name, descr, opts, vals)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название списка |
| descr | Описание списка |
| opts | Объект с настройками плагина |
| vals | Значения для формирования списка, к примеру массив: [name => value] |
textarea.twig
Содержит макрос для формы большого количества текста
Содержит:
- text - Простой элемент ввода большого количества текста
- editor - Похож на text, но к нему подключается редактор
Метод подключения:
{% from "_macros/textarea.twig" import text(, editor) %}Использование:
{{ editor('template', 'Шаблон сообщения', 'Настройте свой шаблон для отправки сообщений. Разрешается использовать BB-код и HTML-код.', template_data) }}Параметры:
text(id, name, descr, opts)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название текстового поля |
| descr | Описание поля |
| opts | Объект с настройками плагина |
filter.twig
Содержит макрос для формы большого количества текста
Содержит:
- search_and_filter - Вывод поиска и фильтрации таблицы данных
Метод подключения:
{% from "_macros/textarea.twig" import text(, editor) %}Использование:
{{ editor('template', 'Шаблон сообщения', 'Настройте свой шаблон для отправки сообщений. Разрешается использовать BB-код и HTML-код.', template_data) }}Параметры:
text(id, name, descr, opts)| Параметр | Описание |
|---|---|
| id | Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице |
| name | Русское название текстового поля |
| descr | Описание поля |
| opts | Объект с настройками плагина |
Перечень дополнений
- MobileDetectExtension (Дополнена / подправлена мной)
- DeclineExtension (Моё дополнение)
- AdminUrlExtension (Моё дополнение)
- MarkdownExtension
- CacheExtension
- IntlExtension
- CssInlinerExtension
- StringExtension
- HtmlExtension
- InkyExtension
- Translation
DeclineExtension
В любом месте в шаблоне нужно указать тег decline для склонения. Пример:
{{ decline(count, ['рубль', 'рубля', 'рублей']) }}Вместо count вставить переменную с количеством.
AdminUrlExtension
Дополнительные и глобальные ссылки и переменные в админпанеле и шаблонизаторе
| Тег | Описание | Пример вывода |
|---|---|---|
| assets_url | Прямая ссылка до папки со стилями и скриптами | /engine/inc/maharder/admin/assets/ |
| plugin_url | Ссылка текущей страницы, вместе с параметрами | /admin.php?mod=main&new=test |
| dle_login_hash | Хеш пользователя DLE | 1234567890ABCDEFGabcdefg |
| dle_config | Массив конфирурации DLE | |
| _server | Массив сервисной информации, аналог $_SERVER | |
| _get | Массив отфильтрованногого GET-запроса сервера, либо null | |
| _post | Массив отфильтрованногого POST-запроса сервера, либо null | |
| languages | Выводит массив языков в админпанели | Пример вывода можно посмотреть в menu.html |
| selected_lang | Выводит текущий язык в админпанели | ru_RU |
| lang_data | Массив данных с информацией о текущем языке | original => Русский, english => Russian, iso2 => ru, tag => ru_RU |