Un thème est un répertoire dont le nom correspond au thème. Ce répertoire est à placer dans le répertoire src/app/custom/themes de l’arborescence Lodex.
Le plus simple est de dupliquer le thème « default » et de le renommer avec le nom de votre thème (ex: votrenouveautheme).
Le thème contient a minima (liste des fichiers) :
- defautTheme.js
- index.ejs
- lodex-theme.json
- robots.txt
et un répertoire css où se trouve style.css
Les autres fichiers sont pour la vignette favicon de lodex qui s’affiche dans l’onglet de différente manière selon les navigateurs et systèmes.
Intégrer le thème dans lodex en 2 étapes
- Déclarer le thème dans Lodex :
Le nom du répertoire de ce nouveau thème doit être déclaré dans la configuration générale de lodex : lodex/config.json ,
en fin de liste dans l’exemple ci-dessous :"themes": [ "voscouleurs", "void", "nougat", "inist", "istex", "istex-legacy" "votrenouveautheme" ], - Mettre à jour le fichier lodex-theme.json dans le répertoire de votre thème
Ce fichier au format json comporte une description avec le nom du theme qu’il faut mettre à jour avec votre nouveau nom de thème."description": { "fr": "Mon nouveau thème", "en": "My new theme" },Votre thème sera ainsi accessible depuis la liste des thèmes de Admin/config de votre lodex.
-> voir un exemple de fichier lodex-theme.json
Construction du thème
Chaque thème comporte un fichier index.ejs contenant une balise dont l’identifiant est root. C’est dans cet élément HTML que s’instancie l’application.
Autrement dit, le contenu lodex s’affichera dans la balise <div id="root"></div> du fichier index.ejs(1)
Le fichier index.ejs contient déjà toutes les balises html <head> , <body> , ... nécessaires à un fichier web.
(1) ejs : langage de template html/javascript utilisé pour récupérer les variables des thèmes déclarées dans la configuration de l’instance.
Autrement dit encore une fois, une instance de Lodex est un site web statique, sauf pour l’élément div#root contenant l’application Lodex.
Vous pouvez donc ajouter dans le répertoire de votre thème :
- du CSS
- du JavaScript
- des images
- des sous-répertoires ou d’autres pages html
Les sous répertoires ou les pages devront être accessibles à partir du fichier index.ejs via des menus qui seront statiques et vous permettront de réaliser un thème complet.
Autrement dit, Dans le cas où des pages statiques comme “Documentation”, “Mentions légales”, “Méthodologie” sont inclues dans le thème, il vous faudra créer votre propre menu
Il est également possible d’utiliser le menu lodex de navigation par icônes, en bas de page, et en particulier Advanced Menu à renseigner dans la configuration de l’instance pour afficher un lien vers ces documents.
Voir : Les paramètres d’une instance
Attention à ne pas utiliser des liens incluant des noms de domaines (utilisez /other_page.html, et non pas http://mydomain.com/other_page.html).