Guide RENE-CLI

Installation

Pré-requis

L'application RENE-CLI pour fonctionner sur un poste client doit :

• installer Node.js (v4.4.7 LTS) ;

• installer GraphicsMagick et configurer les variables d'environnement pour qu'il soit dans le PATH d'exécution. Remarquons que dans Windows, cette étape n'est pas nécéssaire. Nous avons utilisé le pacakge graphicsmagick-static qui deploit pour nous automatiquement dans le repertoire node_modules ce binaire, et qu'il est injecté dans le PATH automatiquement par l'application elle même à chaque execution.

Déploiement et installeur

Il faudrait créer un installeur Windows (peut être avec InnoSetup ?). Pour l'instant aucune solution n'est proposée.

Commande create

Afficher le rendu local d'une campagne

Pour créer une newsletter localement on utilise la commande create comme ci-dessous. On peut ajouter les options -v, -vv ou -vvv pour augmenter la verbosité, et --openLocal pour ouvrir la version HTML locale dans un navigateur.

λ node rene.js create .\exemples\RENE01__simple_message\campagneData.json

Ci-dessous, un exemple de campagneData.json décrivant les données de la newsletter. La propriété metadatas dans ce fichier est écrite par l'application.

{
  "title": "Campagne d'informations R.E.N.",
  "type": "Flash info",
  "dateCreation": "2016-03-24, 15h00",
  "datePlannedPublication": "Pas de planification",
  "subject": "[Académie d'Orléans-Tours][Flash info] Le répertoire des établissements numérique",
  "sender": {
    "name": "DEP",
    "email": "ce.dep@ac-orleans-tours.fr"
  },
  "receivers": [
    "vincent.blain@ac-orleans-tours.fr",
    "padi@ac-orleans-tours.fr",
    "padi@ac-orleans-tours.fr"
  ],
  "messages": {
    "principal": {
      "level": 1,
      "title": "Le répertoire des établissements numérique",
      "image": {
        "src": "http://aot.fr/images/logo_application_REN_for_RENE.jpg",
        "alt": "Logo du répertoire des établissements numérique",
        "linkTo": "http://www.ac-orleans-tours.fr/"
      },
      "sousTitre": "Une nouvelle application dans votre portail",
      "content": "<p>Le répertoire des établissements est désormais totalement dématerialisé. Plus rapide, plus intituif et toujours à jour sur le site web académique. Il est également accessible depuis le portail académique sous la forme d'une application mobile et sur votre ordinateur.</p><p> <a href='https://extranet.ac-orleans-tours.fr/ren/'> <img src='./localImages/image_ren_for_RENE.jpg' /> </a></p><p> <a href='https://extranet.ac-orleans-tours.fr/ren/'> Accédez à l'application REN. </a></p><br><p> L'installation de cette application sur votre mobile peut être prise en charge par la <abbr title='Division des systèmes d'information'>Dsi</abbr>. Il vous suffit d'envoyer une <a href='mailto:support@ac-orleans-tours.fr?BCC=padi@ac-orleans-tours.fr&Subject=%5BDemande%20d%27installation%20de%20l%27application%20REN%20sur%20mon%20smartphone%5D&body=Bonjour,%0D%0A%0D%0APourriez-vous installer l'application REN (Répertoire Etablissement Numérique) sur mon smartphone, d'avance je vous remercie.%0D%0A%0D%0AInformations utiles pour l'installation :%0D%0A%0D%0A Division, Service : %0D%0A Modèle de smartphone : %0D%0A Dates de disponibilité : %0D%0A%0D%0ACordialement'>demande d'installation par email</a> au service de la bureautique.</p>"
    }
  },
  "metadatas": {
    "id": "rJOyEOGD-0"
  }
}

Vérifier la structure d'un fichier de métadonnées d'une campagne

Avant la génération l'application vérifie que le fichier JSON est valide et sinon il affiche toutes les erreurs qu'il a détecté. Dans l'exemple donné ci-dessous on a glissé deux erreurs. Le moteur de vérification de l'application est capable de les identifier. Dans cet exemple, on voit qu'on a oublié de renseigner l'expediteur sender et que le message principal n'a pas de titre title.

Déployer une campagne dans un dépôt distant

Il faut au préalable configuer les informations de connexion au dépôt distant dans le fichier ./app/config/config.js dans la section storage. Voir configuration section storage pour plus d'informations.

λ node rene.js create .\exemples\RENE01__simple_message\campagneData.json --deploy

Jeu d'options disponibles de la commande create

