По умолчанию подключается файл: styles/app/index.styl, где мы можем воспользоваться всеми синтаксическими преимуществами которые предоставляет Stylus.
Что делать, если в нашем проекте предусмотрено использование нескольких тем (стилей) для темплейтов?
UI — наше решение
Механиз UI — в Derby.js один из механизмов позволяющий создавать пользовательские компоненты. Его особенностью является то, что:
- его можно подключить «по требованию»
- он может использовать свои стили
- можно реализовывать свою логику поведения компонентов
Итак — это как раз то, что нам нужно.
Пошагово это будет выглядеть так:
$ npm install derby $ derby new app $ cd app В упрощенном варианте предположим, что при переходе по адресе /page1 у нас подключаются одни стили (или скажем иначе — тема). При переходе /page2 другие и т. д.
Будем исходить из положения, что общих стилей нет. Поэтому файл
styles/app/index.styl будет содержать только:
@import 'nib/vendor' Итак, выполним следующий подготовительный набор команд:
$ mkdir ui/theme1 $ touch ui/theme1/index.js $ mkdir ui/theme2 $ touch ui/theme2/index.js $ mkdir styles/theme1 $ touch styles/theme1/index.styl $ mkdir styles/theme2 $ touch styles/theme2/index.styl Содержимое файлов
ui/theme1/index.js
var config = { filename: __filename , styles: '../../styles/theme1' , scripts: { } }; module.exports = function(app, options) { app.createLibrary(config, options); }; Файл ui/theme2/index.js
var config = { filename: __filename , styles: '../../styles/theme2' , scripts: { } }; module.exports = function(app, options) { app.createLibrary(config, options); }; Обратите внимание, что scripts у нас не имеет подключаемых файлов. В данном конкретном случае это не нужно. Однако если у вас есть потребность для конкретного компонента добавить функционал и темплейт-теги — то вы в любой момент можете добавить необходимую логику.
Содержание файлов STYL
styles/theme1/index.styl
styles/theme2/index.styl
Первая строка
@import 'nib/vendor' // Дальше вы можете разместить все необходимые стили Изменяем роутеры
Открываем файл: lib/app/index.js и наполняем следующим содержимым:
var app = require('derby').createApp(module) .use(require('derby-ui-boot')); app.get('/page1', function(page, model, params, next) { app.use(require('../../ui/theme1')); page.render(); }); app.get('/page2', function(page, model, params, next) { app.use(require('../../ui/theme2')); page.render(); }); Согласно нашей первоначальной затеи мы «подключаем» тему для конкретных роутеров.
Если же у вас есть потребность внедрения темы для группы роутеров — то их можно вынести в отдельный файл и при инициализации уже использовать вот такую конструкцию:
var app = require('derby').createApp(module) .use(require('derby-ui-boot')) .use(require('../../ui/theme2')); Лично для меня ближе концепция MVC, соответственно разбиение роутеров по контроллерам, что будет больше соответствовать логике action-controller. Разделение View и Model специфическое, поэтому о полноценном паттерне MVC говорить не приходится. Однако это отдельная тема для обсуждения.
Проверяем
$ npm start В браузере переходим по адресу:
http://localhost:3000/page1 http://localhost:3000/page2 Вывод
Мы рассмотрели один из механизмов использования множественных стилей оформления/тем для темплейтов в Derby.js
Достоинства этого способа — мы избавлены от внедрения стилей, которые не используются, значительно расширяем набор инструментов, которые мы можем использовать в для каждой конкретной темы, путем создания Derby.js UI-плагина.
Недостаток, я вижу в том, что для достаточно простой операции мне приходится осуществлять достаточно много действий, которые, как мне кажется, можно было бы избежать большей гибкостью в структурировании логики фреймверка. Впрочем последнее очень субъективно.
Источники
Официальный сайт Derby.js
derbyjs.com/#stylesheets
learnboost.github.io/stylus/
lesscss.org/
github.com/codeparty/derby-ui-boot
Материалы по Derby.js
ссылка на оригинал статьи http://habrahabr.ru/post/200792/
Добавить комментарий