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.