Another teacher’s website

  http://bit.ly/uEMhKB copy to clipboard + http://bit.ly/uEMhKB RSS

Un sommaire pour les articles

Un sommaire pour les articles

généré à la volée avec jQuery à partir des {{{intertitres}}}

par SteF, le 25 décembre 2011 BY-SA
4 commentaires
Pièces jointes

Donnez votre avis
17 votes

Sommaire

Voici une toute petite fonction pour générer une table des matières cliquable au début des articles qui contiennent des intertitres, librement adaptée de cet article de Janko.

Principe

La page servie à l’utilisateur contient une table des matières vide si le texte contient au moins un intertitre. Une fois la page chargée, c’est le navigateur qui peuple cette table des matières à partir du contenu des intertitres.

La fonction

Cette fonction va attribuer à chaque intertitre un identifiant unique et ajouter à l’intérieur du sommaire (la balise <ul id="toc">) un lien vers chaque intertitre, sous forme de liste non ordonnée.

Il est bien entendu nécessaire d’avoir accès à jQuery. C’est le cas par défaut avec SPIP.

Elle peut être ajoutée à un fichier .js déjà chargé par le squelette. Si ce n’est pas le cas, ce fichier sera créé et appelé dans le <head></head> du squelette, avec une ligne comme suit :

Zip - 266 octets
toc.js - sommaire automatique avec jQuery
enregistrez ce fichier dans un dossier de squelettes

Ci-contre un fichier toc.js à télécharger et à ajouter dans le dossier de votre squelette (ou dans le dossier /squelettes si vous voulez pouvoir l’utiliser avec plusieurs jeux de squelettes).

Insertion du sommaire

Pour que cela fonctionne, il est nécessaire que la fonction trouve une balise <ul id="toc"></ul> qu’elle peuplera.

Pour insérer une telle balise — à condition que le corps de l’article contienne au moins un intertitre — ajoutez à votre squelette à l’endroit où vous souhaitez faire apparaître le sommaire la ligne de code suivante :

Habillage du sommaire

Habillez votre sommaire en stylant la balise #toc et ses descendants dans votre feuille de style .css

Lien de retour

On peut également demander à la fonction d’insérer un lien de retour vers le haut de la page au dessus de chaque intertitre avec une ligne supplémentaire, la fonction devient alors :

Note - le lien de retour n’est ajouté qu’à partir du 2ème intertitre, pour le styler dans le css, il suffit d’ajouter la déclaration suivante :

Alternative

Sur Spip-Contrib, le plugin Sommaire pour vos articles permet d’obtenir le même résultat, excepté que le sommaire est calculé par le serveur et non par les clients.

Table by Kim Kyung Won - cc-BY-NC-ND Annamatic3000

Pièces jointes à télécharger

  • toc.js - sommaire automatique avec jQuery - Zip - 266 octets
    enregistrez ce fichier dans un dossier de squelettes
    Télécharger

Retour en haut de la page

1/11 Sommaire de la rubrique Précédent Suivant

Conditions d'utilisation

Le billet ci-dessus « Un sommaire pour les articles » par Stephane Busuttil, ainsi que — sauf mentions spécifiques — tous les documents accessibles sur cette page sont librement mis à disposition selon les termes de la licence Creative Commons Paternité - Partage des Conditions Initiales à l'Identique 3.0 Unported.

+ de détails

Votre avis sur cette page

17 votes

4 commentaires

Aller au dernier commentaire

  • Laurence Bernard, le 27 décembre 2011 à 01:13

    je ne vois pas ce qu’il y a de nouveau... on pouvait déjà faire un sommaire avec je ne sais plus quel plugin...non ?

  • Stéphane Busuttil, le 27 décembre 2011 à 08:22

    @laurence : la réponse est à la fin de l’article. le rendu est identique pour l’utilisateur, mais la création du sommaire est différente (déléguée au client, ça allège le calcul de la page sur le serveur)

  • Laurence Bernard, le 27 décembre 2011 à 17:31

    ah wé, quand même ! Woah !!!

  • Stéphane Busuttil, le 27 décembre 2011 à 17:45

    hé ouéh, ça t’en bouche un coin hein ^^


Vos réactions

Laissez ci-dessous vos commentaires, précisions, remarques et questions. Vos contributions ne s'affichent publiquement qu'après validation, trop de spam sinon.

Commenter
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

    texte
Qui êtes-vous ?

Retour en haut de la page

SPIP

SPIP est un logiciel unique, merveilleux et irremplaçable. Dans cette rubrique, quelques modestes contributions.

10 autres articles dans cette rubrique

Morceaux choisis


Contribuez à maintenir ces pages sur la toile.
Paiement sécurisé par Paypal ou CB

Frais d'hébergement depuis 2009 : 230 €
Total des dons depuis 2009 : 99 €

Another Teacher's Website est motorisé par SPIP.

Contribuez au contenu de ce site