Index

Syntaxes twig pour afficher du contenu yeswiki

Un template twig permet de concevoir une structure de page en HTML et d'y intégrer des petits bouts de code dynamique.
2 syntaxes à connaitre pour débuter :
- {{ ... }} permet d'afficher la valeur d'une variable
- {% ... %} permet d'executer un traitement (condition, boucle, ...)
Au moment d'afficher le rendu d'une fiche bazar, vous disposez de deux objets disponibles au format JSON :
fiche et html
Dans fiche sont stockées les valeurs brutes de chaque champ, c'est à dire lorsque c'est un champ de type liste, c'est l'index de la liste qui est stocké dans fiche.champ_liste
Dans html on dispose de la valeur préformatée, pour notre liste on aura l'intitulé entier.
Pour afficher la valeur du champ bf_titre, vous pouvez écrire :

<h1>{{fiche.bf_titre}}</h1>

Pour un texte long :

{{html.bf_description|raw}}

Le contenu d'un champ texte long peut contenir des éléments de mise en forme, c'est pourquoi on affiche de préférence la valeur préformattée html.bf_description, en twig il faut ajouter |raw pour indiquer qu'il s'agit d'un code HTML à interpréter

Ajouter une condition

If ... Else ...
Vous avez la possibilité de tester la valeur d'un champ et de définir des options d'affichage.

{% if fiche.listeinscription == "obligatoire" %}
    <p>L'inscription est obligatoire, merci de compléter le formulaire suivant : {{html.url_inscription}}</p>
   {% else %}
   <p> Entrée libre dans la limite des places disponibles.
{% endif %}

Notez la présence d'un double signe = pour tester :

{% if champ == "valeur" %}

Pour tester si la valeur est différente :

{% if champ != "valeur" %}

Pour tester si une valeur a été saisie :

{%  if champ %}

Quelques bouts de code à copier coller

Aucun résultat

Yeswiki : le site officiel

Site web https://yeswiki.net

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

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é.

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 correspondent à la palette de 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