Sites


Lutece : guide intégrateur

Les principaux fichiers

Pour se lancer dans l'intégration graphique d'un site généré avec Lutece, il faut surcharger, modifier les éléments fournis par l'outil, voir ajouter des fichiers ou des bibliothèques css/js.
Dans tous les cas l'intégration d'une charte graphique nécessitera la surcharge des modèles html, des feuilles XSL pour la partie document,  de la feuille de style css principale page_template_styles.css.

Les éléments de charte d'un site Lutece se situent dans l'arborescence suivante
NB: cet exemple inclut le plug-in "document".

  • css/
    • page_template_styles.css : Fichier css principal à modifier et surcharger;
    • plugins/
      • document/
        • document.css : Fichier contenant des surcharges nécessaires au plug-in "document".
  • images/
    • local/
      • skin/
        • plugins/
          • document/
  • themes/
    • theme1/
      • css/
        • page_template_styles.css : Fichier css décliné pour le thème choisi.
      • js/
      • images/
  • WEB-INF
    • templates
      • skin
        • plugins
          • document/
            • document_content_service.html : Modèle d'affichage du contenu d'un document.
        • search/
          • search_results.html : Modèle d'affichage des résultats de recherche.
        • sites/
          • page_frameset.html : Modèle principal qui englobe l'ensemble des modèles de pages.
          • page_header_home.html : Modèle de l'entête de page de la page d'accueil.
          • page_header_internal.html : Modèle de l'entête de page des pages internes.
          • page_template_[1..n].html : Modèle de page avec diverses présentations: 1 colonne, 2 colonnes...
          • page_footer.html : Modèle du pied de page.


Pour intégrer la charte souhaitée, il faut de façon presque systématique intervenir sur les fichiers suivants qui vont contenir l'ensemble du code statique et généré par l'outil.

 

Le conteneur de pages : le fichier page_frameset.html

Le fichier page_frameset.html est le fichier conteneur de pages  qui intègre les bibliothèques par défaut, le thème par défaut, les surcharges css et js fournis par les plugins du site ainsi que les balises freemarker qui permettent l'inclusion des modèles header, footer, include et des modèles de page qui seront décrits ci-après.

Le fichier se présente comme suit:

<!DOCTYPE html>
<html lang="fr">
<head>
<base href="${base_url}">
<title>${favourite} - ${page_name}</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta charset="${encoding}">
...
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le style -->
<#if plugin_theme?? >
    <#assign thetheme=plugin_theme />
<#else>
    <#assign thetheme=theme />
</#if>
<link href="${thetheme.pathCss}/bootstrap.min.css" rel="stylesheet">
<link href="${thetheme.pathCss}/bootstrap-theme.min.css" rel="stylesheet">
<link href="${thetheme.pathCss}/page_template_styles.css" rel="stylesheet">
...
${plugins_css_links}
<!-- Included JS Files -->
<script src="js/jquery/jquery.min.js"></script>
</head>
<body>
 <!-- header -->
<header role="banner">
${page_header}
</header>
<!-- end header -->
<div class="container">
<!-- container -->
${page_main_menu}
${page_path}
${page_content}
<!-- container -->
</div>
<footer>
${page_footer} 
${include_1!}
</footer>
<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.min.js"></script>
${plugins_javascript_links}
</body>
</html>

 

Les balises ou bookmark dans le langage Freemarker, délimité par "${...}", permettent de substituer du code produit par Lutece lors de la génération de la page du site.


Structure des fichiers modele dans Lutece

 

Détaillons les balises les plus significatives:

  • ${page_header} insère le contenu du template  page_header_home.html pour la page d'accueil ou  page_header_internal.html pour toutes les autres pages ;
  • ${page_main_menu} permet d'insérer le menu du site;
  • ${page_path} insère le fil d'ariane sur les pages internes du site ;
  • ${page_content} insère le contenu du template de page défini dans l'administration du site  page_template_[1..n].html pour la page ;
  • ${page_footer} insère le contenu du template page_footer.html ;
  • ${include_1!} insère un include soit un morceau de code HTML géré de façon spécifique dans Lutece.

