Создание своего дизайна

Как добавить свой дизайн в UnionCMS

Вводная часть

Как и любая другая система, UnionCMS предоставляет возможность кастомизации через изменение стилей сайта. Это позволяет владельцам торговых площадок улучшать свои проекты и проявлять креативность.

С чего начать?

Прежде всего, вы должны понимать принципы адаптации стилей и шаблонов для какой либо системы. Вы можете ознакомиться с принципами работы Условий шаблонизатора и Создание страницы. Данные статьи дадут вам маленький шаг к вашему креативному подходу!

Создание образа шаблона

Что такое образ шаблона? Это прототип, по которому система будет подтягивать файлы, чтобы вывести конечный итог клиенту.

Создание образца

/application/appearance/название/

Создайте папку по данному пути, чтобы обозначить будущие прототипы наших шаблонов для генерации итоговой страницы.

Название - это наименование вашего шаблона. К примеру: test

Внутри нашей папки, требуется создать образец Шаблона который обязан называться 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/название/

Создайте папку по данному пути, чтобы разместить в ней fonts, css, js, img и другие требовательные файлы.

Использование функций

Чтобы использовать в своем шаблоне сторонние функции, создайте папку 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();

%appearance% - требуется для автоматического преобразования пути требуется для автоматического преобразования пути до папки с шаблоном.

PreviousШаблоны и дизайн NextУсловия шаблонизатора

Last updated 9 months ago