Концепция системы визуальной настройки шаблонов Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.91

The Concept of the System for Visual Editing 1С:ВГГМХ Templates

Dolgikh V.I. *

Reshetnev Siberian State Aerospace University 31, Krasnoyarsky Rabochy Av., Krasnoyarsk, 660037, Russian Federation

* E-mail: klomanton@gmail.com

Abstract. The concept of a visual template setup system for CMS 1C: Bitrix. The existing 1C: Bitrix editor does not allow full use of modern HTML5 & CSS3 markup methods, and it is not quite convenient to work with templates based on such frameworks as Twitter Bootstrap. It is supposed to accelerate the work of adjusting and editing the overall visual constituent of the standard component templates using a visual editor.

Keywords: Web, 1C:Bitrix, visual editor.

Концепция системы визуальной настройки шаблонов

1С:ВГШ1Х

Долгих В.И.

Сибирский государственный аэрокосмический университет имени академика М.Ф. Решетнева 660037, Российская Федерация, г. Красноярск, просп. им. газ. «Красноярский рабочий», 31

klomanton@gmail. com

Аннотация. Рассматривается концепция системы визуальной настройки шаблонов для CMS 1С: Bitrix. Существующий редактор ^Bitrix не позволяет полноценно использовать современные методы разметки HTML5&CSS3, и не вполне удобен в работе с шаблонами на основе таких фреймворков как Twitter Bootstrap. Предполагается ускорение работы по настройке и редактированию общей визуальной составляющей шаблонов стандартных компонентов за счет использования визуального редактора.

Ключевые слова: Веб, 1С Bitrix, визуальный редактор.

На данный момент существует различное множество систем управления содержимым (англ. CMS - Content Management System), созданных для различных целей, от ведения блогов и новостных сай-

тов до реализации Интернет-магазинов. Одной из самых распространенных таких систем для коммерческого использования в настоящее время является lQBitrix.

lQBitrix - профессиональная система управления веб-проектами, универсальный программный продукт для создания, поддержки и успешного развития корпоративных сайтов и интернет-магазинов [1]. Данная CMS является одной из популярных и востребованных на отечественном рынке Интернет-решений.

С течением времени дизайнерские решения не стоят на месте и с каждым годом принимают различные изменения, от появления новых JavaScript-компонентов до выхода новых стандартов HTML и CSS, что в конечном итоге не облегчает верстку готового продукта контент-менеджеру или администратору сайта. Разнообразные слайдеры, нестандартные сетки отображения выходной информации, множество анимации на странице - для всего этого требуется поддержка для отображения на страницах сайта. Но при этом стандартный редактор CMS lQBitrix не несет в себе функционала столь тонкой настройки шаблонов, а предлагает только настройку вывода полей инфоблока или изменение параметров компонентов. Стоит признать, что встроенный редактор в lQBitrix предоставляет существенно ограниченные, самые простейшие возможности по редактированию содержимого.

Более того, при использовании встроенного редактора возможны проблемы при использовании собственных или сторонних решений с более сложной версткой, чем та, которая предполагается по умолчанию. Так, что немаловажно, встроенный редактор lQBitrix при сохранении страницы ошибочно удаляет пустые теги span, на которые может быть назначена отрисовка через псевдоэлементы CSS3 :before и :after.

Вследствие вышесказанного нами было принято решение о разработке визуального редактора для настройки шаблонов компонентов системы lC:Bitrix. Предполагается, что данная система позволит ускорить настройку и кастомизацию front-end'а, который и увидит конечный пользователь сайта, за счет использования визуального редактора, позволяющего вносить изменения интуитивно-понятным образом с помощью Drag-n-drop и возможности сохранения редактором сложной верстки, в том числе чтобы избежать и вышеописанной проблемы с удалением «ненужных» (с точки зрения lC:Bitrix) тегов.

Предполагается подключение системы к серверу предварительно развернутой сборки CMS, а точнее к файловому серверу посредством ftp/sftp (ftp не безопасный протокол, потому в чистом виде использоваться не должен. При том ftp может использоваться в случае поддержки ssl/tls, то есть ftps. На практике же часто применяется

защищенный sftp, представляющий настройку над ssh и позволяющий полностью удовлетворить потребности в безопасном соединении) и базе данных, после чего будет произведено автоматическое определение установленной версии из системной переменной SM_VERSION и редакции путем выполнения функции CUpdateClient::GetUpdatesList(). Благодаря этому система сможет самостоятельно определить список компонентов, доступных при работе, версии этих компонентов, а также доступные им настройки путем фильтрации по номеру версии и типу редакции по внутренней базе данных системы, в которой хранятся версии продукта, типы редакций, а также информация о компонентах для каждой редакции и версии CMS. В базе данных системы дополнительно предполагается хранение параметров вызова компонентов и их базовые настройки в зависимости от версии CMS.

Для пользователя предполагаются два режима работы с шаблонами: режим «что видишь, то и получишь» (англ. WYSIWYG - What You See Is What You Get, то есть редактируемый документ полностью отображается также, как и конечный результат правки)[3] и режим эксперта. В режиме WYSIWYG, с поддержкой функции Drag-n-drop для вывода компонентов, будут доступны визуальный редактор для формирования выходной информации в нескольких форматах (список, плитка или таблица) и панель со списком CSS-стилей, содержимое которой будет изменяться в зависимости от того, какой элемент шаблона выберет пользователь, с возможностью интерактивного изменения свойств элемента используя фреймворк Bootstrap [4].

В режиме эксперта предполагается пять вкладок для работы, которые соответствуют пяти файлам из которых состоит компонент:

• result_modifier.php, в котором происходит предварительная работа с выходными данными;

• template.php, в котором происходит вывод данных;

• component_epilog.php - файл, который выполняется после работы template.php;

• script.js - файл, содержащий JavaScript-сценарий, который подключается при вызове шаблона компонента на странице;

• style.css - файл, содержащий CSS-таблицу стилей данного шаблона [2].

Во всех этих вкладках предполагается работа системы автодополнения, подсветки синтаксиса и автоформатирования на основе расширения файла.

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

так и со стороны опытных пользователей используя возможности автодополнения в режиме эксперта.

Библиографический указатель:

1. Ю-Битрикс: Управление сайтом URL: https://www.lc-bitrix.ru/products/cms/ (дата обращения: 04.04.20l7).

2. HTML, CSS, PHP, JavaScript, SQL - что и зачем? URL: http://codeharmony.ru/materials/l25 (дата обращения: 04.04.20l7).

3. Визуальный (WYSIWYG) редактор для создания сайтов URL: https://www.imagecms.net/blog/obzory/vizualnyi-wysiwyg-redak tor-dlia-sozdaniia-saitov (дата обращения:04.04.20П).

4. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. URL: http://getbootstrap.com/ (дата обращения:04.04.20П).

© Долгих В.И., 2017

Об авторе:

Долгих Вадим Игоревич - студент, Сибирский государственный аэрокосмический университет имени академика М.Ф. Решет-нева, просп. имени газеты Красноярский рабочий, 3l, г. Красноярск, Российская Федерация, 660037. E-mail: klomanton@gmail.com

About author:

Dolgikh Vadim Igorevich - student, Reshetnev Siberian State Aerospace University, 3l, Krasnoyarsky Rabochy Av., Krasnoyarsk, 660037, Russian Federation. E-mail: klomanton@gmail.com