Un raccourci <motxx>, pour des mots-clés dans le texte

Le but du jeu est d’inclure des mots-clés et leur définition directement dans le texte d’un article, ou d’une rubrique... bref, dans un contenu quelconque de votre site Spip.

Pour cela, nous allons nous servir des modèles de Spip. Par exemple, les rédacteurs pourront inclure un raccourci <mot15> dans leur texte pour afficher la définition du mot n°15.

Cette contribution peut être rapprochée de Afficher les définitions de mots clefs à l’intérieur du texte. Sauf qu’elle laisse aux rédactrices de placer manuellement des raccourcis vers les mots-clés ad hoc dans leur texte et qu’elle ne demande l’installation d’aucun plugin.

1. Des définitions de mots-clés au survol d’une puce dans le texte

Exemple: Analyse d’une séquence de Matrix

L’effet recherché ici est le suivant:
-  une puce apparaît là où le rédacteur a placé le raccourci <mot15> (a priori, juste après le mot à définir) [1], où 15 est le numéro du mot bien sûr [2].
-  Lorsque le visiteur survole la puce, la définition du mot apparaît dans la colonne de gauche, par dessus les autres contenus (ça, c’est défini par une feuille de styles .css et donc, modifiable à souhait).
-  S’il clique sur le lien, il est redirigé sur la page du mot (ex. spip.php?mot15). Ici aussi, on peut choisir de l’orienter ailleurs.

Pour que le modèle s’applique, nous devons créer un squelette mot.html et le placer dans un sous-dossier de notre dossier de squelettes nommé modeles/. En général, on aura donc /squelettes/modeles/mot.html:

<BOUCLE_mot(MOTS){id_mot}>
[<a name="mot#ID_MOT" href="#URL_MOT" class="glossaire">
	<sup><img src="[(#CHEMIN{puce_mot.png})]" width="11" height="11" alt=" (lire la d&eacute;finition)" /></sup>
	<span class="dl">
		[<span class="dt">(#TITRE)</span>]
		<span class="dd">(#DESCRIPTIF|sinon{#TEXTE})</span>
	</span>
</a>]
</BOUCLE_mot>

Notez que rien ne s’affiche si le mot-clé n’a ni descriptif, ni texte (voir les crochets de part et d’autre de <a>).

L’effet de survol est obtenu grâce aux propriétés css display:

a.glossaire span.dl, a.glossaire span.dt, a.glossaire span.dd {
	display: none;
}
a.glossaire:hover span.dl, a.glossaire:hover span.dt, a.glossaire:hover span.dd {
	display: block;
}
a.glossaire:hover span.dl {
	position: absolute;
	left: 20px;
	width: 180px;
}

J’ai choisi de placer le cadre à 20px du bord gauche de la fenêtre parce que ça collait bien avec mon squelette général. Vous pouvez bien sûr supprimer ou modifier la directive left: 20px;.

Une feuille de style plus complète est fournie dans l’archive.

2. Des définitions de mots-clés directement incluses dans le texte

Exemple: Glossaire Cinéma

Ici, on veut carrément inclure le mot-clé et sa définition dans le corps du texte, comme un contenu à part entière de l’article [3].

Ici, le squelette s’appelera mot_definition.html, et les rédactrices devront donc utiliser le raccourci <mot23|definition> pour inclure le mot n°23. Si vous ne voulez utiliser que cette partie de la contrib, et donc, n’avoir qu’un seul modèle, vous pouvez renommer ce squelette en mot.html et les rédacteurs utiliseront simplement le raccourci <mot23>.

/squelettes/modeles/mot_definition.html:

<BOUCLE_mot(MOTS){id_mot}>
[<dl class="glossaire[ glossaire_liste(#ENV{liste})]">
	<dt><a name="mot#ID_MOT" href="#URL_MOT">#TITRE</a></dt>
	<dd>(#TEXTE|sinon{#DESCRIPTIF})</dd>
</dl>]
</BOUCLE_mot>

Ici aussi, rien ne s’affiche si le mot n’a ni texte, ni descriptif.

J’ai prévu une petite subtilité: la possibilité pour les rédactrices d’imbriquer les définitions, à la façon d’une liste imbriquée, pour montrer des liens de dépendance entre elles. On peut utiliser le raccourci <mot23|definition|liste=1> pour indenter la définition d’un niveau; et <mot23|definition|liste=2> pour indenter de deux niveaux.

Dans la feuille de styles:

dl.glossaire_liste1 {margin-left: 18px;}
dl.glossaire_liste2 {margin-left: 36px;}

Installation

L’archive contient:

-  Un dossier modeles/, qui comprend les deux modèles de la contrib: mot.html et mot_definition.html. Vous devez placer ces deux fichiers dans votre propre dossier squelettes/modeles/.

-  La feuille de styles mots_dans_le_texte.css peut être renommée. Vous avez le choix entre trois méthodes pour qu’elle s’applique:

  • copier/coller son contenu dans votre propre fichier .css
  • la placer dans votre dossier squelettes/ et ajouter un appel dans l’en-tête (<head></head>) des pages qui doivent l’utiliser (soit dans un inc-head.html qui serait inclu dans chaque page, comme dans les squelettes par défaut; soit dans le squelette directement, par exemple article.html):
    <link rel="stylesheet" href="[(#CHEMIN{mots_dans_le_texte.css})]" type="text/css" media="all" />
  • la placer dans votre dossier squelettes/ et ajouter un appel dans votre propre fichier .css (ligne à insérer au tout début du fichier .css):
    @import url(mots_dans_le_texte.css);

-  Une image puce_mot.png pour faire joli.

Je suis donc partie du principe que les feuilles de styles et les images se situaient directement dans le dossier squelettes/. Libre à vous de les placer ailleurs et de corriger les chemins en conséquence.

Footnotes

[1Je vous laisse définir les conventions d’usage pour l’inclusion des raccourcis. Par exemple, chez moi, on a convenu de mettre {le mot en italique puis le raccourci}<mot21>. On pourrait imaginer de mettre le lien vers la page du mot comme ceci: [le mot à définir<mot43>->mot43].

[2Notez que les rédacteurs n’ont pas accès à la page des mots-clés dans l’interface privée, contrairement aux administratrices. Si votre site utilise ces statuts, ou d’une manière générale, il faudra veiller à mettre un squelette à disposition qui reprenne les mots utilisables et leur numéro (plus pratique que de se rendre sur la page de chaque mot pour en décoder l’url...).

[3Dans mon cas, l’idée était de fournir une vue “intelligente” du glossaire: plutôt qu’un squelette construisant automatiquement une liste alphabétique des mots-clés (ou en plus de ce squelette), je voulais que les rédactrices puissent organiser les mots dans un article (sans dédoubler l’encodage ou la correction des mots: une fois pour l’article, une fois pour le mot-clé).

updated on 2 October 2019

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom