Перейти к содержанию

Шаблоны

Все шаблоны расположены по пути engine/inc/maharder/admin/templates. Для оформления используется шаблонизатор Twig с некоторыми дополнениями.


Структура

Text Only
📦templates
 ┣ 📂modules
 ┃ ┗ 📂admin
 ┃ ┃ ┣ 📜changelog.html
 ┃ ┃ ┣ 📜main.html
 ┃ ┃ ┗ 📜new_module.html
 ┣ 📂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 Блок содержимого дополнительных скриптов

Автоматическая генерация хлебных крошек


footer.html

Вывод подвала, а так-же генерация ссылок


Вывод верхнего меню


sidebar.html

Вывод бокового меню для маленьких экранов


Подключение шаблонов

Все подключения находятся в папке engine/inc/maharder/admin/templates/templateIncludes.

  • Для общего блага и простоты использование рекомендуется использовать макросы
  • Все элементы выводятся через шаблон engine/inc/maharder/admin/templates/templateIncludes/segRow.html

boxes.html

Важный объект для создания табов.

Пример использования:

Twig
<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>

Параметры:

Twig
{{ include('templateIncludes/boxes.html', {
    boxes: {
        id: {
            link: '#',
            name: 'Название',
            icon: 'Класс'
        }
    }
    })
}}

Важным параметром является свойство boxes. Он перенимает объект в виде массива ссылок. Каждый элемент ссылки содержит четыре главных атрибута.

  • id - Универсальный индикатор, который будет так-же установлен у сегмента или блока. У первого блока обязательно должен быть класс .active.
  • id.link - Если указывается как часть табов, то нужно указывать #. Если же нужна ссылка в прямом смысле этого слова, то указывайте ссылку
  • id.name - Название таба
  • id.icon - Название класса иконки

Сегменты выглядят примерно так:

HTML
1
2
3
4
5
<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

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

Пример использования:

Twig
1
2
3
4
5
6
7
{{ 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>'
    })
}}

Параметры:

Twig
1
2
3
4
5
6
7
8
{{ include('templateIncludes/segRow.html', {
        type: type,
        id: id,
        name: name,
        descr: descr,
        html: html,
    })
}}

Рекомендуются именно эти параметры для вывода дополнительной информации в сегмент отображения данных.

Параметр Описание
type Тип строки, для простого текста достаточно указать html
id Уникальное значение строки
name Название строки
descr Описание строки
html Произвольная информация

Макросы

Функционал, который помогает в оформлении шаблонов, особенно с рекурсивными значениями.

  • Намерено для них было использование расширение twig, чтобы отличить от вставок
  • Рекомендуется использовать именно макросы, нежели вставки шаблонов из templateIncludes

checkbox.twig

Выводит переключатель

Метод подключения:

Twig
{% from "_macros/checkbox.twig" import checkbox %}

Использование:

Twig
{{ checkbox('onof', 'Включить модуль?', 'Включает/Выключает модуль', settings) }}

Параметры:

Twig
macro checkbox(id, name, descr, opts)
Параметр Описание
id Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице
name Русское название кнопки
descr Описание кнопки
opts Объект с настройками плагина

input.twig

Выводит форму простого заполнения текста

Содержит:

  • input - Простой и обычный текстовой ввод
  • tags - Текстовой ввод с поддержкой тегов
  • number - Численный ввод
  • hidden - Скрытое значение
  • file - Тип загрузки файла

Метод подключения:

Twig
{% from "_macros/input.twig" import input(, tags, number, ...) %}

Использование:

На примере input

Twig
{{ input('field', 'Укажите зависимость', 'Выберите поля зависимости, а так-же укажите значения, по которым будет вестись проверка данных перед отправкой в телеграм.', settings) }}

Параметры:

  • input - Простой и обычный текстовой ввод
  • tags - Текстовой ввод с поддержкой тегов
  • number - Численный ввод
  • hidden - Скрытое значение
