Table des Matières

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

Version 2.4.0

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 :

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

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)

Discussion

24 discussions

  • 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 :

    [<div id="tdm" class="divers">
    	<ul class="nav tdm-nav">
    		(#ENV*{code})
    	</ul>
    </div>]

    Répondre à ce message

  • 1

    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

    • 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

  • 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

  • 9

    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

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

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

      Là c’est mieux ?

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

    • 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

    • 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

    • 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 :/

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

    • 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 :)

    • 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

  • 4

    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 :

    http://www.milly-la-foret.fr/spip.php?article2122#Vous-souhaitez-apprendre-a

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

    http://www.milly-la-foret.fr/#Vous-souhaitez-apprendre-a

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

    http://www.milly-la-foret.fr/vivre-a-milly-3/action-sociale/article/seniors-personnes-agees#Vous-souhaitez-apprendre-a

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

    Pour info, ma config d’urls arborescentes :

    $GLOBALS['url_arbo_types']=array(
    	'rubrique'=>'',
    	'article'=>'',
    	'mot'=>'tags'
    );

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

    Merci par avance ;-)

    Répondre à ce message

  • 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

  • 5

    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());
    • Peux-tu faire les corrections directement sur la zone ? merci

    • 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 ?

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

    • 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'

    • 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

  • 3

    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

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

    • 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
    • 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

  • 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* :

    [(#TEXTE*|table_matieres{texte}|propre)]

    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 :

    	if (_AUTO_ANCRE == 'oui') {
    		$traitements_actuels =
    			isset($interface['table_des_traitements']['TEXTE']['articles'])
    				? $interface['table_des_traitements']['TEXTE']['articles']
    				: $interface['table_des_traitements']['TEXTE'][0];
     
    		// completer les traitements actuels, mais le sommaire automatique passe en preum's
    		$interface['table_des_traitements']['TEXTE']['articles'] =
    			str_replace('%s', 'table_matieres(%s)', $traitements_actuels);
    	}

    par :

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

    Répondre à ce message

  • 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 :

    <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

Ajouter un commentaire

Qui êtes-vous ?

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 26 avril 2018