🙌 🏖️ 🤘 テンプレートのDerby.jsテーマ 🌿 🕍 🦍

Derby.jsは、クライアントに提供されるHTMLコードにCSSをカプセル化することにより、ページの読み込み速度を大幅に向上させるメカニズムを提供します。本番モードでは、Derby.jsはHTML、CSS、JSを縮小します。ドキュメントに示されているように、スタイラスおよび/またはLESSが使用されます。

デフォルトでは、ファイルは接続されています： styles / app / index.stylここで、Stylusが提供するすべての構文上の利点を利用できます。

私たちのプロジェクトがテンプレートにいくつかのテーマ（スタイル）の使用を提供している場合はどうでしょうか？

UIは私たちのソリューションです

UIメカニズム-Derby.jsで、カスタムコンポーネントを作成できるメカニズムの1つ。その特徴は次のとおりです。

「オンデマンド」で接続できます
彼は自分のスタイルを使うことができます
コンポーネント動作の独自のロジックを実装できます

だから-これはまさに私たちが必要なものです。

ステップごとに次のようになります。

$ npm install derby $ derby new app $ cd app

簡略版では、アドレス/ page1に移動すると、スタイル（または別の言い方をすれば、テーマ）のみが接続されると仮定します。進行中/ページ2その他

共通のスタイルはないという立場から進めていきます。したがって、ファイル

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); };

スクリプトにはインクルードファイルがないことに注意してください 。この特定のケースでは、これは必要ありません。ただし、特定のコンポーネントの機能とテンプレートタグを追加する必要がある場合は、必要なロジックをいつでも追加できます。

STYLファイルの内容

スタイル/ theme1 / index.styl

スタイル/ 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の概念は、コントローラーによるルーターの内訳により近いものであり、アクションコントローラーロジックとの整合性がより高くなります。ビューとモデルの分離は特定であるため、本格的なMVCパターンについて話す必要はありません。ただし、これは議論のための別のトピックです。

確認する

 $ npm start

ブラウザで、次の場所に移動します。

 http://localhost:3000/page1 http://localhost:3000/page2

おわりに

Derby.jsのテンプレートに複数のスタイル/テーマを使用するメカニズムの1つを見ました

この方法の利点 -使用されていないスタイルの導入から解放され、 Derby.js UIプラグインを作成することにより、特定のトピックごとに使用できるツールのセットを大幅に拡張します。

欠点は、かなり単純な操作のためにかなり多くのアクションを実行しなければならないことです。フレームワークのロジックをより柔軟に構築することで回避できるようです。ただし、後者は非常に主観的です。

ソース

公式サイトDerby.js

derbyjs.com/#stylesheets

learnboost.github.io/stylus

lesscss.org

github.com/codeparty/derby-ui-boot

Derby.jsによる資料

テンプレートのDerby.jsテーマ