Twig
macro input(id, name, descr, opts)
Параметр Описание
id Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице
name Русское название кнопки
descr Описание кнопки
opts Объект с настройками плагина
Twig
macro file(id, name, descr, opts, extra)
Параметр Описание
id Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице
name Русское название кнопки
descr Описание кнопки
opts Объект с настройками плагина
extra Объект с дополнительными параметрами

Содержит макрос для генерации меню

Метод подключения:

Twig
{% from "_macros/menu.twig" import item %}

Использование:

Twig
{{ items(links, site, 'yes', 'no', 'firstLine') }}

Параметры:

Twig
macro item(items, _site, _first, _child, _fclass)
Параметр Описание
items Массив с ссылками
_site Указывается текущий объект / текущая страница
_first Указывается первый ли ряд меню или нет. Принимает значения: yes или no. По умолчанию: yes
_child Указывается дочерние эелемнты или нет. Принимает значения: yes или no. По умолчанию: no
_fclass Перечень классов для первого ряда

pagination.twig

Содержит макрос для генерации пагинации

Метод подключения:

Twig
{% from "_macros/pagination.twig" import pagination %}

Использование:

Twig
{{ pagination(total_pages, page) }}

Параметры:

Twig
pagination(total, current, pages_name, first_last_page, active_pages)
Параметр Описание
total Всего новостей / объектов
current Текущая страница
pages_name Название параметра страницы в ссылке страницы, по умолчанию: page
first_last_page Указывается сколько страниц показывать в начале и конце пагинации, если страниц много. По умолчанию: 2
active_pages Указывается активный промежуток страниц и сколько страниц в нём должно быть отображено, если страниц много. По умолчанию: 3

search.twig

Содержит макрос для генерации поиска и фильтрации данных

ВНИМАНИЕ!

НАХОДИТСЯ В РАЗРАБОТКЕ!

Метод подключения:

Twig
{% from "_macros/search.twig" import search %}

Использование:

Twig
{{ search('telegram', 'cron', 'attached' ) }}

Параметры:

Twig
search(module, file, _type, _rmenu, _lmenu)
Параметр Описание
module Главный модуль, поиск будет происходить через ajax контроллер DLE и файл maharder.php
file Файл, который будет отвечать за запросы
_type Тип меню, название класса
_rmenu Дополнительные ссылки на правой стороне меню
_lmenu Дополнительные ссылки на левой стороне меню

select.twig

Содержит макрос для выпадающего меню

Метод подключения:

Twig
{% from "_macros/select.twig" import select %}

Использование:

Twig
{{ select('field', 'Доп. поле со статусом', 'Укажите поле, где на данный момент выводится статус сериала.', settings, xfields) }}

Параметры:

Twig
macro select(id, name, descr, opts, vals)
Параметр Описание
id Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице
name Русское название списка
descr Описание списка
opts Объект с настройками плагина
vals Значения для формирования списка, к примеру массив: [name => value]

textarea.twig

Содержит макрос для формы большого количества текста

Содержит:

  • text - Простой элемент ввода большого количества текста
  • editor - Похож на text, но к нему подключается редактор

Метод подключения:

Twig
{% from "_macros/textarea.twig" import text(, editor) %}

Использование:

Twig
{{ editor('template', 'Шаблон сообщения', 'Настройте свой шаблон для отправки сообщений. Разрешается использовать BB-код и HTML-код.', template_data) }}

Параметры:

Twig
text(id, name, descr, opts)
Параметр Описание
id Уникальное значение элемента, которое будет использоваться в обозначении самого плагина. Указывать на латинице
name Русское название текстового поля
descr Описание поля
opts Объект с настройками плагина

Перечень дополнений

DeclineExtension

В любом месте в шаблоне нужно указать тег decline для склонения. Пример:

Twig
{{ 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

Последнее обновление: May 25, 2022
Дата создания: May 25, 2022
К началу