Créer un glossaire façon wikipedia dans votre yeswiki

Résumé : Et si votre wiki affichait la définition des mots compliqués en popup par simple survol ?
Billet : Il arrive qu'on souhaite afficher en popup la définition d'un mot ou des infos sur un sujet en popup simplement au survol du mot. Un peu comme le propose wikipedia dans ses articles.
Ceci est désormais possible dans yeswiki !
Survolez donc ici pour voir et cliquer pour m'ouvrir dans une nouvelle fenêtre !

comment ?

Avec cette syntaxe :
{{button class="btn btn-link btn-glossaire modalbox-hover new-window " link="CoopticBelgique"  text="c'est quoi ?"}}

Décortitons-la :

  • btn btn-link : permet de ne pas créer de bouton et donc d'avoir un lien clicable "classique"
  • btn-glossaire : permet d'enlever les marges un peu embêtantes dans ce contexte de lien à survoler
  • modalbox-hover : affiche le contenu appelé via le link en popup sur simple survol du lien
  • new-window : ouvre le lien dans une nouvelle page si l'utilisateur clique dessus
  • link : doit être une page wiki de votre wiki (ne peut être un lien externe)
  • text : vous mettez ce que vous voulez mais ce sera le titre de la modale

Exemple d'usage : Faire un glossaire en utilisant un formulaire bazar
Première étape : vous créez un formulaire bazar avec ces champs :
labelhtml*** *** *** <div style="display:none">
texte***bf_titre***Le mot***25***25*** *** *** ***1***0***
labelhtml*** *** *** </div> <!-- ferme le div .hide -->***
textelong***bf_description***Définition***10***2*** *** ***wiki *** *** ***
lien_internet***bf_url***Lien pour en savoir plus***40***255***http://*** *** ***0***0

Le label html pour bf_titre permet d'éviter que le nom du mot à définir s'affiche deux fois dans le popup

Deuxième étape : Vous créez une page glossaire dans votre wiki et appelez le contenu du formulaire avec la syntaxe suivante :
{{bazarliste id="x" template="annuaire-alphabetique.tpl.hml"}}

Ceci affichera le contenu de votre glossaire par ordre alphabetique

Troisième étape
: vous insérez en haut de cette même page un bouton pour permettre à chacun de définir les mots compliqués
""<div class="pull-right">""{{button class="btn-success" icon="pencil icon-white" link="SaisirGlossaire" text="J'ajoute un mot dans le glossaire"}}""</div>""


Ensuite vous récupérez le nom de la page wiki pour chaque mot défini (il suffit de la survoler dans le glossaire par ex et de récupérer en bas de son browser son nom wiki)

Vous appelez chaque définition des mots à expliciter avec la syntaxe proposée tout en haut

Voir un exemple d'usage sur http://www.cartographie-collaborative.eu
VOIR LA DOC COMPLETE => https://yeswiki.net/?DocButton