Le bloc "Billet créé le :"

Comme indiqué au point 2 de l'image ci-dessus, ce bloc est produit par l’exécution du template "field--node--created.html.twig" disponible, par exemple, dans "core\themes\stable9\templates\field" d'une installation standard de Drupal.  Je l'ai copié dans le dossier templates/field de mon  thème.

Lire ce  billet qui explique la découverte du nom des templates et des variables à utiliser.

Pour cette version, moins "propre" que celle présentée dans le paragraphe suivant, j'ai modifié le code d'origine (du fichier field--node--created.html.twig) comme indiqué ci-dessous pour scinder la date en 2 parties  et styliser le bloc.

 

La variable  items[0]["content"][#text"] du code ci-dessous me fournit la date de création. 
La balise "section role = "dateCreationNode" me permet d'ajouter un style CSS.

<section role="dateCreationNode">     
   <div>     
   Billet créé le :     
    </div>     
    <div>     
        <span{{ attributes }}>             
                {{ items[0]["content"]["#text"]|slice(0, 2) }}     
        </span>     
        <span{{ attributes }}>             
                {{ items[0]["content"]["#text"]|slice(3, length) }}     
        </span>     
    </div>     
</section>

Lire ce  billet qui traite de la découverte des variables d'un template.

 La fonction twig "slice" placée à la suite du pipe | me permet de découper la chaîne de caractères qui précédé le pipe, à savoir : la date de création.

slice(0,2) qui rend les 3 premières lettres ;

slice(3, length) pour le reste de la date.

Cette version nécessite la définition de la fonction "preprocess" dh_preprocess_field__node__created() qui doit figurer dans le fichier .theme de mon thème donc dans dh.theme.  Dans Drupal, une fonction "preprocess" permet de manipuler (et/ou d' ajouter) des variables qui seront ensuite utilisées dans vos fichiers de template ou gabarit.

Une telle fonction est exécutée avant l'affichage du template. La fonction dh_preprocess_field__node__created()  sera donc exécutée avant field--node--created.html.twig. Remarquez que la syntaxe (imposée par Drupal) de son nom est très proche de celle du gabarit, elle colle le nom du thème (ici dh) à "_preprocess_" et au nom du gabarit dans lequel les "-" sont remplacés par des "_".

Dans mon exemple, le rôle de cette fonction est de sécuriser l'affichage en testant l'existence (usage de "isset" ) des données et de fournir les variables jourCreated et moisAnCreated au gabarit "field--node--created.html.twig".

function dh _preprocess_field__node__created(&$variables) {         
 /*dump($variables);*/         
 if (isset ($variables['items'][0]["content"]["#text"])){         
     $temp= $variables['items'][0]["content"]["#text"];         
     $variables['jourCreated'] = substr($temp,0,2);         
     $variables['moisAnCreated'] = substr($temp,3);         
 }         
 else {         
     $variables['jourCreated'] = "00";         
     $variables['moisAnCreated'] = "MmM YYYY";         
 }         
}

Les fonctions "preprocess" sont écrite en php d'où l'emploi de substr() à la place de la fonction twig slice(). Sinon, on manipule bien les mêmes éléments que dans le paragraphe précédent.

Le fichier du gabarit devient :

<section role="dateCreationNode">         
   <div>         
   Billet créé le :          
    </div>         
    <div>         
        <span{{ attributes }}>                 
                {{ jourCreated }}         
        </span>         
        <span{{ attributes }}>                 
                {{ moisAnCreated }}         
        </span>         
    </div>     
</section>

Ci dessous figure le code CSS pour styliser ce bloc.