Les options disponibles de cette commande sont listés ci-dessous :

Processus étape par étape de création d'une campagne RENE

Cette commande sert pour créer une nouvelle campagne et pour déployer (uploader) la version HTML vers le dépôt distant. Pour fonctionner elle a besoin qu'on lui passe en argument un fichier JSON qui contient les données d'une campagne (titre, destinataires, message de niveau 1, de niveau 2 ...).

Par convention, le fichier JSON qui décrit les données d'une campagne RENE se nomme campagneData.json et doit respecter une structure décrite par le schéma d'une campagne. Plus précisement, il s'agit d'un schema JSON qui se trouve dans le répertoire ./app/lib/schemas/campagne-rene.schema.json dans lequel vous pouvez trouvez également des exemples de fichier JSON de campagnes RENE valide.

La commande create campagneData.json en fonction des options passés, suit le processus suivant :

1. Lancement de la commande et analyse des options passés. On vérifie que les options passés existent.

2. Nettoie le répertoire de génération localStorage par suppression de tout ses fichiers et répertoires si la configuration dans le fichier ./app/config/config.js à activé la propriété storage.cleanLocal:true.

3. Analyse du contenu du fichier campagneData.json fourni en argument contenant les données de la campagne. On vérifie en premier que le fichier existe et qu'il est accessible, ensuite on le charge (par désérialisation) dans l'application, et enfin on vérifie qu'il respecte bien le schéma JSON d'une campagne. Le moteur de vérification du schéma stocke l'ensemble des erreurs de syntaxe. Il ne s'arrete pas à la première erreur rencontré.

4. Vérifie si la campagne a déjà été déployé, et si tel est le cas annule ce processus. Cette vérification peut être annuler avec l'option --forceDeploy. L'utilisation de cette option incrémente alors par la suite l'identifiant de la campagne lors de l'initialisation des métadonnées.

5. Initialisation des métadonnées de la campagne (dont notamment son identifiant). Les métadonnées sont sauvegardées directement dans le fichier campagneData.json dans l'attribut metadatas. Elles servent par la suite pour la génération et le suivi des informations relatives à la campagne (date de création, de publication, lien de la version distante...).

6. Création du repertoire de génération pour cette newsletter dans le repertoire localStorage. Ce dernier est configurable à l'aide de la propriété storage.local.

7. Génère la version locale de la newsletter en fonction du template choisi. Le choix du template se fait avec la configuration template.name. Par défaut c'est le répertoire ./app/lib/template/default/ qui est chargé. Le moteur de rendu commence en premier par transformer toutes les variables dans le fichier de configuration ./app/config/config.js. Elles sont sous la forme {{foo}} et généralement employées dans la configuration du header ou du footer de la campagne. La version html et texte de l'email sont sérialisés dans les métadonnées du fichier JSON : respectivement metadatas.renderHtml et metadatas.renderText.

8. Optimise le code HTML par injection automatique des styles CSS externes. On commence par injecter toutes les feuilles de styles externes dans des balises style dans la section HEAD. Ensuite on injecte touts les styles directement dans les noeuds html (inline-css) et on supprime les styles généraux dans la balise HEAD, on ne garde dans la balise HEAD que les styles de media-queries. Au final on sauvegarde dans les métadonnées le code html optimisé.

9. Optimise les images présentes dans la newsletter, si la configuration optimiseImages.transformToOptimized est activé. Pour ce faire on copie (les images relatives) ou télécharge (les images dont la source est distante) toutes les images mentionnées dans la newsletter dans le répertoire de génération localStorage. On utilise le binaire graphicsmagick pour toutes les opérations de manipulation d'image.

10. Inspecte la taille de chaque image principale de niveau 1 et de niveau 2. Si leur largeur dépasse la valeur maximum autorisé optimiseImages.maxWidthPrincipalImage, alors on redimensionne à cette largeur maximum ces images.

11. Inspecte la taille de chaque image mentionnés dans le contenu des messages. Si leur largeur dépasse la valeur optimiseImages.maxWidthInContent, alors on redimensionne à cette largeur maximum ces images.

12. Transforme les images de niveau 3 en carré de 100px si la configuration optimiseImages.transformToSquareImagesLevel3 est activé, pour éviter l'anamorphose des images. Pour ce faire on détecte le côté le plus grand de l'image. On crop l'image à cette dimension et on redimensionne le carré obtenu à 100px.

