...
Самым простым доступным изменением является добавление 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 подгружается по окончании загрузки всех остальных стилей.
...
| Note |
|---|
После создания custom-файла не забудьте очистить кэш, расположенный по пути tmp/cache/assets в директории с приложением. Это требуется, чтобы при следующей компиляции стилей подгрузился ваш новый custom-файл (раздел «Сборка файлов» в Настройка личного кабинета). |
Добавление JavaScript-кода
JavaScript-код добавляется в директорию $server_client/assets/javascript. Файлы должны иметь расширение .js или .js.coffee для скриптов на языке CoffeeScript. В файле custom так же как и в случае со стилями можно подключать другие файлы с помощью директивы require.
Hupo использует фреймворк Backbone.js, дающий возможность использовать модели, коллекции и представления. Для создания пользовательских моделей, коллекций и представлений рекомендуется определить собственные пространства имен, как это показано в примере ниже.
Также Hupo использует шаблоны в формате .jst.hamlc, которые можно добавлять в директорию $server_client/templates. Руководство по их использованию см. в документации к шаблонизатору.
| Code Block | ||||
|---|---|---|---|---|
| ||||
# Подключить jQuery-плагин #= require jquery.jcarousel.min # Выполнить код текущего файла (для инициализации пространства имен) #= require_self # Рекурсивное подключение файлов в пользовательской поддиректории с представлениями #= require_tree ./views # Подключение шаблонов из директории templates, находящейся на уровень выше #= require_treee ../templates # Инициализация пространства имен для пользовательских представлений HupoApp.Views.VendorName = {} |
В js-файлах требуется подключать зависимости с помощью директории require:
| Code Block | ||
|---|---|---|
| ||
#= require base/view
class HupoApp.Views.VendorName.Example extends HupoApp.View
... |