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; ?>


code doryphore template twig