Introduction
Les articles de votre site sont parfois un peu longs et vous vous êtes probablement déjà posé la question de savoir comment insérer un sommaire au début d’un texte, histoire d’en faciliter la lecture et la navigation...
Voici notre solution : utilisez simplement dans vos articles le raccourci SPIP des intertitres ({{{Mon intertitre}}}). Le plugin va ensuite ajouter automatiquement un cadre de navigation en tête d’article en réunissant les différents intertitres affublés d’un lien cliquable vers le paragraphe concerné. Ce cadre peut ressembler à ceci :
En ce qui concerne les intertitres, une petite icône permet de revenir au sommaire. Cette ancre peut ressemble à ceci :
Pour obtenir ce résultat, il suffit simplement de taper ce qui suit dans votre article :
{{{Conclusion}}}
Quelques mots, pas plus !Ce système vous offre donc un facile va-et-vient entre les paragraphes du texte et le sommaire.
Installation
Cet outil est une fonctionnalité du plugin « Le Couteau Suisse » que vous pouvez trouver ici : Le Couteau Suisse.
Pour avoir accès au sommaire automatique, il vous faut donc avoir installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.
Ensuite, veuillez activer l’outil « Sommaire en début d’article » en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet "Le Couteau Suisse").
Dépendances
Les styles CSS du sommaire et des différents liens sont insérés grâce à la balise #INSERT_HEAD qui doit absolumet être présente (en un seul exemplaire) dans le header de vos squelettes (entre les balises <head> et </head> des fichiers HTML). Si vous ne trouvez pas cette balise dans vos codes et que le sommaire n’apparait pas avec l’apparence voulue, alors l’outil "Balise #INSERT_HEAD" du Couteau Suisse permet d’insérer automatiquement cette balise sans manipulation de votre part.
Configuration
Par défaut, le sommaire est constitué des 30 premiers caractères de vos intertitres afin d’éviter tout débordement inesthétique de texte. Sur la page de configuration du plugin (Bouton Configuration, et onglet "Le Couteau Suisse"), vous pouvez modifier ce paramètre à votre guise. La fonction utilisée est simplemennt la fonction couper() de SPIP, qui ajoute des points de suite à la place du texte supprimé. Voici l’aperçu d’un sommaire où deux intertitres sont tronqués :
Vous pouvez également fixer le comportement du plugin concernant la création du sommaire :
Systématique pour chaque article. Cependant, une balise « [!sommaire] » placée n’importe où à l’intérieur du texte de l’article créera une exception afin de pouvoir bénéficier des intertitres sans qu’un sommaire ne soit créé dans un article en particulier. .
A l’inverse : uniquement pour les articles contenant la balise « [sommaire] ».
Ces raccourcis, bien sûr, ne seront pas affichés à l’écran.
Changement d’aspect
Par défaut, le sommaire utilise une image de fond que vous pouvez voir ci-dessus. Un second aspect du sommaire est possible si vous insérez le raccourci « [!fond] » n’importe où dans le texte. Le sommaire aura donc un aspect similaire à cet exemple :
Techniquement, le plugin utilise l’un ou l’autre des deux modèles SPIP situés dans le dossier "plugins/couteau_suisse/fonds" :
Le fichier « couteau_suisse/fonds/sommaire1.html » est utilisé pour contruire un sommaire possédant une image de fond
Le fichier « couteau_suisse/fonds/sommaire2.html » est utilisé pour contruire un sommaire sans image de fond.
Surcharges
En étudiant le fond "couteau_suisse/fonds/sommaire1.html", vous pourrez remarquer les différentes classes CSS. Il vous sera alors facile de paramétrer ces classes dans vos fichiers de squelette si par exemple vous souhaitez changer de couleur de fond, de marge ou de style de bordure...
Si l’aspect du sommaire qui vous est proposé ici ne vous plait vraiment pas, alors faites une surcharge directement dans votre squelette en créant votre propre fichier "mon_squelette/fonds/sommaire1.html". Le sommaire d’origine sera donc ignoré, au profit de votre propre sommaire.
Si l’envie vous venait de changer simplement le titre du sommaire, alors un simple define placé dans le fichier mes_options.php de votre squelette (ou du dossier config/) fera l’affaire. Un exemple qui bénéficie de toutes les traductions de SPIP :
// "Navigation rapide" et toutes ses traductions
@define('_sommaire_TITRE', _T('icone_brouteur'));Balise #CS_SOMMAIRE
Par défaut, le Couteau Suisse insère le sommaire en tête d’article automatiquement. Mais vous avez la possibilté de placer le sommaire ailleurs dans votre squelette qu’en tête de votre article grâce à une balise #CS_SOMMAIRE. L’utilisation de cette balise doit être activée dans la page de configuration et annule ainsi l’insertion automatique du sommaire dans votre article.
Notes techniques
Techniquement parlant, cet outil agit sur toutes les balises #TEXTE trouvées dans vos squelettes et insère un sommaire. Vous pouvez donc insérer des intertitres dans vos articles, vos textes de rubrique, etc.
Une condition est cependant nécessaire : l’insertion automatique du sommaire ne fonctionnera pas si votre squelette (en fait, l’ensemble de vos fichiers .html) utilise la balise #TEXTE étoilée (« #TEXTE* »). En effet, cette syntaxe permet de s’affranchir de tous les filtres automatiques et SPIP renvoie donc le texte brut sans aucune transformation. Si vous tenez absolument à mettre une étoile, alors il faut ajouter à votre balise le filtre sommaire_d_article, comme ceci : [(#TEXTE*|propre|sommaire_d_article)].
Astuces
Afin d’éviter que les raccourcis « [!sommaire] » ou « [!fond] » se retrouvent automatiquement dans les résumés produits par la balise #INTRODUCTION, activez aussi l’outil « Balise #INTRODUCTION ».
En manipulant les styles css ou en utilisant jQuery, Il vous est possible de manipuler l’aspect du sommaire. Le cadre est en fait un <div id="outil_sommaire" class="cs_sommaire" >.
Le cadre du sommaire est livré par défaut avec une marge à gauche (1em) et une marge à droite (0.4em). Si la marge à droite ne vous est pas nécessaire, alors ajoutez le code suivant au fichier css de votre squelette : .cs_sommaire {margin-right:0pt !important;}. Si vous préférez mettre ce cadre en haut à gauche de votre article au lieu de l’avoir à droite, alors ajoutez ce code : .cs_sommaire {float:left !important;}.
Cet outil « Sommaire en début d’article » se marie très bien avec l’utilisation d’un outil voisin : « Découpe un texte en pages et/ou onglets ». Si ce dernier est activé, le sommaire détecte en effet les découpages et ajoute le numéro de la page où les différents intertitres SPIP ont été trouvés. Voici l’exemple d’un article sur deux pages :
une balise inconnue : <//_memrubric>
RSS 2.0