13. Transforme dans le code HTML toutes les réferences des images. Les sources des images pointent vers une image distante, autrement dit sous la forme <img src="http://remote-storage/rene/RENE_xxx/images/mon-image.jpg"/>. Ainsi dans le code HTML , il n'existe plus une seule référence relative d'images.

14. Nettoyage du code HTML généré.

15. Ecriture de la version texte envoyé dans l'email dans le répertoire de génération localStorage.

16. Ecriture de la version locale HTML dans le répertoire de génération localStorage. C'est ce code HTML qui sert de debug local (il contient des références d'images relatives).

17. Ecriture de la version email HTML dans le répertoire de génération localStorage. C'est ce code HTML qui est envoyé par e-mail (il ne contient pas de références d'images relatives).

18. Ecriture de la version distante HTML dans le répertoire de génération localStorage. C'est ce code HTML qui est déployé sur le dépot distant (il ne contient pas de références d'images relatives et n'a plus le message voir la version en ligne en haut de page.

19. Copie tout les fichiers du répertoire de génération localStorage vers un répertoire de sortie si l'option -o, --output <path> est passé à la commande.

20. Déploi sur le dépôt distant la version HTML correspondante si l'option -d, --deploy est passé à la commande. Les informations du dépôt distant se trouve dans la propriété storage.remote du fichier de configuration. Par convention, on ne peut déployer une campange qu'une fois mais il est possible de forcer le déploiement avec l'option -f, --forceDeploy passé à la commande. L'upload des fichiers se fait avec ssh/scp/sftp soit par login/pwd ou bien par login/clef ssh.

21. La publication, envoi de la newsletter par email, peut se faire immédiatement en ajoutant l'option --imediatePublish à la commande.

Commande list

Lister les campagnes déployées et/ou publiées

λ node rene.js create .\exemples\RENE01__simple_message\campagneData.json --deploy

Les options disponibles de cette commande sont listés ci-dessous

Processus détaillé de la commande list

Cette commande permet de récuperer l'ensemble des campagnes déployées sur le dépôt distant. Les informations qui décrivent une campagne (identifiant, date de génération, expedtieur, destinataires ...) proviennent de l'analyse du fichier campagneData.json hebergé sur le distant. Elle suit le processus suivant :

1. Connection au dépôt distant avec un client ssh ;

2. Récupère l'arbre de tous les fichiers dans le répertoire de déploiement du dépôt distant ;

3. Analyse de l'arbre pour extraire uniquement les répertoires qui commencent par RENE. Puis à l'aide d'une expression régulière on récupere dans le nom du répertoire différentes informations dont son identifant, sa date de deploiement et son nom slugged.

4. On vérifie que le repertoire contient le fichier campagneData.json dans lequel on trouve les métadonnées de la campagne dont a besoin pour construire le tableau d'information en sortie console.

5. La sortie en console se fait dans un tableau qui peut être trier par l'option orderByNewer passé en arugment à la commande.

Commande info

Afficher les informations d'une campagne déployé dans un dépôt distant

λ node rene.js info SJB2HYjv-66

Commande open

Ouvrir une campagne déployé dans un dépôt distant

λ node rene.js open SJB2HYjv-66

C'est un raccourci pour la commande node rene.js info SJB2HYjv-66 --openRemote. On peut également ouvrir le fichier campagneData.json stocké dans le dépôt distant en ajoutant l'option --openJson.

Commande delete

Supprimer une campagne déployé dans un dépôt distant

λ node rene.js delete SJB2HYjv-66

Commande publish

Publier une campagne déployé en envoyant la newsletter par email

λ node rene.js publish SJB2HYjv-66

Attention vous ne devez publier une campagne qu'une seul fois. Il est possible de forcer la publication avec l'option --forcePublish, mais elle ne sert qu'à des fins de debug.

Processus détaillé de la commande publish

