Convertir un template Bazar 
.tpl.html
en 
.twig



.twig
: qu'est-ce ?


  • .twig
    est un langage pour décrire des modèles (templates) pour la génération de sortie HTML à partir d'un script PHP.
  • Il y a une documentation officielle bien garnie

Comment faire ?


  • 1. Choisir un template à convertir. (Exemple : 
    liste_liens.tpl.html
    )
Le code source de la version de travail de ce fichier est recopiée à la fin de cette page.
  • 2. Vérifier la présence de ce fichier dans le dossier 
    tools/bazar/presentation/templates/
  • 3. Copier le fichier dans le dossier 
    custom/bazar/templates/
  • 4. Identifier les fonctions php non standards ; ici 
    getCustomValueForEntry()
  • 5. Recopier le contenu de 
    custom/bazar/templates/liste_liens.tpl.html
    dans 
    custom/bazar/templates/liste_liens.twig
    en retirant ce qui concerne les fonctions non-standard.
<?php
if(count($fiches)>0) : ?>
    <?php echo $info_res;?>
    <ul class="BAZ_liste <?php echo $param['class'];?>">
    <?php
    foreach($fiches as $fiche): ?>
        <li class="bazar-entry" <?php echo $fiche['html_data'];?>>
          <a href="<?php echo $fiche['url']; ?>"
           target="_blank">
            <?php
            if (!empty($color)) {
              echo '<span class="pellet" style="background-color:'.$color.';"></span> ';
            }
            if (!empty($icon)) {
              echo '<i class="'.$icon.'"></i> ';
            }

            echo '<span class="entry-title">'.$fiche['bf_titre'].'</span>';
            ?>
          </a>
        </li>
        <?php
    endforeach; ?>
    </ul>
    <?php echo $pager_links;?>
<?php endif; ?>


  • 6. traduire le code 
    php
    en 
    .twig
    (voir le tableau de conversion utilisé en fin de cette fiche) pour obtenir ceci
{% if fiches|length > 0 %}
  {{ info_res }}
  <ul class="BAZ_liste {{ param.class }}">
    {% for in,fiche in fiches %}
      <li class="bazar-entry" {{ fiche.html_data }}>
        <a href="{{ fiche.url }}" target="_blank">
         {% if colors[id] %}
           <span class="pellet" style="background-color:{{ colors[id] }}"></span>
         {% endif %}
         {% if icons[id] %}
           <i class="{{ icons[id] }}"></i>
         {% endif %}
         <span class="entry-title">{{ fiche.bf_titre }}</span>
       </a>
      </li>
    {% endfor %}
  </ul>
  {{ pager_links }}
{% endif %}

  • 7. tester ce fichier avec le code suivant dans une page de test 
    {{bazarliste id="1" template="liste_liens.twig"}}
    Tout ne fonctionnera pas car il n'y a plus les couleurs et les icônes.

  • 8. pour rétablir les icônes et les couleurs, il faut conserver le fichier 
    liste_liens.tpl.html
    mais complétement le réécrire avec ceci
<?php
$colors = [];
$icons = [];
foreach ($fiches as $id => $fiche){
    $colors[$id] = getCustomValueForEntry(
      $param['color'],
      $param['colorfield'],
      $fiche,
      ''
    );
    
    $icons[$id] = getCustomValueForEntry(
      $param['icon'],
      $param['iconfield'],
      $fiche,
      ''
    );
}
echo $this->render('@bazar\liste_liens.twig',[
        'fiches' => $fiches,
        'param' => $param,
        'colors' => $colors,
        'icons' => $icons,
        'info_res' => $info_res,
        'pager_links' => $pager_links,
    ]);

  • La première partie permet de stocker les informations de couleur et d'icône dans les variables 
    colors
    et 
    icons
    .
  • Ensuite, on génère le rendu du fichier 
    .twig
    grâce à 
    echo $this->render()
    .
  • Il faut alors passer en paramètre un tableau qui a la liste exhaustive des variables utilisées par le 
    .twig
  • Le test se fait avec ceci 
    {{bazarliste id="1" template="liste_liens"}}
    ou 
    {{bazarliste id="1" template="liste_liens.tpl.html"}}
  • 9. Il est alors possible de publier le code dans le coeur de YesWiki en mettant les fichiers dans les dossiers suivant: 
    • tools/bazar/presentation/templates/liste_liens.tpl.html

    • tools/bazar/templates/liste_liens.twig

PHP
->
.twig
<?php if(count($fiches)>0) : ?>

->
{% if fiches|length > 0 %}


<?php endif; ?>

->
{% endif %}


<?php echo $info_res;?>

->
{{ info_res }}


<?php echo $param['class'];?>

->
{{ param.class }}


<?php foreach($fiches as $fiche): ?>

->
{% for fiche in fiches %}


<?php foreach($fiches as $id => $fiche): ?>

->
{% for id,fiche in fiches %}


<?php endforeach; ?>

->
{% endfor %}


<?php echo $fiche['html_data'];?>

->
{{ fiche.html_data }}


<?php echo $fiche['url']; ?>

->
{{ fiche.url }}


if (!empty($color)) {

->
{% if colors[id] %}
avec introdution de la variable 
colors


echo '<span class="pellet" style=

"background-color:'.$color.';"></span> ';

->
<span class="pellet" style="background-color:{{ colors[id] }}"></span>


if (!empty($icon)) {

->
{% if icons[id] %}
avec introdution de la variable 
icons


echo '<i class="'.$icon.'"></i> ';

->
<i class="{{ icons[id] }}"></i>


echo '<span class="entry-title">'

.$fiche['bf_titre'].'</span>';

->
<span class="entry-title">{{ fiche.bf_titre }}</span>


<?php echo $pager_links;?>

->
{{ pager_links }}



<?php
if(count($fiches)>0) : ?>
    <?php echo $info_res;?>
    <ul class="BAZ_liste <?php echo $param['class'];?>">
    <?php
    foreach($fiches as $fiche): ?>
        <li class="bazar-entry" <?php echo $fiche['html_data'];?>>
          <a href="<?php echo $fiche['url']; ?>"
           target="_blank">
            <?php
            $style = '';
            $color = getCustomValueForEntry(
              $param['color'],
              $param['colorfield'],
              $fiche,
              ''
            );
            if (!empty($color)) {
              echo '<span class="pellet" style="background-color:'.$color.';"></span> ';
            }
            $icon = getCustomValueForEntry(
              $param['icon'],
              $param['iconfield'],
              $fiche,
              ''
            );
            if (!empty($icon)) {
              echo '<i class="'.$icon.'"></i> ';
            }

            echo '<span class="entry-title">'.$fiche['bf_titre'].'</span>';
            ?>
          </a>
        </li>
        <?php
    endforeach; ?>
    </ul>
    <?php echo $pager_links;?>
<?php endif; ?>