FuelPHP - Thèmes

Les thèmes sont utilisés pour activer plusieurs aspects et convivialité de l'application. Il offre à l'utilisateur / développeur la possibilité de modifier l'apparence et la convivialité de l'application sans perturber la fonctionnalité de l'application. Une application peut avoir un ou plusieurs thèmes. Chaque thème vit dans son propre dossier. Apprenons à créer des thèmes dans ce chapitre.

Configuration du thème

FuelPHP fournit un fichier de configuration séparé pour les thèmes, fuel/app/config/themes.php. Tous les paramètres liés au thème sont configurés dans ce fichier. Certains des principaux paramètres de thème sont les suivants -

  • active - Nom du thème actif

  • fallback - Nom du thème de secours, si le thème actif n'est pas trouvé

  • paths - Tableau du chemin pour rechercher et trouver des thèmes

  • assets_folder- Normalement, les ressources doivent être à l'intérieur de DOCPATH pour être accessibles via le Web. Il fait référence au dossier de ressources pour les thèmes à l'intérieur du DOCPATH

  • view_ext - Extension du fichier de vue du thème

  • info_file_name - Fichier contenant des informations étendues sur les thèmes

  • require_info_file - S'il faut exiger le fichier d'informations sur le thème, info_file_name

  • use_modules - Utiliser ou non le module actuel

La configuration simple du fichier de thème est la suivante.

<?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, 
   );

Ici nous avons mis,

  • Le nom du thème actif et de secours en tant que thèmes
  • Le chemin du dossier de thème comme fuel / app / themes /
  • Le chemin du dossier d'actifs sous la forme / public / assets / tpthemes /

Cours à thème

Une fois la configuration terminée, nous pouvons utiliser la classe Thème fournie par FuelPHP pour faire les fonctionnalités du thème. Faites-nous part des méthodes disponibles dans la classe Theme de ce chapitre.

exemple

La méthode instance permet de créer un nouveau thème. Il a les deux paramètres suivants,

  • $name - Nom du thème (facultatif)

  • $config - Tableau de configuration du thème (comme vu dans la section de configuration)

Les deux paramètres sont facultatifs. Si aucun paramètre n'est spécifié, il essaie d'obtenir le thème par défaut à partir du fichier de configuration. Si le nom du thème est spécifié, il essaie d'obtenir les autres paramètres du fichier de configuration. Si la configuration est également spécifiée, elle utilisera le paramètre spécifié par l'utilisateur au lieu du paramètre du fichier de configuration.

$theme = \Theme::instance(); 
$theme = \Theme::instance('tpthemes'); 
$theme = \Theme::instance ('mytheme', array ( 
   'active' => 'mytheme', 'view_ext' => '.php'));

la forge

forge est similaire à instance, sauf qu'il n'a qu'un tableau de configuration.

$theme = \Theme::forge (array( 
   'active'   => 'tpthemes', 
   'fallback' => 'tpthemes', 
   'view_ext' => '.php', 
));

vue

La méthode view utilise la View::forge()en arrière-plan. Les deux API sont similaires, sauf que la méthode de visualisation recherche le fichier de vue dans le dossier des thèmes, fuel / app / themes / tpthemes / au lieu de fuel / app / views / folder.

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

présentateur

La méthode du présentateur utilise le Presenter::forge()en arrière-plan. Les deux API sont similaires, sauf que la méthode du présentateur recherche le fichier de vue dans le dossier des thèmes, fuel / app / themes / tpthemes / au lieu de fuel / app / views / folder.

$theme = \Theme::instance(); 
$presenter = $theme->presenter('template/index');

asset_path

La méthode asset_path renvoie le chemin d'accès à l'actif demandé par rapport au thème actuellement sélectionné.

$theme = \Theme::instance();  

// public/assets/tpthemes/css/style.css 
$style = \Html::css($theme->asset_path('css/style.css'));

add_path

La méthode add_path permet d'ajouter un chemin de thème lors de l'exécution.

$theme = \Theme::instance(); 
$theme->add_path(DOCROOT.'newthemes');

add_paths

La méthode add_paths permet d'ajouter plusieurs chemins de thème au moment de l'exécution.

