Fuelphp-themes
FuelPHP-テーマ
テーマは、アプリケーションの複数のルックアンドフィールを有効にするために使用されます。 アプリケーションの機能を乱すことなく、アプリケーションのルックアンドフィールを変更するオプションをユーザー/開発者に提供します。 アプリケーションには、1つ以上のテーマを含めることができます。 各テーマは独自のフォルダーにあります。 この章でテーマを作成する方法を学びましょう。
テーマ設定
FuelPHPは、テーマ用に個別の設定ファイル fuel/app/config/themes.php を提供します。 すべてのテーマ関連の設定は、このファイルで構成されます。 主なテーマ設定のいくつかは次のとおりです-
- active -アクティブなテーマの名前
- fallback -アクティブなテーマが見つからない場合のフォールバックテーマの名前
- paths -テーマを検索および検索するパスの配列
- assets_folder -通常、アセットはWebからアクセスできるようにDOCPATH内にある必要があります。 DOCPATH内のテーマのアセットフォルダーを参照します
- view_ext -テーマのビューファイルの拡張子
- info_file_name -テーマに関する拡張情報を持つファイル
- require_info_file -テーマ情報ファイルinfo_file_nameを要求するかどうか
- use_modules -現在のモジュールを使用するかどうか
テーマファイルの簡単な構成は次のとおりです。
<?php
return array (
'active' => 'tpthemes',
'fallback' => 'tpthemes',
'paths' => array (
APPPATH.'themes',
),
'assets_folder' => 'assets',
'view_ext' => 'l',
'require_info_file' => false,
'info_file_name' => 'themeinfo.php',
'use_modules' => false,
);
ここで設定しました、
- tpthemesとしてのアクティブおよびフォールバックテーマの名前
- fuel/app/themes/としてのテーマフォルダーのパス */public/assets/tpthemes/としてのアセットフォルダーのパス
テーマクラス
構成が完了したら、FuelPHPが提供するThemeクラスを使用して、テーマの機能を実行できます。 この章のThemeクラスで利用可能なメソッドについて教えてください。
実例
インスタンスメソッドを使用すると、新しいテーマを作成できます。 次の2つのパラメーターがあります。
- $ name -テーマの名前(オプション)
- $ config -テーマ構成配列(構成セクションで見られるものと同じ)
両方のパラメーターはオプションです。 パラメーターが指定されていない場合、構成ファイルからデフォルトのテーマを取得しようとします。 テーマ名が指定されている場合、構成ファイルから他の設定を取得しようとします。 構成も指定されている場合、構成ファイルの設定ではなく、ユーザー指定の設定が使用されます。
$theme = \Theme::instance();
$theme = \Theme::instance('tpthemes');
$theme = \Theme::instance ('mytheme', array (
'active' => 'mytheme', 'view_ext' => '.php'));
フォージ
forgeはインスタンスに似ていますが、構成配列のみを持つ点が異なります。
$theme = \Theme::forge (array(
'active' => 'tpthemes',
'fallback' => 'tpthemes',
'view_ext' => '.php',
));
view
- viewメソッドは、バックグラウンドで* View
- forge()*を使用します。 ビューメソッドが、fuel/app/views/フォルダーではなく、themesフォルダー内のfuel/app/themes/tpthemes/内のビューファイルを検索することを除いて、両方のAPIは似ています。
$theme = \Theme::instance();
$view = $theme->view('template/index');
//*fuel/app/themes/tpthemes/template/index.php
プレゼンター
- presenterメソッドは、バックグラウンドで* Presenter
- forge()*を使用します。 プレゼンターメソッドがテーマフォルダー、fuel/app/views/フォルダーではなくfuel/app/themes/tpthemes/内のビューファイルを検索することを除いて、両方のAPIは似ています。
$theme = \Theme::instance();
$presenter = $theme->presenter('template/index');
asset_path
asset_pathメソッドは、現在選択されているテーマに関連して要求されたアセットへのパスを返します。
$theme = \Theme::instance();
//public/assets/tpthemes/css/style.css
$style = \Html::css($theme->asset_path('css/style.css'));
add_path
add_pathメソッドを使用すると、実行時にテーマパスを追加できます。
$theme = \Theme::instance();
$theme->add_path(DOCROOT.'newthemes');
add_paths
add_pathsメソッドを使用すると、実行時に複数のテーマパスを追加できます。
$theme = \Theme::instance();
$theme->add_path(DOCROOT.'newthemes');
活動的
activeメソッドは、アクティブなテーマを設定できます。
$theme = \Theme::instance();
$active = $theme->active('newtheme');
後退する
fallbackメソッドにより、フォールバックテーマを設定できます。
$theme = \Theme::instance();
$fallback = $theme->fallback('custom');
get_template
get_templateメソッドは、現在ロードされているテーマテンプレートのViewインスタンスを返します。
$theme = \Theme::instance();
$theme->get_template()->set('body', 'Theme can change the look and feel of your app');
set_template
set_templateメソッドを使用すると、ページのテーマテンプレートを設定できます。
$theme = \Theme::instance();
$theme->set_template('layouts/index')->set('body', 'set theme template');
find
テーマへのパスが見つかった場合、findはtrueを返し、そうでない場合はfalseを返します。
$theme = \Theme::instance();
$path = $theme->find('newtheme')
all
allメソッドは、すべてのテーマパスのすべてのテーマの配列を返します。
$theme = \Theme::instance();
$themes = $theme->all();
情報を取得
get_infoメソッドは、テーマ情報配列から特定の変数を返します。 テーマが指定されていない場合、アクティブなテーマの情報配列が使用されます。
$theme = \Theme::instance();
$var = $theme->get_info('color', 'green', 'newtheme');
ここでは、色を取得するメソッドは「newtheme」で定義されています。 定義されていない場合、デフォルトの色として「緑」が使用されます。
set_info
set_infoメソッドは、アクティブテーマまたはフォールバックテーマに変数を設定します。
$theme->set_info('color', 'green', 'fallback');
set_partial
set_partialメソッドを使用すると、ページテンプレートの名前付きセクションにパーシャルビューを設定できます。 通常、それはHMVC呼び出しを介して行われます。
$theme = \Theme::instance();
$theme->set_template('layouts/homepage');
$theme->set_partial('navbar', 'homepage/navbar');
get_partial
get_partialメソッドを使用すると、ページテンプレートの名前付きセクションで以前に設定されたパーシャルのビューインスタンスを取得できます。
$theme = \Theme::instance();
$theme->set_partial('sidebar', 'partials/menu');
$theme->get_partial('sidebar', 'partials/menu')->set('class', 'menu green');
実施例
従業員アプリケーションにテーマサポートを追加しましょう。
- ステップ1 *-次の内容の新しいテーマ設定ファイルfuel/app/config/theme.phpを追加します。
<?php
return array (
'active' => 'tpthemes',
'fallback' => 'tpthemes',
'paths' => array (APPPATH.'themes', ),
'assets_folder' => 'assets',
'view_ext' => 'l',
'require_info_file' => false,
'info_file_name' => 'themeinfo.php',
'use_modules' => false,
);
- ステップ2 *-テーマtpthemesの新しいアセットフォルダーpublic/assets/tpthemes/cssを追加します。
cd/go/to/app/root/path
mkdir -p public/assets/tpthemes/css
- ステップ3 *-最新のブートストラップをダウンロードし、bootstrap.min.cssをpublic/assets/tpthemes/cssの下に配置します
- ステップ4 *-新しいフォルダーtpthemesをfuel/app/themesフォルダーの下に追加します。
cd/go/to/app/root/path
mkdir -p fuel/app/themes/tpthemes
- ステップ5 *-新しいレイアウトテンプレートを追加して、fuel/app/themes/tpthemes/layout/にbootstraplを追加し、次のコードを追加します。
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Theme example</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<!-- Bootstrap core CSS -->
<?php echo \Theme::instance()->asset->css('bootstrap.min.css'); ?>
</head>
<body>
<?php echo $header; ?>
<div class = "container">
<div class = "row">
<div class = "col-sm-12">
<?php echo $content; ?>
</div>
</div>
</div>
</body>
</html>
ここでは、テーマインスタンスとアセットメソッドを使用して、ブートストラップファイルのパスを取得しました。 ヘッダーとコンテンツの2つの変数を定義しました。 header は、ヘッダーの詳細を動的に設定するために定義されます。 content は、ページの実際のコンテンツを動的に設定するために定義されています。
- ステップ6 *-次のように、fuel/app/themes/tpthemes/partialsに新しいヘッダーテンプレートheader.phpを追加します。
<div class = "jumbotron text-center">
<h1>Theme support in fuelphp</h1>
<p>bootstrap based template</p>
</div>
ステップ7 *-新しいコントローラー、 *ThemeSample をfuel/app/classes/controller/themesample.phpに、 action をaction_indexに次のように作成します。
<?php
class Controller_ThemeSample extends \Controller {
public function before() {
$this->theme = \Theme::instance();
$this->theme->set_template('layouts/bootstrap');
$header = $this->theme->view('partials/header');
$this->theme->get_template()->set('header', $header);
}
public function action_index() {
$content = $this->theme
->view('themesample/index')
->set('message', 'This data comes from action page');
$this->theme
->get_template()
->set('content', $content);
}
public function after($response) {
if (empty($response) or ! $response instanceof Response) {
$response = \Response::forge(\Theme::instance()->render());
}
return parent::after($response);
}
}
ここでは、 Theme クラスのメソッドを使用してテーマの初期化を行うために、 before および after メソッドを使用しました。 使用されるメソッドのいくつかは、instance、get_template、set_template、およびviewです。
- ステップ8 *-最後に、次のように、fuel/app/themes/tpthemes/themesampleでindex.phpのインデックスアクションのビューを追加します。
<p>The data comes from *fuel/app/themes/tpthemes/themesample/indexl* file.</p>
<p>
<?php echo $message; ?>
</p>
ここでは、コントローラーで動的に設定する必要がある1つの変数messageを定義しました。
新しいテーマ tpthemes を作成し、それを ThemeSample コントローラーで使用しました。 次に、URL http://localhost:8080/themesample/indexをリクエストして結果を確認します。 結果は次のとおりです。