FuelPHPをやってみる (19) - Themeを使う -

2012-11-24T00:00:00+00:00 FuelPHP PHP

Themeクラスを使う事で動的にレイアウトとなるテーマを切り替えたりも出来る模様

fuel/app/config/theme.php

fuel/core/configとかからコピペしても良い

<?php

return array(
    "active" => "default",
    "fallback" => "default",
    "paths" => array(APPPATH."themes"),
    "assets_folder" => "assets",
    "view_ext" => ".html",
    "require_info_file" => false,
    "info_file_name" => "themeinfo.php",
    "use_modules" => false,
);

デフォルトな感じな模様。pathsは変えてますけど、これでfuel/app/themes/アクティブテーマ名なディレクトリ構造にレイアウトをぶっ込める

fuel/app/classes/controller/home.php

<?php

class Controller_Home extends Controller {

    public function before() {
        $this->theme = Theme::instance();

        /* テーマは動的に切り替え出来る
        $this->theme->active("sample");
        */

        $this->theme->set_template("layout");

        $this->theme->set_chrome("header", "chrome/header", "content");
        $this->theme->set_partial("header", "header");

        $this->theme->set_partial("sidebar", "sidebar");
    }

    public function after($response) {
        if (empty($response) or !($response instanceof Response)) {
            $response = Response::forge(Theme::instance()->render());
        }

        return parent::after($response);
    }

    public function get_index() {
        $this->theme->set_partial(
            "content",
            "content"
        )->set(
            "data",
            array("hoge", "fuga", "foobar")
        );
    }
}

set_chromeを使っている場合には、set_partialした際のビューの親側を設定する事が出来る模様なので、今回headerな所のビュー自体はchrome/headerから参照されて表示される。つまりheaderはchrome/headerな子なビューになるような感じなんじゃないかなと。ソースハックしてないので正しいかは微妙ですが、最後に参考サイト紹介しますのでそちら参照していただければ

fuel/app/themes/default/layout.html

<html>
  <head>
    <?php echo Theme::instance()->asset->css("/bootstrap.css") ?>
  </head>
  <body style="background: #555">
    <?php echo $partials["header"] ?>
    <div class="row">
      <div class="span3">
        <?php echo $partials["sidebar"] ?>
      </div>
      <div class="span8">
        <?php echo $partials["content"] ?>
      </div>
    </div>
  </body>
</html>

まぁFuelPHPはbootstrapを同梱されているのでそれを使いましょうと。んで

<?php echo Theme::instance()->asset->css("/bootstrap.css"); ?>

とかで取得したり出来る模様ですが、参照するディレクトリが「DOCROOT/public/assets/アクティブテーマ名」な所から参照されるっぽい。でこれURLが出力されるんじゃなくてタグが生成される模様

んまぁpublic/assetsにテーマディレクトリを作ってテーマ間共有可能なCSS等のファイルはシンボリックリンクとかぶち込んどけばいいはず

んじゃ一つづつビューを作っていく

fuel/app/themes/default/chrome/header.html

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <?php echo $content; ?>
  </div>
</div>

$contentな所はfuel/app/themes/default/header.htmlが参照される。でさっきも書いたけど、chromeでやってるのでdefault/header.htmlなビューはこのchrome/header.htmlの子のビューとして表示される模様

fuel/app/themes/default/header.html

<a href="#" class="brand">FuelPHP</a>

fuel/app/themes/default/sidebar.html

<div class="hero-unit">
sidebar
</div>

レイアウトな所の

<?php echo $partials["sidebar"] ?>

なところに差し込まれる。

fuel/app/themes/default/content.html

<?php foreach($data as $value) { ?>
  <div class="hero-unit">
    <?php echo $value ?>
  </div>
<?php } ?>

レイアウトな所の

<?php echo $partials["content"] ?>

に差し込まれる

というような感じになる。結構作るビューの量が多くなるんだけど、見てみると

という感じになり、HTMLソースを見ると

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="http://localhost/assets/default/css//bootstrap.css?1352505324" />
  </head>
  <body style="background: #555">
    <div class="navbar navbar-inverse">
      <div class="navbar-inner">
        <a href="#" class="brand">FuelPHP</a>
      </div>
    </div>
    <div class="row">
      <div class="span3">
        <div class="hero-unit">sidebar</div>
      </div>
      <div class="span8">
        <div class="hero-unit">hoge</div>
        <div class="hero-unit">fuga</div>
        <div class="hero-unit">foobar</div>
      </div>
    </div>
  </body>
</html>

という感じになる(ちょっとだけ整形してます)

でset_chromeの参考として http://d.hatena.ne.jp/Kenji_s/20120714/fuelphp_theme_chrome が非常に分かりやすく参考になると思います

でThemeを使うケースとして、あくまでテーマでレイアウトを切り替え出来るような仕組みを持ちたい場合なケースに限るとは思います。っていうかそれ以外で標準的に使うのはビューを大量に作る必要性もあり何かとめんどくさいんじゃないかなっては感じる

んまぁてな感じでテーマをベースとしたレイアウト構造したいならこれ使えっぽい

FuelPHPをやってみる (20) - ファイルアップロード - FuelPHPをやってみる (18) - タスクを使う -