$theme = \Theme::instance();   
$theme->add_path(DOCROOT.'newthemes');

actif

La méthode active permet de définir le thème actif.

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

se retirer

La méthode de secours permet de définir le thème de secours.

$theme = \Theme::instance();
$fallback = $theme->fallback('custom');

get_template

get_template renvoie l'instance View du modèle de thème actuellement chargé.

$theme = \Theme::instance(); 
$theme->get_template()->set('body', 'Theme can change the look and feel of your app');

set_template

La méthode set_template permet de définir le modèle de thème de la page.

$theme = \Theme::instance(); 
$theme->set_template('layouts/index')->set('body', 'set theme template');

trouver

find renvoie true, si le chemin d'accès au thème est trouvé, sinon il renvoie false.

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

tout

all renvoie un tableau de tous les thèmes dans tous les chemins de thème.

$theme = \Theme::instance(); 
$themes = $theme->all();

get_info

La méthode get_info renvoie une variable spécifique du tableau d'informations du thème. Si aucun thème n'est spécifié, le tableau d'informations du thème actif est utilisé.

$theme = \Theme::instance(); 
$var = $theme->get_info('color', 'green', 'newtheme');

Ici, la méthode get the color est définie dans 'newtheme'. S'il n'est pas défini, il utilisera «vert» comme couleur par défaut.

set_info

La méthode set_info définit une variable dans le thème actif ou de secours.

$theme->set_info('color', 'green', 'fallback');

set_partial

La méthode set_partial permet de définir une vue partielle pour une section nommée de votre modèle de page. Habituellement, cela se fait via un appel HMVC.

$theme = \Theme::instance(); 
$theme->set_template('layouts/homepage'); 
$theme->set_partial('navbar', 'homepage/navbar');

get_partial

La méthode get_partial permet d'obtenir l'instance de vue d'un partiel précédemment défini dans une section nommée de votre modèle de page.

$theme = \Theme::instance(); 
$theme->set_partial('sidebar', 'partials/menu'); 
$theme->get_partial('sidebar', 'partials/menu')->set('class', 'menu green');

Exemple de travail

Ajoutons le support de thème dans notre application employé.

Step 1 - Ajoutez un nouveau fichier de configuration de thème, fuel / app / config / theme.php avec le contenu suivant.

<?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 - Ajouter un nouveau dossier d'actifs, public / assets / tpthemes / css pour le thème, tpthemes.

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

Step 3 - Téléchargez le dernier bootstrap et placez le bootstrap.min.css sous public / assets / tpthemes / css

Step 4 - Ajouter un nouveau dossier, tpthemes sous le dossier fuel / app / themes.

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

Step 5 - Ajoutez un nouveau modèle de mise en page, bootstrap.html sous fuel / app / themes / tpthemes / layout / et ajoutez le code suivant.

<!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>

Ici, nous avons utilisé une instance de thème et une méthode d'actif pour obtenir le chemin du fichier d'amorçage. Nous avons défini deux variables, l'en-tête et le contenu.header est défini pour définir dynamiquement les détails de l'en-tête. content est défini pour définir dynamiquement le contenu réel de la page.

Step 6 - Ajoutez un nouveau modèle d'en-tête, header.php à fuel / app / themes / tpthemes / partials comme suit.

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

Step 7 - Créer un nouveau contrôleur, ThemeSample à fuel / app / classes / controller / themesample.php et action à action_index comme suit.

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

Ici, nous avons utilisé before et after méthode pour faire l'initialisation du thème à l'aide des méthodes de Themeclasse. Certaines des méthodes utilisées sont instance, get_template, set_template et view.

Step 8 - Enfin, ajoutez une vue pour l'action d'index, index.php dans fuel / app / themes / tpthemes / themesample comme suit.

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

Ici, nous avons défini une variable, message, qui doit être définie dynamiquement dans le contrôleur.

Nous avons créé un nouveau thème, tpthemes et l'a utilisé dans ThemeSamplemanette. Vérifions maintenant le résultat en demandant l'URL, http: // localhost: 8080 / themesample / index. Le résultat est le suivant.