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' => '.html', 
      '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::forge()バックグラウンドで。どちらのAPIも似ていますが、viewメソッドがthemesフォルダー（fuel / app / views /フォルダーではなくfuel / app / themes / tpthemes /）内のビューファイルを検索する点が異なります。

$theme = \Theme::instance(); 
$view = $theme->view('template/index'); 
// *fuel/app/themes/tpthemes/template/index.php

プレゼンター

プレゼンターメソッドは Presenter::forge()バックグラウンドで。両方のAPIは類似していますが、presenterメソッドがthemesフォルダー内のビューファイルを検索します。fuel/ app / views /フォルダーではなくfuel / app / themes / tpthemes /です。

$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');

後退する

フォールバックメソッドを使用すると、フォールバックテーマを設定できます。

$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は、テーマへのパスが見つかった場合はtrueを返し、それ以外の場合はfalseを返します。

$theme = \Theme::instance(); 
$path = $theme->find('newtheme')

すべて

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

実例

従業員アプリケーションにテーマサポートを追加しましょう。

Step 1 −次の内容の新しいテーマ構成ファイルfuel / app / config /theme.phpを追加します。

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

Step 2 −テーマtpthemesの新しいアセットフォルダーpublic / assets / tpthemes / cssを追加します。

cd /go/to/app/root/path 
mkdir -p public/assets/tpthemes/css

Step 3 −最新のブートストラップをダウンロードし、bootstrap.min.cssをpublic / assets / tpthemes / cssの下に配置します

Step 4 −新しいフォルダーtpthemesをfuel / app / themesフォルダーの下に追加します。

cd /go/to/app/root/path   
mkdir -p fuel/app/themes/tpthemes

Step 5 −新しいレイアウトテンプレートbootstrap.htmlをfuel / app / themes / tpthemes / layout /の下に追加し、次のコードを追加します。

<!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 ページの実際のコンテンツを動的に設定するために定義されています。

Step 6 −次のように、新しいヘッダーテンプレートheader.phpをfuel / app / themes / tpthemes / partialsに追加します。

<div class = "jumbotron text-center">
   <h1>Theme support in fuelphp</h1> 
   <p>bootstrap based template</p>  
</div>

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

ここでは、 before そして after のメソッドを使用してテーマの初期化を行うメソッド Themeクラス。使用されるメソッドには、instance、get_template、set_template、およびviewがあります。

Step 8 −最後に、次のように、インデックスアクションのビューindex.phpをfuel / app / themes / tpthemes / themesampleに追加します。

<p>The data comes from *fuel/app/themes/tpthemes/themesample/index.html* file.</p> 
<p> 
   <?php echo $message; ?> 
</p>

ここでは、コントローラーで動的に設定する必要がある1つの変数messageを定義しました。

新しいテーマを作成しました、 tpthemes で使用しました ThemeSampleコントローラ。URL http：// localhost：8080 / themesample / indexをリクエストして、結果を確認しましょう。結果は次のようになります。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved