Phalconで簡易ブログの作成2

2014年 6月 5日 PHP Phalcon

前回作成した簡易ブログの見た目を良くするために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にソースを起きました。



前へ 次へ