SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 249 visiteurs en ce moment

Accueil > Rédaction > Sommaires > Table des Matières > Table des Matières

Table des Matières

29 juillet 2007 – par Fil, James, Matthieu Marcillaud – 73 commentaires

17 votes

Ajoute des ancres en fonction des intertitres et fournit une balise pour afficher la « table des matières » d’un article - autrement dit un « sommaire » -.

Objectif

L’objectif de ce plugin est d’ajouter des ancres html calculées en fonction du texte de l’intertitre, et de fournir une balise pour afficher la "table des matières" d’un article (contenu de #TEXTE)

Fonctionnement

Les intertitres ( notés {{{intertitre}}} ) seront transformés en <h3 class="spip"><a name="intertitre"></a>intertitre <a href="tdm"><img ... /></a></h3>

Le contenu de l’attribut name est calculé selon une méthode approchant celle des urls propres de spip. Aussi un intertitre {{{ceci est un intertitre spécial}}} sera transforme en <h3 class="spip"><a name="ceci-est-un-intertitre-special"></a>ceci est un intertitre spécial</h3>

Chaque intertitre est mémorisé avec son ancre correspondante pour être reproduite dans la balise #TABLE_MATIERES

Installation

Télécharger l’archive ci-joint, puis décompresser le fichier. Copier ce répertoire tables_matieres dans le répertoire « plugins » de votre site spip. Alternativement, vous l’aurez trouvé dans l’interface de chargement automatique de SPIP, il se trouve alors dans plugins/auto

Zip - 4.9 ko
Version 2.3.3
développé sur la zone http://trac.rezo.net/trac/spip-zone/

Configuration

Le plugin dispose d’un menu de configuration qui permet de choisir :

  • si la table des matières doit s’insérer automatiquement ou via l’appel de la balise
    #TABLE_MATIERES
  • A partir de combien d’intertitres minimum, il faut générer la table des matières
  • Le format des ancres générées
  • ....

Utilisation

Les intertitres seront calculés automatiquement. Pour afficher la table des matières, ajouter la balise #TABLE_MATIERES dans votre squelette à l’intérieur d’une boucle ARTICLES.

#TABLE_MATIERES affichera les ancres de la manière suivante par défaut :

  1. <div id="tdm" class="divers">
  2. <h2 class="menu-titre">Table des matières</h2>
  3. <ul>
  4. <li><a href="#intertitre-1">intertitre-1</a></li>
  5. <li><a href="#intertitre-2">intertitre-2</a></li>
  6. <li><a href="#intertitre-3">intertitre-3</a></li>
  7. </ul>
  8. </div>

Télécharger

Ce qui est un modèle CSS connu puisque tout proche de celui des noisettes de la barre de navigation des squelettes par défaut de SPIP.

Notez la présence d’un noeud DOM #tdm pour permettre l’aller/retour entre la table et les intertitres par simple clic, personnaliser l’habillage en CSS ou jouer avec la table en jQuery.

Personnalisation

Il est possible de personnaliser le modèle fourni en surchargeant le fichier modeles/tables_matieres.html

Prérequis

Ce plugin nécessite une version de SPIP récente (révision minimum : 9738, introduction de la balise #FOREACH)

Voir en ligne : http://plugins.spip.net/tablematieres

Dernière modification de cette page le 24 février 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 14 octobre 2015 à 15:23, par erational En réponse à : Table des Matières

    Il est possible d’utiliser ce plugin en combinaison avec le plugin ancresdouces et bootstrap pour réaliser un menu basé sur les composant affix / scrollspy.

    Pour cela, il faut juste ajouter le modèle suivant dans votre squelette /modeles/table_matieres.html pour l’adapter au marquage HTML/CSS attendu par bootstrap :

    1. [<div id="tdm" class="divers">
    2. <ul class="nav tdm-nav">
    3. (#ENV*{code})
    4. </ul>
    5. </div>]

    Télécharger

    Répondre à ce message

  • Le 2 décembre 2014 à 16:09, par freebsnet En réponse à : Table des Matières

    Bonjour,
    avec TDM 2.2.4 comment surcharger l’image tdm.png pour respecter une charte graphique ?
    j’ai essayé de redéfinir dans mes_fonctions.php le find_in_path() dans le define défine('_RETOUR_TDM, ...) mais rien y fait, c’est toujours l’image du plugin qui semble prioritaire.
    Merci d’avance si vous avez une solution.
    cordialement

    • Le 6 décembre 2014 à 12:01, par freebsnet En réponse à : Table des Matières

      Bonjour,
      Arf ! il faut simplement placer son image tdm.png dans un répertoire /images/ soit dans /squelettes/images/ , soit dans /plugins/mon_plugin/images/ ou aussi dans /themes/mon_theme/images/.

    Répondre à ce message

  • Le 10 janvier 2014 à 10:35, par Patrice En réponse à : Table des Matières

    Bonjour,

    est-ce que quelqu’un saurait comment faire en sorte que la TDM ne s’affiche pas dans les flux RSS des articles ?

    NB pour ceux que ça intéresserai : le fichier de CSS que j’ai placé dans /squelettes/css/style.css

    div.tdm, div#tdm {
     border-top-width: medium;
     border-right-width-value: medium;
     border-bottom-width: medium;
     border-left-width-value: medium;
     border-top-style: none;
     border-right-style-value: none;
     border-bottom-style: none;
     border-left-style-value: none;
     border-image-source: none;
     border-image-slice: 100% 100% 100% 100%;
     border-image-width: 1 1 1 1;
     border-image-outset: 0 0 0 0;
     border-image-repeat: stretch stretch;
     margin-top: 0px;
     margin-right: 18px;
     margin-bottom: 30px;
     margin-left: 18px;
     background-color: #ffffff;
     background-image: none;
     background-repeat: repeat;
     background-attachment: scroll;
     background-position: 0% 0%;
     background-clip: border-box;
     background-origin: padding-box;
     background-size: auto auto;
     padding-top: 5px;
     padding-right: 10px;
     padding-bottom: 5px;
     padding-left: 10px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
     box-shadow:2px 2px 10px gray;
     -moz-box-shadow:2px 2px 10px gray;
     -webkit-box-shadow:2px 2px 10px gray;
    }


    div.tdm, div#tdm {
     width: 300px;
     float: right;
    }

    div.tdm ul li:before, div#tdm ul li:before {content: "→ ";}

    Répondre à ce message

  • Le 4 mai 2013 à 10:48, par kent1 En réponse à : Table des Matières

    Hello

    Suite à ce post sur seenthis http://www.seenthis.net/messages/135053 faisant référence à la table des matières flottante de engadget, j’ai codé un petit js pour voir si c’était faisable simplement avec SPIP/jQuery/Plugin Table des matières.

    Le résultat est visible là par exemple : https://technique.arscenic.org/commandes-linux-de-base/article/cron-gestion-des-taches-planifiees

    C’est peut être encore un peu buggué car fait en 2 heures mais si vous trouvez que ça a sa place dans le plugin avec une petite option de conf pour l’activer je peux essayer de rendre un chouilla plus générique ?

    Dites moi

    • Le 10 mai 2013 à 10:30, par Fil En réponse à : Table des Matières

      t’es sûr que ça marche, je ne vois rien sur ton site ?

    • Le 10 mai 2013 à 10:56, par kent1 En réponse à : Table des Matières

      Oups... le plugin avait été désactivé par mégarde...

      Là c’est mieux ?

    • Le 10 mai 2013 à 12:05, par Fil En réponse à : Table des Matières

      Sur Firefox oui, ailleurs (Chrome et Safari), apparemment pas

    • Le 11 juin 2013 à 22:55, par jeanmarie En réponse à : Table des Matières

      Salut,

      j’utilise ce plugin avec Ancres douces et j’ai des comportements bizarres :
      le défilement doux se fait bien lors du premier parcours de mes intertitres (3 en tout) mais, lorsque arrivé en bas, je veux remonter à l’intertitre précédent ou au 1er, je n’ai plus le défilement doux.
      Arrivé là, le défilement doux ne fonctionne plus dans un sens ni dans l’autre pour mes 2 premiers intertitres mais continue à fonctionner le troisième.
      Voir l’exemple par là : http://dev.cousumain.info/spip.php?article1

      En tout cas, merci pour ce plugin.

      jean marie

    • Le 12 juin 2013 à 12:04, par kent1 En réponse à : Table des Matières

      Bon je viens de refaire une grosse partie du js cf : http://zone.spip.org/trac/spip-zone/changeset/73533

      Dis moi si ça marche mieux.

      Chez moi ça semble fonctionner correctement là : https://technique.arscenic.org/monitoring/awstats/article/installation-et-configuration-de

    • Le 12 juin 2013 à 12:39, par jeanmarie En réponse à : Table des Matières

      Salut Kent1,

      merci pour ta réponse...
      Malheureusement, ça ne marche toujours pas.

      J’ai le même comportement sur ton site :
      En haut de page (Table des matières non flottante), quand je clique sur Configuration de Awstats lui-même ça défile bien (doux) jusqu’en bas.
      Une fois en bas (Table des matières flottante), si je clique sur Installation, je n’ai plus défilement doux et ça remonte d’un coup. A partir de là, ça ne défile plus du tout.
      Par contre, si je recharge la page (F5) avant de cliquer sur Installation, ça défile bien (doux).

      Pour info, je suis sous Win7 et j’ai testé sous Firefox 21, IE9, Chrome 27 et Safari 5.1 et c’est pareil :/

    • Le 12 juin 2013 à 15:36, par kent1 En réponse à : Table des Matières

      Avec http://zone.spip.org/trac/spip-zone/changeset/73537 ça devrait être un peu mieux (même page pour le test)

    • Le 12 juin 2013 à 16:18, par jeanmarie En réponse à : Table des Matières

      Effectivement, ça marche nickel... merci pour la rapidité !

      Par contre, il y a l’air d’avoir un souci sur le positionnement du contenu au scroll : l’intertitre ciblé se retrouve sous la table flottante...

      Et penses-tu que ce décalage puisse être configuré ?
      Je m’explique : j’aimerais que les entrées de la table soient toutes visible en permanence et présentées horizontalement lorsque la table est flottante (display:inline). Je trouve que c’est plus intuitif que de devoir cliquer sur l’intertitre de ce qu’on est en train de lire pour la déplier.
      J’ai un peu bidouillé dans le scripts... mais c’est pas terrible de bidouiller dans les scripts.
      Oui, je sais, on s’éloigne du fonctionnement original, tu as le droit de dire m..... enfin, non :)

    • Le 12 juin 2013 à 17:36, par jeanmarie En réponse à : Table des Matières

      Un truc qui serait bien aussi, c’est que dans la Table flottante, il y ait un lien Haut de page qui pointe sur #contenu pour remonter au niveau du titre.
      Sinon, il faut obligatoirement que le contenu commence par un intertitre et ça pose des problèmes si il y a un chapeau par exemple.

    Répondre à ce message

  • Le 29 juillet 2011 à 11:02, par Cyril Marion En réponse à : Table des Matières

    Bonjour,

    Il semblerait que les liens générés dans la table des matières ait un peu mal avec les urls arborescentes. Avec les urls standard tout fonctionne correctement :

    Exemple :

    Url correcte vers un paragraphe de l’article, générée par TDM, avec les urls standard :

    Lien vers le même paragraphe, généré automatiquement par le plugin TDM, mais avec les urls arbo activées :

    Alors que la bonne url vers ce paragraphe devrait être :

    Du coup, les liens amènent vers une page 404.

    Pour info, ma config d’urls arborescentes :

    Avez-vous une idée pour résoudre ce problème de liens ?

    Merci par avance ;-)

    Répondre à ce message

  • Le 29 septembre 2012 à 17:25, par DD En réponse à : Table des Matières

    Bonjour,

    Est-il possible de désactiver la table des matières au cas par cas par exemple avec une balise genre
    {table_matieres=non} dans le texte d’un article ?

    merci

    dd

    Répondre à ce message

  • Le 24 février 2012 à 12:27, par peetdu En réponse à : Table des Matières

    Un grand merci pour ce plugin.

    J’ai un peu modifié son contenu car j’avais besoin d’une table des matières pour le #CHAPO.
    J’ai donc créé une balise #TABLE_MATIERES_CHAPO

    Pour cela j’ai ajouté les lignes suivants :
    1- Dans le fichier tdm_pipelines.php

    $interface['table_des_traitements']['TABLE_MATIERES_CHAPO'] = 'table_matieres(%s, \'tdm\')';

    2- dans le fichier table_matieres.php (à la racine du plugin)

    function balise_TABLE_MATIERES_CHAPO_dist($p) {
            $b = $p->nom_boucle ? $p->nom_boucle : $p->descr['id_mere'];
            if ($b === '') {
                    erreur_squelette(
                            _T('zbug_champ_hors_boucle',
                                    array('champ' => '#TABLE_MATIERES')
                            ), $p->id_boucle);
                    $p->code = "''";
            } else {
                    $_chapo = champ_sql('chapo', $p);
                    $p->code = "$_chapo";
            }
            return $p;
    }

    Du coup, j’ai trouvé une erreur dans le code de la fonction « tdm_vider_intertitres » qui permet de vider le cache des intertitres trouvés.
    Toujours dans le fichier table_matieres.php ligne 227 il faut modifier...

    if($vider_table) return ($table = array());

    ...par

    if($vider) return ($table = array());
    • Le 24 février 2012 à 14:29, par Fil En réponse à : Table des Matières

      Peux-tu faire les corrections directement sur la zone ? merci

    • Le 25 février 2012 à 23:08, par peetdu En réponse à : Table des Matières

      Ok. Je m’en occupe.

      Tant qu’a faire, j’ai une proposition. J’ai également sur ce site le plugin « Enluminures typographiques ». Les sous-interttires genre...

      {{{** sous-intertitre-niveau 2}}}

      ...ne sont que partiellement pris en compte ce qui provoque un effet de bord indésirable.

      J’ai rajouté dans le fichier table_matieres.php (ligne 143) le code ci-dessous qui permet de shunter ces sous-intertitres et donc de rendre la coexistence de ces deux plugins compatibles.

      Avant...

      "/{{{(.*)}}}/UmsS" => 'tdm_remplacement_raccourcis_standard_callback'

      ....après

      "/{{{[^*](.*)}}}/UmsS" => 'tdm_remplacement_raccourcis_standard_callback'

      ...et ça marche bien.

      Je commit le bug et cet ajout, où juste le bug ?

    • Le 25 février 2012 à 23:28, par Fil En réponse à : Table des Matières

      Il n’est pas nécessaire de demander la permission :)
      Surtout si ça marche mieux

    • Le 22 mai 2012 à 16:00, par Mist. GraphX En réponse à : Table des Matières

      D’abord, merci pour ce plugin qui permet de structurer proprement des documents longs simplement et efficacement.

      @peetdu

      merci pour le tips, curieusement chez moi en spip 3.0.1, avec Enluminures c’est plus sans (.*) :

      ce qui donne
      "/{{{[^*]}}}/UmsS" => 'tdm_remplacement_raccourcis_standard_callback'

    • Le 22 mai 2012 à 18:16, par Mist. GraphX En réponse à : Table des Matières

      Non rectification, ça me bouffe le premier caractère de tous les titres de la table si il n’y a pas d’espace après la dernière astérixsme * {{{** Titre }}} qui est bizarre car les boutons ne crée pas les raccourcis ainsi dans le porte plume :/

    Répondre à ce message

  • Le 1er février 2012 à 10:21, par PhDG En réponse à : Table des Matières

    J’ai SPIP 2.1.12 avec la dernière version de ce plugin. Il y a un article sur lequel je ne parviens pas à faire apparaître la table des matières dans la partie publique. Elle se crée pourtant bien dans la partie privée. Je ne comprends pas ! Je ne vois aucune différence entre les deux articles qui pourrait causer cette bizarrerie.
    Une idée ???
    Merci

    • Le 2 février 2012 à 12:31, par PhDG En réponse à : Table des Matières

      Pour plus de précision, j’ajoute que j’utilise le squelette AHUNTSIC.

    • Le 22 février 2012 à 16:53, par Peetdu En réponse à : Table des Matières

      J’ai trouvé d’où venait le problème et une solution qui marche (sans malheureusement totalement corriger le plugin lui même)

      Il faut éditer le fichier « table_matieres.php » (celui qui se trouve à la racine du plugin) et ligne 289 à 290 il faut remplacer ...

      $_table = inserer_attribut('<div class="encart"></div>',
                              'rel', $_table)

      ..par

      $_table =  $_table
    • Le 23 février 2012 à 09:43, par Fil En réponse à : Table des Matières

      Ce code sert à insérer la TDM en javascript ; si tu le neutralises (tu peux mettre un # pour passer la ligne en question en commentaire), ta TDM est insérée en HTML. Il faudrait donc comprendre pourquoi l’insertion en javascript ne se fait pas dans ton cas.

    Répondre à ce message

  • Le 14 décembre 2011 à 10:31, par Aurélie En réponse à : Table des Matières

    En Spip 2.1.12, table des matières 2.0.2 [54334], la table des matières générée automatiquement fonctionne bien mais le texte de l’article n’est pas traité si on place soi-même la balise #TABLE_MATIERES dans le squelette (cfg : « La table des matières est-elle générée automatiquement ? » : non).

    Pour y remédier rapidement, j’ai passé les filtres |table_matiere{texte}|propre à la balise #TEXTE* :

    Mais j’imagine que le plugin devrait tester la variable de configuration : si _AUTO_ANCRE est oui, on applique le filtre table_matieres au texte ; sinon on l’applique tout de même, avec le paramètre ’texte’ (le filtre ne retourne alors que le texte traité, donc, avec les ancres).

    Dans tdm_pipelines.php, remplacer :

    1. if (_AUTO_ANCRE == 'oui') {
    2. $traitements_actuels =
    3. isset($interface['table_des_traitements']['TEXTE']['articles'])
    4. ? $interface['table_des_traitements']['TEXTE']['articles']
    5. : $interface['table_des_traitements']['TEXTE'][0];
    6.  
    7. // completer les traitements actuels, mais le sommaire automatique passe en preum's
    8. $interface['table_des_traitements']['TEXTE']['articles'] =
    9. str_replace('%s', 'table_matieres(%s)', $traitements_actuels);
    10. }

    Télécharger

    par :

    1. // traiter les articles
    2. $traitements_actuels =
    3. isset($interface['table_des_traitements']['TEXTE']['articles'])
    4. ? $interface['table_des_traitements']['TEXTE']['articles']
    5. : $interface['table_des_traitements']['TEXTE'][0];
    6. //si le sommaire automatique est actif, on ajoute la table des matières et les ancres
    7. if (_AUTO_ANCRE == 'oui') $filtre_tdm = 'table_matieres(%s)';
    8. // sinon, que les ancres
    9. else $filtre_tdm = 'table_matieres(%s,\'texte\')';
    10.  
    11. // completer les traitements actuels, mais le sommaire automatique passe en preum's
    12. $interface['table_des_traitements']['TEXTE']['articles'] =
    13. str_replace('%s', $filtre_tdm, $traitements_actuels);

    Télécharger

    Répondre à ce message

  • Le 23 novembre 2011 à 17:45, par csauvage En réponse à : Table des Matières

    Pour ma part, j’ai un comportement bizarre sous SPIP 2.1.8 :
    La balise #TABLE_MATIERE me renvoit un code qui est échappé, genre :

    1. <div class="encart" rel='&lt;div id=&quot;tdm&quot; class=&quot;divers&quot;&gt; &lt;h2 class=&quot;menu-titre&quot;&gt;Table des matières&lt;/h2&gt; &lt;ul&gt; &lt;li &gt;&lt;a href=&#39;

    Je suis obligé de passer par un filtre maison en PHP qui me fait :
    $tdm = htmlspecialchars_decode($tdm, ENT_QUOTES) ;
    $tdm = str_replace(« rel=’ », ’>’, $tdm) ;
    $tdm = str_replace(« 

    ’>

     », ’

    ’, $tdm) ;
    return $tdm ;

    Et là ça marche...

    Je ne pense pas que ce soit normal. Quelqu’un s’est-il déjà frotté à ce problème ?

    Autre problème, si je ne spécifie pas l’option « La table des matières est-elle générée automatiquement ? » à Oui, le plugin ne met pas les ancres dans le #TEXTE.
    J’ai dû aller retoucher le code du plugin pour ne pas afficher 2 fois la TDM.
    Ca pourrait être une histoire de version de SPIP ??
    Camille

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

Ça spipe par là