Phalconで簡易ブログの作成2
前回作成した簡易ブログの見た目を良くするためにbootstrap(Less版)を導入します。
Lessコンパイラを追加
composerで追加します。
プロジェクトのルートにcomposer.jsonを作成します。
javascript
{
"name": "phalcon-sample",
"require": {
"oyejorge/less.php": "~1.5"
},
"config": {
"vendor-dir": "vendor/"
}
}
$ composer install
これで/vendorの下にLessコンパイラがダウンロードされています。
composerのautoloadを読み込む
いちいちrequireしなくて良いようにcomposerのautoloadを読み込みます。
app/config/loader.phpの最後に記述します。
``php
// app/config/loader.php
require_once DIR . '/../../vendor/autoload.php' ;
```
bootstrapの設置
publicの下に設置します。
public
├── css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── js
│ └── bootstrap.min.js
└── less
└── bootstrap
├── alerts.less
├── badges.less
│ ..
└── wells.less
/public/lessにapplication.lessを作り、bootstrapをimportします。
less
@import "bootstrap/bootstrap.less";
Lessのコンパイル設定
Asset Managementとかで行うのが正しそうですが、
まだよくわかってないので、とりあえずpublic/index.phpに書きます。
php
// public/index.php
/**
* Read services
*/
include __DIR__ . "/../app/config/services.php";
/**
* Compile application.less
*/
$less = new lessc;
$less->checkedCompile('less/application.less', 'css/application.css');
/**
* Handle the request
*/
$application = new \Phalcon\Mvc\Application($di);
これでリクエストが来た際にapplication.lessがapplication.cssにコンパイルされます。
スタイルシートの設定
app/views/index.voltがレイアウトファイルのようです。
次のようにapplication.cssを設定します。
php
// app/views/index.volt
{{ stylesheet_link('css/application.css') }}
phalcon-simple-blog2
いけましたね！
githubにソースを起きました。