Gabarits, mise en page

Mise en page

Le template de mise en page par défaut se trouve dans :

pour la TEI : [projet-]MaX/ui/templates/tei.html
pour l’EAD : [projet-]MaX/ui/templates/ead.html

Il est possible de remplacer cette mise en page en créant son propre template. Pour cela, on ajoute un fichier nommé template.html dans le dossier [projet-]editions/[edition]/ui/templates.

Le template contient des références à des variables qui seront remplacées par le contenu correspondant à l’affichage. Les variables disponibles sont :

$projectId : identifiant de l’édition,
$prettyName : le titre de l’édition (tel qu’il doit s’afficher),
$baseURI : valeur de la variable de configuration baseURI,
$home : le lien vers la page d’accueil du site,
$menu : le menu de l’édition,
$navigationSelect : la barre de navigation de l’édition,
$textOptions : le sélectionneur d’options de lecture,
$head : les déclarations d’import de css et les métadonnées à placer dans le header html,
$content : le contenu de la page à afficher (document, fragment, sommaire…),
$footer : le pied de page de l’édition,
$jsImports : les déclarations des variables et des imports de script js.

Il peut être également pratique, dans certains cas, de faire référence à un template autrement nommé ou qui se trouve dans une autre édition. Dans ce cas, il est possible d’ajouter dans mon-edition_config_inc.xml un élément : <template file="une-autre-edition/ui/templates/template.html"/>

<!-- Exemple de fichier template.html -->

<!DOCTYPE html>
 <html>
  <head>
       <meta charset="UTF-8"/>
       <link rel="stylesheet" href="{$baseURI}core/ui/lib/bootstrap.min.css"/>
       <link rel="stylesheet" type="text/css" href="{$baseURI}core/ui/css/tei.css"/>
      {$head}
  </head>
    <body>
     <header id="topbar" class="navbar fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="{$home}">
            {$prettyName}
        </a>
        <div id="menu">
            {$menu}
        </div>
        <div id="navigation-wrap">
            {$navigationSelect}
        </div>
        <div>
            {$textOptions}
        </div>
    </header>

    <div id="main-max-container">
        {$content}
    </div>
    <!-- footer -->
    {$footer}

   <!-- js imports -->
    <script type="text/javascript" src="{$baseURI}core/ui/lib/bootstrap.bundle.min.js"/>
    <script type="module" src="{$baseURI}core/ui/js/MaxTEI.js"/>
    {$jsImports}
  </body>
</html>

Voir la section Surchages, Mise en page