Index

Syntaxes twig pour afficher du contenu yeswiki

Afficher la valeur brute d'un champ

{{fiche.identifiant}}
retourne la valeur du champ "identifiant"
Pour le mettre en forme vous pouvez y ajouter les balises html de votre choix :
exemple pour un titre
<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>

Pour info veillez à conserver la classe "BAZ_fiche_titre" pour le titre de votre fiche - il est notamment utile dans l'affichage accordéon (évite d'avoir un doublon)

Afficher une partie d'un texte long

{{fiche.bf_description1[:250]}}

Voir documentation twig slice

Afficher le champ pré-formaté

Pour afficher vos données avec la mise en forme prévue dans yeswiki utilisez la syntaxe suivante :
{{html.identifiant}}

Cette syntaxe est utile pour les champs de type date, mail, liste, fichier, etc...

Fonction displayFieldIfNotEmpty

En copiant le modèle /www/docs/examples/templates/ dans votre dossier custom, vous bénéficiez de fonctions génériques permettant de faciliter le rendu : les helper.

entryHelper.displayHtml retourne la/les valeurs d'un champ liste
{{ entryHelper.displayHtml(html.listenom_champ,'optionnal label','optionnal class css') }}


entryHelper.displayHtmlIfNotEmpty retourne le champ formaté précédé par son libellé en gras après avoir vérifié son existence
{{ entryHelper.displayHtmlIfNotEmpty('Libellé','FieldName',html) }}


Formater un champ checkbox ou un champ tag

Ces champs peuvent contenir plusieurs valeurs, elles sont enregistrées sous forme de liste séparés par des virgules, pour les formater, il faut donc traiter la chaine de caractères en isolant chacune des valeurs de la liste pour pouvoir gérer la mise en forme de chaque élément.
la fonction split dans twig permet de découper une chaine selon le caractère spécifié (ici ',')
exemple avec tag
{% for tag in fiche.bf_tags|split(',') %}
			<div class="trombi-content"> {{tag}} </div>
{% endfor %}


exemple avec checkbox
Pour formater de manière personnalisée les valeurs des checkbox, comme dans l'exemple ci-dessous dans des étiquettes
{% set fieldOptions = (form.prepared|filter(f => f.propertyname == 'checkboxListeViolence')|first).options %}
	{% for element in fiche.checkboxListeViolence|split(',')|filter(o => o is not empty) %}
      <span class=" label label-primary">  {{fieldOptions[element]|raw}}  </span>
	{% endfor %}


Afficher une image

Le code ci-dessous permet de redimensionner une image avant de l'afficher.

{% if fiche.imagebf_image is not empty %}
      {# you can choose width, height (in px)  and mode "fit" or "crop" #}
      {% set imageFileAddr = urlImage({fileName:"files/#{fiche.imagebf_image}",width:200,height:200,mode:"crop"}) %}
      {% if not(imageFileAddr is same as(false) or imageFileAddr matches '/^\\d+$/') %}
        {# imageFileAddr is not false or not integer otherwise error #}
        <img
          class="center custom-entry"
          alt="{{ fiche.bf_titre|e('html_attr') }}"
          src="{{ imageFileAddr }}"
        />
      {% endif %}
 {% endif %}


Utiliser une syntaxe Yeswiki dans le template twig


{{ format('{{include page="' ~ fiche.id_fiche ~ '"}}') }}


Afficher des fiches liées

{{ format('{{bazarliste id="5" template="blog-custom" champ="bf_date" header="false" nb="10" ordre="desc" show_author="1" show_date="1" query="listefiche8=' ~ fiche.id_fiche ~ '"}}')|raw }}


Afficher pour les admins seulement

{# --- Start reserved admins info --- #}
{% if hasAcl("@admins",fiche.id_fiche) %}

  <div class="panel panel-warning">
    <div class="panel-heading  center">
      <h4><i class="far fa-hand-point-right"></i> Administration</h4>
    </div>
    <div class="panel-body">
      {{ entryHelper.displayHtml(html.listeListeProjects,'Project','') }}
      {{ entryHelper.displayHtml(html.checkboxListeParamsbf_display_params,'Display','') }}
    </div>
  </div>

{% endif %}

Yeswiki : le site officiel

Type de ressource
  • Site web ressource
Description Tout ce qu'il y a à savoir sur Yeswiki
Index

Ajouter du css personnalisé

Si vous avez besoin de faire des petites modifications sur le style de votre wiki, il est possible d'ajouter du code CSS en ligne, sans avoir besoin d'accéder au serveur.

La page PageCss est chargée après les autres feuilles de style, de ce fait vous pouvez surcharger une classe css ou en déclarer de nouvelles, elles seront prises en compte.

Si vous n'avez pas peur d'un peu de code
Des variables CSS sont disponibles dans le thème Margot pour vous aider à affiner le design :
couleur des titres
couleur des liens
couleur de la barre de menu...

Sur chaque wiki, il existe une page nommée PageCss qui permet d'ajouter du code CSS pour définir des styles personnalisés

Action {{grid ...}} : l'action {{grid ...}} doit être fermée par une action {{end elem="grid"}}.
Un extrait de code est disponible par défaut dans PageCss :
/* :root { */

/* couleur des titres */
/* --title-h1-color:var(--neutral-color); */
/* --title-h2-color:var(--primary-color); */
/* --title-h3-color:var(--secondary-color-1); */
/* --title-h4-color:var(--secondary-color-2); */

/*}*/

Ce code définit des variables de couleurs qui s'appliquent à l'ensemble du wiki.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.

Action {{grid ...}} : l'action {{grid ...}} doit être fermée par une action {{end elem="grid"}}.
Si vous souhaitez commencer la personnalisation il faudra d'abord enlever les commentaires pour les lignes que vous souhaitez personnaliser :
:root { 
--title-h4-color:var(--neutral-color);
}


Il est possible d'utiliser soit les couleurs en hexadecimal (#092e67) soit les variables de couleurs qui correspndent aux couleurs que que vous avez choisies via la page Apparence

[IMPORTANT!]Après avoir fait une modif de style CTRL + MAJ + R pour vider le cache du navigateur