В соответствии с общими принципами (Настройка личного кабинета) ЛК поддерживает возможность расширения функциональности через механизм виджетов и подгрузку произвольного кода в процессе запуска приложения.

Создание окружения

Подгружаемые ЛК файлы должны находиться в директории $server_client на сервере. Путь к этой директории задается в параметрах приложения и по умолчанию указывает на /etc/hydra/hupo/local (ключ shared_path в настройках). Ни в коем случае не создавайте файлов в директории с приложением (/opt/hydra/hupo), иначе они будут удалены при обновлении.

Использование средств браузера и стандартных виджетов

В директории $server_client можно разместить шаблоны, JavaScript-код и стили, что при учете особенностей отображения страниц в ЛК (весь рендеринг происходит на стороне клиента, в браузере) позволяет решить широкий спектр задач. В первую очередь это касается вывода информации для абонента, возможности интерактивного взаимодействия здесь ограничиваются функциональностью серверной части (т. к. она в этом подходе остается неизменной).

Добавление стилей

Самым простым доступным изменением является добавление CSS-стилей. В директорию $server_client/assets/stylesheets следует добавить файл custom. Расширение для файла можно выбрать по вкусу: css, scss или sass в зависимость от предпочитаемого языка описания стилей (документацию по языкам SASS и SCSS можно найти на http://sass-lang.com/). Если количество стилей невелико, то все их можно уместить в созданном файле. Иначе можно разбить стили на несколько файлов и подключить их через директивы препроцессора Assets Pipeline (см. http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives). Файл custom подгружается по окончании загрузки всех остальных стилей.

//= require 'my_colors'
//= require 'my_second_file'
//= require_self
//= require 'my_last_file'

body {
    background-color: black;
    color: white;
}

Добавление или изменение шрифтов

В директории $server_client/assets/stylesheets на сервере для этого необходимо задать в начале файла custom:

body
  font-family: Arial, Helvetica, sans-serif

Добавление JavaScript-кода

JavaScript-код добавляется в директорию $server_client/assets/javascript. Файлы должны иметь расширение .js или .js.coffee для скриптов на языке CoffeeScript. В файле custom так же как и в случае со стилями можно подключать другие файлы с помощью директивы require.

ЛК использует фреймворк Backbone.js, дающий возможность использовать модели, коллекции и представления. Для создания пользовательских моделей, коллекций и представлений рекомендуется определить собственные пространства имен, как это показано в примере ниже.

Также ЛК использует шаблоны в формате .jst.hamlc, которые можно добавлять в директорию $server_client/templates. Руководство по их использованию см. в документации к шаблонизатору.

# Подключить jQuery-плагин
#= require jquery.jcarousel.min
 
# Выполнить код текущего файла (для инициализации пространства имен)
#= require_self
 
# Рекурсивное подключение файлов в пользовательской поддиректории с представлениями
#= require_tree ./views
 
# Подключение шаблонов из директории templates, находящейся на уровень выше
#= require_treee ../templates
 
# Инициализация пространства имен для пользовательских представлений
HupoApp.Views.VendorName = {}

В js-файлах требуется подключать зависимости с помощью директории require:

#= require base/view
 
class HupoApp.Views.VendorName.Example extends HupoApp.View
  ...