Un peu de code
Nous allons voir aujourd’hui un exemple complet de dynamisation, c’est-à-dire rendre votre site web dynamique et le rendre plus attractifs.
Nous allons commencer par une petite conception de notre exemple. Pour cela vous devez déclarer deux classes (Accueil et Rubrique).
Classe Accueil : pour la Home de site.
Classe Rubrique : pour les différents rubriques de site
Pour créer des classes, sous le site du Back-office on clique sur la rubrique « Administrartion », sur le menu droit, nous avons un lien Classes.
Pour que notre travaille soit bien organisé, nous allons créer un nouveau groupe de classes, vous le nommez comme vous voulez. Une fois fait, on peut ajouter nos 2 classes.
Nom : Le nom de classe
Identifiant : l’identifiant de la classe qui sera très utiles dans le code
Description : une courte description de la classe
Modèle de nom d’objet : ici nous avons mentionné quel nom va prendre l’objet. Ici on ‘a mis le nom de l’attribut Titre <identifiant_attribut_x>
Modèle de génération de l’url : le même principe que le modèle nom d’objet, mais cette fois, ça sera l’url généré.
Pour ajouter vos propres attributs:
Nous avons maintenant deux classes, avec deux attributs (Titre de type Ligne de texte et Contenu de type Bloc xml).
Nos classes Accueil et Rubrique sont pareille pour le moment, mais nous allons sûrement ajouter d’autre attributs.
Après le clique sur le lien Contenus du Back_Office, on peut voir :
Maintenant, nous allons créer un objet de la classe Accueil, pour cela, vous cliquez sur l’icône de folder « eZ Publish », une liste s’ouvre, ensuite => Créer ici, une autre liste s’ouvre qui contient les différents classes de site. Ensuite vous suivez les différentes instructions.
A se stade, si vous essayer d’afficher le FrontOffice, vous aurez la vue full de folder « eZ Publish » , ici vous avez le choix,
- Soit vous surchargez cette vue et vous mettez vos propres contenus,
- Soit via le BackOffice , clique sur le folder, -> Avancé -> échanger avec un autre nœud. (Notamment échanger avec le nouvel nœud créé celle du home). C’est cette solution que je fais souvent, après l’échange je supprime le folder « eZ Publish ».
- Soit sur votre fichier extension/ezsite/settings/site.ini.append.php
N.B : si vous n’avez pas ce fichier sur votre extension, vous devez le créer
Vous ajoutez ce bout de code
[SiteSettings] IndexPage=/content/view/full/59/
Ici nous avons mentionné que la page par défaut sera le nœud 59, qui est l’id nœud de l’objet que nous avons créé. (Vous pouvez revoir la partie de concept de bases).
Une petite astuce, si vous n’arrivez pas à voir les objets que vous avez crée sur le back_office, il vous suffit de suivre cette procédure :
Sur le fichier : settings/ siteaccess/ projet_admin/ contentstructuremenu.ini.append.php
Vous ajoutez les identifiants des nouvelles classes créées.
<?php /* #?ini charset="utf-8"? [TreeMenu] Dynamic=enabled ShowClasses[] ShowClasses[]=folder ShowClasses[]=user_group ShowClasses[]=accueil ShowClasses[]=rubrique */ ?>
Voilà ce que vous aurez après la création de votre objet Accueil
Alors si vous avez optez pour le choix numéro 2 , Vous aurez quelque chose comme ça :
De la même façon, nous allons créer des rubriques, en dessous de le nœud Accueil
Après la création des classes et les nœuds, on passe à une autre chose.
Un peu de code
Sur votre page « pagelayout.tpl », vous devez mettre la structure HTML globale de vos pages.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<!-- HEAD -->
{include uri="design:page_head.tpl"}
<!-- /HEAD -->
<body>
<div id="container">
<div id="header">
<h1>Tutorial </h1>
<h2>eZ Publish Open Source</h2>
</div>
{* Intégration menu *}
{include uri="design:parts/menu.tpl"}
{* /Intégration menu *}
<div id="content">
<div id="content_top"></div>
<div id="content_main">
{$module_result.content}
</div>
<div id="content_bottom"></div>
<div id="footer">
<h3><a href="http://www.google.com">footer1</a> | <a href="http://www.twitter.com">footer2</a> | <a href="http://www.htmlcodes.me">footer3</a> | <a href="http://www.free-templates.me">footer4</a></h3>
</div>
</div>
</div>
</body>
</html>
comme vous le remarquez, on utilise des include comme le cas de :
« include uri= « design :page_head.tpl » ».
Là on met la balise head et son contenu. Donc les différents appels aux fichiers de style et de JavaScript.
« include uri= « design :parts/menu.tpl ».
Pour la page menu.tpl
{def $rubriques = fetch('content','list',hash('parent_node_id', 2,
'class_filter_type', 'include',
'class_filter_array', array('rubrique') ))
$home = fetch( 'content', 'node', hash( 'node_id', 2 ) )}
{* on récupére une liste des nodes dont la parent_node_id vaut 2*}
{* on récupére la node dont le node_id vaut 2*}
{* ces fonctions sont en fait que des requetes sql*}
<div id="menu">
<ul>
<li><a href={$home.url_alias|ezurl()}>{$home.name}</a></li>
{foreach $rubriques as $rubrique}
<li><a href={$rubrique.url_alias|ezurl()}>{$rubrique.name}</a></li>
{/foreach}
</ul>
</div>
A lire les commentaires pour mieux comprendre ce que fait chaque bout de code.
Le fetch ; list est une fonction qui permet de récupérer une liste des nœuds.
Le fetch ; node : est un fonction qui permet de récupérer un nœud identifié par un numéro d’identification
Lien pour la documentation http://doc.ez.no/eZ-Publish/Technical-manual/4.x/Reference/Template-fetch-functions
Si tout se passe bien, vous aurez un affichage avec votre menu (Home, Rubrique1, Rubrique2)
Maintenant si vous cliquez sur la rubrique1 :
Pour faire votre propre affichage, Il faut surcharger la vue par défaut des noeuds de type classe Rubrique.
Une petite explication :
Le système de surcharge de templates permet d’utiliser d’autres templates que ceux par défaut. Ce mécanisme permet la création de surcharges de template pour n’importe quel template utilisé par eZ publish.
Les surcharges de templates doivent être définies dans le fichier override.ini.append.php d’un siteaccess. pour notre cas :
«/settings/siteaccess/plain_site/override.ini.append.php».
Ce fichier se compose de blocs, chacun d’eux constituant un ensemble nommé de règles de gestion à eZ Publish d’utiliser, dans certaines conditions, un template alternatif particulier.
{1}[full_rubrique]
{2}Source=node/view/full.tpl
{3}MatchFile=full/rubrique.tpl
{4}Subdir=templates
{5}Match[class_identifier]=rubrique
{1} : le nom unique de surcharge
{2} : le nom du template à surcharger
{3} : le nom du template de surcharge
{4} : le nom du répertoire dans lequel est placé le template de surcharge
{5} : condition qaund le surcharge doit être employée
En résumé : nous avons mentionné au système ceci : pour la vue full du nœud Rubrique que nous avons crée sous le nœud Accueil, au lieu d’utiliser la vue par défaut, on utilisera notre vue « rubrique.tpl » situé dans le chemin suivant :
« extension/ezsite/design/ezsite/override/templates/full/rubrique.tpl ».
[full_accueil] Source=node/view/full.tpl MatchFile=full/accueil.tpl Subdir=templates Match[class_identifier]=accueil [full_rubrique] Source=node/view/full.tpl MatchFile=full/rubrique.tpl Subdir=templates Match[class_identifier]=rubrique
Nous allons créer notre vue rubrique.tpl
Rappelez-vous que nous avons deux attributs à afficher pour la classe Rubrique (Titre et un contenu de type Bloc xml).
<h2>{$node.name}</h2>
{attribute_view_gui attribute=$node.data_map.description}
On affiche le titre et le contenu.
La variable $node est accessible depuis les vues full ou line d’un nœud
Elle contient toutes les données concernant le nœud courant
Pour savoir plus, essayez de faire {$node|attribute(show)}
Normalement vous devez avoir un exemple qui fonctionne bien avec un lien vers la home et deux autres liens vers les rubriques (rubrique1 et rubrique2) ;
Dans cet article nous avons vu comment peut-on créer des classes et des objets de contenu, ainsi une dynamisation de contenu , en passant par le mécanisme de surcharge des vues par défaut.