Les modèles de page HTML

Les balises ci-dessus permettent d'intégrer le contenu des fichiers .html ci-dessous. Lors de l'appel de l'url de la page, Lutece aggrège l'ensemble du contenu de ces fichiers, selon l'ordre défini par l'emplacement des balises, et produit le contenu HTML final dans le navigateur Web.

Les fichiers page_header_home.html et page_header_internal.html

Ils insèrent le code html correspondant à l'entête du site par le page_header_home.html pour la page d'accueil ou par le page_header_internal.html pour toutes les autres pages.

Le bookmark ${page_main_menu}

Ce bookmark insère le menu qui est géré par défaut en XSL ou, si le plugin menu est installé, par des modèles de page spécifiques (voir chapitre Gérer l'apparence des Menus).

Le fichier page_path.html

Ce fichier permet d'insérer le code html correspondant au fil d'ariane. Le modèle contient le bookmark ${page_path} qui est généré par la xsl page_path.xsl qui se trouve dans la gestion des feuilles de styles du site -menu Charte > Gestion des feuilles de style XSL.

Les fichiers page_template_[1..n].html

Il est possible de disposer de plusieurs modèles de page dans un même site. Vous pouvez créer autant de modèles que désiré afin de guider le contributeur dans le positionnement des rubriques.

Lutece utilisant le framework CSS Twitter Bootstrap, l'intégration css doit utiliser les classes css de gestion des grilles apportées par le framework pour gérer la mise en page.
Il est conseillé de prendre en compte le rendu en mode "responsive design" pour permettre une vue adaptative de la page selon la taille de l'écran

Exemple de fichier:

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    ${page_content_col1}
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    ${page_content_col2}
  </div>
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    ${page_content_col3}
  </div>
</div>

 

Dans l'exemple ci-dessus, le modèle présente une page avec 3 colonnes, la première ${page_content_col1} fait 100% de la largeur de la page, et les deux colonnes suivantes font chacune 50% de la largeur de la page, pour un positionnement des colonnes qui se fera de la façon suivante :

 

 

Une fois les modèles créés, il faudra saisir dans la fonctionnalité Modèles de page du menu Charte du back-office, les informations nécessaires à l'utilisation des modèles définis dans la fonctionnalité d'Administration du site.

Le fichier page_footer.html

Ce fichier permet d'insérer le code html correspondant au pied de page du site.

Les inclusions de fichier ou page include

Certains plugins peuvent proposer des page include qui vont permettre d'inclure du code HTML dans les pages du site par le biais de bookmarks freemarker placés dans le gabarit principal du portail, dans l'exemple du page_frameset.html le ${include_1!}.

Les fichiers CSS

Le fichier page_template_style.css

C'est le fichier css principal qui contient toutes les surcharges nécessaires à l'application de la charte du site. Il doit évidemment être le plus petit et complet possible afin de couvrir un maximum de fonctionnalités du site (pages, formulaires...) et éviter ainsi les surcharges trop importantes dans les css des plugins. 

Les fichiers css des plugins

Certains plugins ont par défaut une feuille de style qui se trouvera dans l'arborescence du site dans css/plugins/nom_du_plugin/nom_du_plugin.css.

Ces fichiers css apparaitront après substitution du tag ${plugins_css_links} dans le header du page_frameset.html lors de la génération de la page.

Les fichiers Javascript

En sus des bibliothèques définies par défaut dans Jquery et des fichiers css apportés par Bootstrap, vous pouvez ajouter notamment dans le fichier page_frameset.html votre(vos) propre(s) bibliothèque(s) javascript, que vous placerez dans le dossier "/js" situé à la racine du site ou dans le répertoire "theme\themeXX\js" s'il s'agit d'un fichier js concernant une déclinaison.

Les fichiers js des plugins

Certains plugins ont par défaut des bibliothèques javascript qui se trouvent dans l'arborescence du site dans js/plugins/nom_du_plugin/*.js.

Les fichiers javascript qui sont inclus par les plugins apparaitront après subsitution du tag ${plugins_javascript_links} en fin du page_frameset.html lors de la génération de la page.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.