Создание своего дизайна
Как добавить свой дизайн в UnionCMS
Вводная часть
Как и любая другая система, UnionCMS предоставляет возможность кастомизации через изменение стилей сайта. Это позволяет владельцам торговых площадок улучшать свои проекты и проявлять креативность.
С чего начать?
Прежде всего, вы должны понимать принципы адаптации стилей и шаблонов для какой либо системы. Вы можете ознакомиться с принципами работы Условий шаблонизатора и Создание страницы. Данные статьи дадут вам маленький шаг к вашему креативному подходу!
Создание образа шаблона
Что такое образ шаблона? Это прототип, по которому система будет подтягивать файлы, чтобы вывести конечный итог клиенту.
Создание образца
/application/appearance/название/
Внутри нашей папки, требуется создать образец Шаблона который обязан называться sample.tpl все подтягивания и формирования будут с него.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>{title}</title>
<!--[ Meta ]-->
<meta charset="UTF-8">
<meta name="title" content="{title}">
<meta name="keywords" content="{meta_keywords}">
<meta name="description" content="{meta_description}">
<meta name="author" content="OSIP Group">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta property="og:title" content="{title}">
<meta property="og:description" content="{meta_description}">
<meta property="og:image" content="{meta_image}">
<!--[ Attributes ]-->
<link rel="shortcut icon" href="/assets/{appearance}/img/favicon.png" type="image/x-icon">
<!--[ Load Primary Styles ]-->
<link rel="stylesheet" href="/assets/{appearance}/css/start.css?v={cache}">
<!--[ Load Secondary Styles ]-->
{styles}
<!--[ Load System JavaScripts ]-->
<script src="/system/functions.js?v={cache}"></script>
<script src="/system/start.js?v={cache}"></script>
<!--[ Load Appearance JavaScripts ]-->
<script src="/assets/{appearance}/js/ajax.js?v={cache}"></script>
</head>
<body>
<input type="hidden" id="csrf_token" value="{csrf_token}">
{content}
<!--[ Load Secondary JavaScripts ]-->
{scripts}
<!--[ Load Others ]-->
{other}
</body>
</html>
{title} - вывод название страницы {meta_description} - выводит мета описание {meta_keywords} - выводит мета теги {meta_image} - выводит мета картинку {cache} - отображается в численном значение, к примеру 1, 2, 3 и т.п. Служит для сброса кэша стилей, js скриптов и т.п. {csrf_token} - выводит требовательный токен. {scripts} - выводит сторонние скрипты из Роутинга {other} - другие функции, либо значения. {appearance} - выводит название шаблона. {content} - выводит наш контент сайта
Создание стилей и плагинов для шаблона
/public_html/assets/название/
Использование функций
Чтобы использовать в своем шаблоне сторонние функции, создайте папку scripts.
/application/appearance/название/scripts/
Внутри папки разместите autochange.php и functions.php
autochange.php позволяет заменять текста при генерации страницы.
<?PHP
if(isset($_SESSION['id'])) {
$dataUser = users()->Get($_SESSION['id']);
$this->AddReplace([
'{profile_balance}' => $dataUser->balance
]);
}
functions.php позволяет создавать кастомные функции, которые можно будет вызывать в самом шаблоне.
<?PHP
function getNoData($text) {
return tpl()->Set(['{text}' => $text], tpl()->Get('elements/no_data'));
}
/* Get products */
function getProducts() {
try {
$sth = pdo()->query('SELECT * FROM product WHERE enable=1 ORDER BY id DESC');
if(!$sth->rowCount()) {
return getNoData('Нет товаров');
}
while($row = $sth->fetch(PDO::FETCH_OBJ)) {
tpl()->AddCell('getProducts', tpl()->Set([
'{id}' => $row->id,
'{name}' => $row->name,
'{desc}' => $row->description,
'{price}' => $row->price
], tpl()->Get('elements/product/item')));
}
return tpl()->GetCell('getProducts');
}
catch(Exception $e) {
return $e->getMessage();
}
}
Переадресация страниц
Вы можете создавать кастомные страницы, которые необходимы для работы с вашим шаблоном. На примере /account/login
Создайте папку pages внутри sciprts.
/application/appearance/название/scripts/pages/
Внутри папке разместите файл формата JSON, к примеру account.json
{
"/account/login": {
"module": "%appearance%/scripts/pages/account/login"
}
}
Таким образом, мы будем переадресовывать /account/login на наш скрипт, который будет создан рядом с account.json и расположен по пути /scripts/pages/account/login.php
<?PHP
tpl()
->Start('sample')
->Content(tpl()->Get('account/login'))
->Show();
Last updated