Cette commande permet de publier une campagne déja déployé dans le dépôt distant. Il faut au préalable connaître l'identifiant de la campagne que l'on souhaite publier (envoyer l'email aux différents destinataires).

Elle suit le processus suivant :

1. Récupération du fichier campagneData.json sur le dépôt distant à l'aide de l'identifiant donné en argument à la commande.

2. Configure les options de l'email à envoyer (expeditaire to, destinataires en bcc, sujet, message html, message texte ...). Toutes ces informations proviennent du fichier de métadonnées de la camapgne campagneData.json.

3. Affiche les informations décrivant la publication, et demande une confirmation dans la console pour continuer le traitement. La question peut être ignorée (répondu par l'affirmative), si on lance la commande avec l'option globale --no-interactive.

4. Création du transporter SMTP, avec la librairire nodemailer pour envoyer l'email. Sa configuration se trouve dans le fichier ./app/config/config.js dans la section emailOptions.

5. On envoie l'email, et en cas de succès on sauvegarde différentes informations dans le fichier de métadonnées campagneData.json du dépôt distant dont la date de publication.

Commande selfupdate

Lorsqu'on lance l'application, il existe un système de notification qui vérifie s'il n'existe pas une nouvelle version de l'applicaiton disponible. La dernière version disponible se fait dans le registry définit dans l'outil npm . Par defaut il s'agit du dépôt officiel npm, hors dans l'académie on utilise un dépôt privé avec la solution Sinopia dont l'url d'accès est http://forge.in.ac-orleans-tours.fr:30080.

Autrement dit, on compare le numéro de version dans le fichier ./package.json où l'application est installé avec le numéro de version le plus ancien sur le registry distant. Dans le cas où une nouvelle version est disponible, on l'affiche dans la sortie console.

Commande docs

Lance le site de documentation utilisateur embarquée dans l'application. Le serveur web local embarquée est accessible sur localhost:20100, il est construit avec la solution connect dans l'écosystème NodeJs.

Commande feedback

Lance le site de documentation utilisateur embarquée dans l'application sur la page retour utilisateur.

Il existe deux types de retour utilisateur possible :

• Bug : pour que les utilisateurs puissent signaler leurs problèmes.
• Opinion : pour que les utilsiateurs puissent donner leur avis ou partager une idée sur l'application.

Ces demandes sont collectées dans la solution JIRA (et donc ne fonctionne qu'en intranet).

Mettre à jour l'application

Cette commande donne des inforamtions pour mettre à jour l'application RENE-CLI.

λ node rene.js selfupdate

Dans le cas où il n'y a pas de nouvelle version disponible, ou bien autrement dit si on utilise la dernière version disponible.

Dans le cas où il existe une nouvelle version disponible.

Dans le cas où une erreur est detecté. Par exemple si on a arbitrairement changé le numéro de version et qu'il dépasse le plus ancien du registry.

Configuration globale

Structure du fichier de configuration globale de l'application

La configuration de l'application est défini dans le fichier ./app/config/config.js. En tant qu'application node packagé avec npm, il possède un fichier package.json également accessible (et surchargeable si nécessaire) dans la configuration.

On décrit ci-desous les différentes sections disponibles dans cette configuration :

• Section header
• Section footer
• Section emailOptions
• Section optimiseImages
• Section template
• Section googleAnalytics
• Section proxy
• Section logger
• Section storage
• Section update

Section header

Permet de personaliser l'en-têtes des newsletters.

/* @exemple */
header: {
  image: {
    src: 'http://aot.fr/logo-academie_213x78.png',
    alt: "Logo de l'académie d'Orléans-Tours",
    link: "http://www.ac-orleans-tours.fr/"
  },
  message: 'Newsletter de l\'académie d\'Orléans-Tours'
}

Section Footer

Permet de personaliser le pied de page des newsletters.

/* @exemple */
footer: {
  message: {
    /* @nunjucksgable */
    html: '<b>Newsletter de l\'académie d\'Orléans-Tours</b>, Directrice de publication : Marie Reynier.'
        + '<br/><a href="mailto:communication@ac-orleans-tours.fr">communication@ac-orleans-tours.fr</a >',
    /* @nunjucksgable */
    text: 'Directrice de publication : Marie Reynier.'
        + '\ncommunication@ac-orleans-tours.fr'
  }
  signatureApplication: {
    /* @nunjucksgable */
    html: 'Campagne <span class="idRene">{{ metadatas.id }}</span>'
        + '<i>Responsive Emails Newsletter Editor</i> v{{ metadatas.rene.version }}'
        + '<br /> Copyright © 2016, Aot-Dep-Padi',
    /* @nunjucksgable */
    text: 'Campagne {{ metadatas.id }}'
        + '\nResponsive Emails Newsletter Editor v{{ metadatas.rene.version }}'
        + '\nCopyright © 2016,  Aot-Dep-Padi'
  }
}

Les propriétés de configuration du footer sont dites @nunjucksgable, c'est à dire qu'il est également possible d'utiliser le moteur de template à l'interieur de ces configurations, et donc de consommer les metadonnées d'une campagne de données. Dans l'exemple ci-dessous on récupère l'identifiant de la campagne {{metadatas.id}} ou encore la version de l'application {{metadatas.rene.version}}.

Section emailOptions

/* @exemple */
emailOptions.smtp: {
  'host': 'smtp.gmail.com',
  'port': 465,
  'secure': true,
  'auth': {
    'user': 'myNameIsJonas@gmail.com',
    'pass': 'abcd'
  }
}

Section optimiseImages

/* @exemple */
optimiseImages: {
  transformToOptimized: true,
  maxWidthPrincipalImage: 580,
  maxWidthInContent: 300,
  transformToSquareImagesLevel3: true
}

Pour la transformation des images, on utilise la solution GraphicsMagick, et plus précisement le package gm qui expose dans une API le binaire dans l'écosystème Node.js. Pour gérer les dépendances de ce binaire, RENE utilise le package graphicsmagick-static qui charge les binaires de GraphicsMagick Currently supports Windows (32 and 64-bit). Ainsi sur MacOSX et Linux il est nécessaire que ce binaire soit installé et correctement configuré dans les variables d'environnement.

Section template

Pour le moteur de rendu (template engine) des campagnes RENE on utilise la librairie package Node Email Templates. Elle necessite au préalable que soit installé également un ou plusieurs moteur de template. Nous utilisons dans le projet RENE le moteur nunjucks comme moteur de template JavaScript.

Dans le répertoire du template on trouve les fichiers suivants :

• un fichier html.nameTemplateEngine (required) qui contient la version html de l'email
• un fichier text.nameTemplateEngine (optional) qui contient la version text de l'email
• un répertoire ./css (optional) qui contient les feuilles de styles externes. Tous les styles, sauf les media-queries qui seront préservés dans une balise style dans la section HEAD du fichier HTML, seront par la suite injecté inline dans le fichier HTML de la newsletter.

Les variables passés au moteur de template proviennent du fichier campagneData.json qui contient les données d'une campagne (titre, destinataires, message de niveau 1, de niveau 2 ...) Par convention, ce fichier se nomme campagneData.json et doit respecter une structure décrite par le schéma d'une campagne. Plus précisement, il s'agit d'un schema JSON qui se trouve dans le répertoire ./app/lib/schemas/campagne-rene.schema.json.

Les propriétés de plus haut niveau du fichier campagneData.json sont les propriétés messages définis par l'utilsiateur et metadatas écrites et générés par l'application elle même. Par exemple le titre principal du message de niveau 1 est donné par {{messages.principal.title}}. Il est possible d'étender le schéma d'une campagne et le template en ajoutant de nouvelles variables.

Section googleAnalytics

/* @exemple */
googleAnalytics: {
  activeTracking: true,
  tid: 'UA-00001234-2'
},

Section proxy

/* @exemple */
httpProxy: 'http://my-proxy.fr:8080',

Section logger Wintson

L'application implémente la librairie Wintson et plus précisement sa configuraiont dans la librairie console-uix.js. Par défaut, si aucune stratégie de log n'est défini dans cette configuration alors l'application ajoute une stratégie de log en sortie console. Il est possible de définir un ou plusieurs stratégies de log. Pour configurer une nouvelle stratégie de log, vous devez choisir un type de transport, soit File ou soit Console.

/* @exemple */
loggers: [{
  "typeTransport": "Console",
  "name": "consoleLog",
  "level": "debug"
}, {
  "typeTransport": "File",
  "name": "fileErrorlog",
  "level": "error",
  "filename": "./var/log/reneCli-error.log",
  "handleExceptions": true,
  "json": true,
  "maxsize": 5242880,
  "maxFiles": 5,
  "colorize": false
}]

Le niveau de verbosité est défini à l'aide des arguments passé à la commande et on trouve 5 niveau de verbosités :

• error, level 0 (par default)
• warning, level 1 (option -v)
• info, level 2 (option -v)
• debug, level 3 (option -vv)
• silly, level 4 (option -vvv)

Section storage

L'application pour créer une campagne RENE a besoin de sauvegarder le contenu de l'email envoyé localement, mais également d'uploader la "version en ligne" de l'email envoyé.

Section Update

On peut définir le temps de rafraichissement du système de notification de mise à jour disponible avec la propriété updateCheckInterval dans le fichier de configuration de l'application. Pour ce faire, on utilise le système de yeoman. Plus d'informations ici: https://github.com/yeoman/update-notifier

Whenever you initiate the update notifier and it's not within the interval threshold, it will asynchronously check with npm in the background for available updates, then persist the result. The next time the notifier is initiated the result will be loaded into the .update property. This prevents any impact on your package startup performance. The check process is done in a unref'ed child process. This means that if you call process.exit, the check will still be performed in its own process.

/**
 * How often to check for updates with update-notifier
 * More info here : https://github.com/yeoman/update-notifier 
 *
 * Exemple: 
 *   - 1000 * 60 * 60 (1 hour)
 *   - 1000 * 60 * 60 * 24 (1 day)
 *   - 1000 * 60 * 60 * 24 * 7 (1 week)
 * 
 * 
 * @required 
 */
updateCheckInterval: 1000

Personnalisation du style

Localement dans le fichier de métadonnées d'une campagne

Dans le fichier de métadonnées d'une campagne, on peut localement personnaliser certaines propriétés de style pour les messages de niveau 1 et 2 uniquement. On utilise pour cela la propriété customStyle qui permet de définir

• la couleur du fond et du texte de l'en-tête d'un message de niveau 1;
• la couleur du fond et du texte d'un message de niveau 1 et 2 ;
• la couleur des liens des message de niveau 1 et 2;

Par exemple pour un message de niveau 1 :

"messages": {
  "principal": {
    "level": 1,
    "title": "I want to believe...",
    "content": "<p>...</p>",
    "customStyle": {
      "header": {
        "backgroundColor": "purple",
        "color": "#213b81"
      },
      "backgroundColor": "#213b81",
      "color": "#fff",
      "link": "#4eaa2b"
    }
  }
},

Et pour un message de niveau 2 :

"secondary": {
    "level": 2,
    "contents": [
      {
        "position": 1,
        "title": "Résultats du diplôme national du brevet - session 2016",
        "sousTitre": "Avec un taux de réussite de 87,1% sur l'académie...",
        "image": {
          "src": "http://www.uh1.ac.ma/sites/default/files/brevet.jpg",
          "alt": "DNB"
        },
        "contenu": "<p>L’académie enregistre ...</p>",
        "customStyle": {
          "backgroundColor": "#C48337",
          "color": "#613a00",
          "link": {
            "color": "#f0f2e2",
            "hover": "#9c1eb2",
            "active": "#9c1eb2",
            "visited": "#9c1eb2"
          }
        }
      }
    ]
  }
},

Globalement par la création d'un nouveau template

Il est possible dans l'application de créer un nouveau template assez facilement et ainsi proposer un nouveau style pour la newsletter.

Voci la procédure à suivre pour créer un nouveau template :

1. Choisir le nom d'un template. Dans cet exemple on prend mon-template.

2. Copier le contenu du répertoire ./app/lib/templates/default vers le répertoire ./app/lib/templates/mon-template

3. Les modifications du style du template se font dans la feuille de style ./css/custom.css. Elle s'organise généralement en plusieurs sections dont une section pour les styles globaux (couleurs pour le fond et le texte, taille de la police ...), une section pour le header, une section pour le footer et une section pour les messages de niveau 1, 2 et 3. Et enfin on trouve des media-queries pouvant reprendre chaque section. Nous avons choisi le point de rupture à 596px en respect du framework CSS utilisé Foundation For Emails.

4. Les modifications du contenu des éléments du template se font dans le fichier html.nunjucks et text.nunjucks. On utilis le langage nunjucks et son moteur pour générer le rendu par la suite. Remarquons que la version texte n'utilise pas de système de bloc nunjucks en comparaison de la version HTML. En effet le fichier html.nunjucks hérite du fichier layout-base.nunjucks.html et inclus 3 blocks un pour chaque niveau.

Il est possible de "consommer" toutes les données présentes dans le fichier de métadonnées campagneData.json dans le template. Par exemple pour insérer le lien de la version distante dans le template, on écrit {{metadatas.remoteUrl}}. De plus il est également possible d'étendre le modèle par l'ajout de nouvelles variables. En ajoutant dans le fichier campagneData.json une nouvelle variable.

Par exemple on créer deux nouvelles propriétés nouvelleVariable et etab dans le fichier de métadonnées camapgneData.json et dans la section message principal.

"messages": {
  "principal": {
    "level": 1,
    "title": "I want to believe...",
    "content": "<p>...</p>",
    "nouvelleVariable": 257,
    "etab": {
      "rne": "0180005H",
      "nom": "Alain Fournier"
    }
  }
},

Ainsi on peut consommer ces variables directement dans le template. Pour afficher le nom et le code de l'établissement on écriera {{messages.principal.etab.nom}}, {{messages.principal.etab.rne}}.