Un sommaire pour vos articles

Une fonctionnalité du Couteau Suisse qui repère les intertitres des textes de vos articles ou de vos rubriques, et permet même plusieurs niveaux, puis en fabrique automatiquement un sommaire.

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 — à l’instar de cette page — 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 ne retient que les intertitres de premier niveau [1] : balises HTML <h3> ou raccourcis SPIP {{{...}}}. Or, il est possible de prendre en compte des niveaux supplémentaires en renseignant le paramètre "Profondeur retenue". Les balises <h4> ou <h5> pourront alors être insérées dans le sommaire. Si vous avez installé un plugin typographique afin d’éviter d’utiliser les balises HTML <hN> en dur, les intertitres de niveaux supérieurs peuvent se noter de différentes façons. Exemples : {2{...}2}, {{{**...}}}, {{{**...}}},etc.

Le Couteau Suisse a choisi de retenir nativement la syntaxe {{{**...}}} de mortimer. Ces nouveaux raccourcis (intertitres hiérarchisés, ou sous-titres) seront donc automatiquement traités, même en l’absence de plugin tiers :
-  Intertitre de niveau 1 : {{{Intertitre}}} ou {{{*Intertitre}}}
-  Intertitre de niveau 2 : {{{**Intertitre}}}
-  Intertitre de niveau 3 : {{{***Intertitre}}}
-  etc.

Exemple de sommaire ayant deux niveaux d’intertitres :

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 simplement 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 « 

 ».
Ces raccourcis, bien sûr, ne seront pas affichés à l’écran.

Changements d’aspect et surcharges

Pas de fond

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 :

Les surcharges de fichiers

Techniquement, le plugin utilise :
-  un modèle SPIP : plugins/couteau_suisse/fonds/sommaire.html
-  une feuille de styles : plugins/couteau_suisse/outils/sommaire.css.html

Ces deux fichiers peuvent facilement être surchargés dans votre squelette en les recopiant dans :
-  mon_squelette/fonds/sommaire.html
-  mon_squelette/outils/sommaire.css.html

En étudiant les deux fichiers surchargeables cités ci-dessus, 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...

Voici le code de sommaire.html :

<div class="cs_sommaire cs_sommaire_[(#ENV*{fond_css})]_fond" id="outil_sommaire">
  <div class="cs_sommaire_inner">
    <div class="cs_sommaire_titre_[(#ENV*{fond_css})]_fond">&nbsp; <:couteau:sommaire_titre:> &nbsp;</div>
    <ul>
      [(#ENV*{sommaire})]
    </ul>
  </div>
</div>

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/sommaire.html". Le sommaire d’origine sera donc ignoré, au profit de votre propre sommaire. Cette façon de faire peut également s’appliquer au fichier des styles.

Si l’envie vous venait de changer simplement le titre du sommaire, alors changez simplement la chaîne de titre de votre fichier mon_squelette/fonds/sommaire.html. Un exemple qui bénéficie de toutes les traductions de SPIP :

[(#REM) "Navigation rapide" et toutes ses traductions ]
<div class="cs_sommaire_titre"><:icone_brouteur:></div>

Le sommaire est aujourd’hui dé/repliable et par défaut, le visiteur trouve un sommaire déplié (visible en totalité). Pour obtenir un sommaire replié lorsque le visiteur découvre la page pour la première fois (seul le titre apparaît), il suffit de surcharger le fichier fonds/sommaire.html en ajoutant les deux classes suivantes :
-  cs_sommaire_replie sur <div class="cs_sommaire_titre_[(#ENV*{fond_css})]_fond">
-  cs_sommaire_invisible sur <ul>

Ce qui donne :

<div class="cs_sommaire cs_sommaire_[(#ENV*{fond_css})]_fond" id="outil_sommaire">
  <div class="cs_sommaire_inner">
    <div class="cs_sommaire_titre_[(#ENV*{fond_css})]_fond cs_sommaire_replie">&nbsp; <:couteau:sommaire_titre:> &nbsp;</div>
    <ul class="cs_sommaire_invisible">
      [(#ENV*{sommaire})]
    </ul>
  </div>
</div>

Attention, le sommaire sera systématiquement replié lorsque le visiteur arrive sur la page pour la première fois. Mais s’il quitte la page le sommaire déplié, alors un cookie posé sur sa machine permettra de déplier le sommaire s’il revient sur la page... Euh, suis-je clair ?

Les liens de retour au sommaire

Lors de la construction du sommaire, le plugin ajoute par défaut à chaque intertitre de la page, un lien de retour au sommaire qui permet au lecteur de revenir facilement en haut de la page. Vous avez maintenant la possibilité (version récente du Couteau Suisse) de modifier ce comportement en surchargeant la fonction sommaire_lien_retour_dist($self, $titre) que vous pouvez trouver dans le fichier outils/sommaire_fonction.php.

Pour cela, il vous faut placer une nouvelle fonction sommaire_lien_retour($self, $titre) dans votre fichier config/mes_options.php que le compilateur utilisera à la place de la précédente. Par exemple, si vous ne voulez pas des liens de retour au sommaire dans les intertitres, utilisez le code suivant :

function sommaire_lien_retour($self, $titre) { 
  return $titre;
}

A titre d’info, voici le code actuel de la fonction utilisée par défaut :

function sommaire_lien_retour_dist($self, $titre) {
  static $haut = NULL;
  if(!isset($haut)) 
    $haut = '<a title="'._T('couteau:sommaire_titre')
        .'" href="'.$self.'#outil_sommaire" class="sommaire_ancre">&nbsp;</a>';
  return $haut . $titre;
}

Le calcul des ancres

Lors de la construction du sommaire, le plugin calcule automatiquement les ancres de chaque intertitre par incrémentation : outil_sommaire_XX. Vous avez maintenant la possibilité (version récente du Couteau Suisse) de modifier ce comportement en surchargeant la fonction sommaire_id_ancre_dist($index, &$titre, $hn) que vous pouvez trouver dans le fichier outils/sommaire_fonction.php.

A l’instar des liens au paragraphe précédent, il vous faut pour cela placer une nouvelle fonction sommaire_id_ancre($index, &$titre, $hn) dans votre fichier config/mes_options.php que le compilateur utilisera à la place de la précédente.

Si vous souhaitez de belles ancres en approfondissant la compatibilité avec le format proposé ici par mortimer, configurez votre outil pour utiliser de "jolies ancres" dans le sommaire. Le calcul des ancres n’est alors plus surchargeable et le plugin utilisera la fonction suivante (compatible avec les intertitres en image) :

function sommaire_id_ancre_ex($index, &$titre, $hn) {
  // traiter le format {{{Mon titre<mon_ancre>}}} (ou alt='Mon titre&lt;mon_ancre&gt;')
  if(preg_match(',<(\w+)>$,', $titre, $r)
      || preg_match(',&lt;(\w+)&gt;(?=\'),', $titre, $r)) {
    $titre = str_replace($r[0], '', $titre);
    return $r[1];
  }
  $a = strtolower(translitteration(sommaire_nettoyer_titre($titre)));
  $a = trim(preg_replace(',[^a-z0-9_]+,', '_', $a), '_');
  return strlen($a)>2?$a:"sommaire_$index";
}

A titre d’info, voici le code actuel de la fonction utilisée par défaut :

function sommaire_id_ancre_dist($index, &$titre, $hn) {
  return 'outil_sommaire_' . $index;
}

Notez que la variable $titre (intertitre en cours) est passée en référence, ce qui permet de la modifier le cas échéant. $index est incrémenté à chaque appel de la fonction. $hn est le rang (le "N" tiré de la balise HTML <hN>) de l’intertitre en cours. Si vous activez l’outil "Intertitres en images" il est fort probable que $titre soit une balise image (<img ... />) et non un texte...

Les éléments du sommaire

Lors de la construction du sommaire, le plugin cherche pour chaque élément, une fonction sommaire_id_page($element, $page) permettant certaines personnalisations, notamment en cas de découpe en pages. Le paramètre $element est le lien cliquable mis en forme pour accéder au paragraphe correspondant, et le paramètre $page est le numéro de l’extrait découpé. Par défaut, le plugin ajoute ce numéro dans le libellé de chaque lien, par exemple : « Introduction, p1 » , « Conclusion, p2 ».

Pour changer ce comportement d’origine, et à l’instar des ancres au paragraphe précédent, il vous faut pour cela placer la fonction sommaire_id_page($element, $page) dans votre fichier config/mes_options.php que le compilateur utilisera à la place de la fonction native sommaire_id_page_dist.

Voici un exemple de fonction qui supprime ici toute référence aux pages découpées :

function sommaire_id_page($element, $page) {
	return $element;
}

A titre d’info, voici le code actuel de la fonction utilisée par défaut :

function sommaire_id_page_dist($element, $page) {
	return $page ? $element 
		.  _T('couteau:sommaire_page', array('page'=>$page))
	 : $element;
}

Balise #CS_SOMMAIRE

Par défaut, le Couteau Suisse insère le sommaire en tête d’article automatiquement. Mais vous avez la possibilité de placer le sommaire ailleurs dans votre squelette qu’en tête de votre article grâce à une balise #CS_SOMMAIRE. Attention : l’utilisation de cette balise doit être activée dans la page de configuration de l’outil « Sommaire automatique » et annule ainsi l’insertion automatique du sommaire dans vos articles.

Cette balise renvoie le sommaire seul quand il existe, et se comporte un peu comme la balise #TEXTE : elle doit être placée à l’intérieur d’une boucle ARTICLES. Depuis la version 1.8.36.00 du Couteau Suisse, la balise #CS_SOMMAIRE accepte un paramètre numérique permettant d’accéder directement à un article par son id_article (grâce à un appel SQL), évitant ainsi une boucle dédiée.

Exemples : #CS_SOMMAIRE{2}, #CS_SOMMAIRE{#GET{toto}} ou #CS_SOMMAIRE{#ENV{id_article}}.

Attention, ce raccourci ne doit pas être utilisé à l’intérieur d’une boucle du même article, sous peine d’un appel SQL inutile. Exemple évident à éviter :
<BOUCLE01(ARTICLES)>#CS_SOMMAIRE{#ID_ARTICLE}</BOUCLE01>
Vous l’avez compris, la syntaxe correcte est bien sûr :
<BOUCLE01(ARTICLES)>#CS_SOMMAIRE</BOUCLE01>

Depuis la version 1.8.154 du Couteau Suisse, le filtre |sommaire_url{nouvelle_URL} vous permet de remplacer l’URL par défaut du sommaire (celle de la page courante en fait) par celle de votre choix. Ce filtre vous sera indispensable lorsque la balise #CS_SOMMAIRE n’est pas utilisée sur la page de l’article correspondant.

L’exemple suivant retourne une liste de sommaires d’articles pointant correctement vers les intertitres repérés dans chacun des articles :
<BOUCLE01(ARTICLES)>[(#CS_SOMMAIRE|sommaire_url{#URL_ARTICLE})]</BOUCLE01>

Voici deux exemples rendant le même résultat (le premier cependant fait un appel SQL supplémentaire) :
-  [(#CS_SOMMAIRE{2}|sommaire_url{#URL_ARTICLE{2}})]
-  <BOUCLE01(ARTICLES){id_article=2}>[(#CS_SOMMAIRE|sommaire_url{#URL_ARTICLE})]</BOUCLE01>

Notes techniques et astuces

-  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 à l’étoile pour ajouter un de vos filtres par exemple, alors il faut écrire dans une boucle ARTICLES : [(#TEXTE*|mon_filtre|cs_traitements{TEXTE,articles})] à la place de [(#TEXTE)]. Explication : l’étoile de la balise empêche tout traitement SPIP et renvoie le texte brut stocké en base de données, le filtre |mon_filtre est votre fonction perso écrite dans le fichier mes_fonctions.php, puis le filtre |cs_traitement du Couteau Suisse rétablit les traitements originaux de SPIP correspondant à la balise #TEXTE et aux objets articles.

-  Si une balise n’est pas couverte par le traitement du sommaire automatique, alors utilisez le filtre |sommaire_d_article.
Exemple : [(#MA_BALISE|sommaire_d_article)].
Cette méthode est également applicable à une inclusion.
Exemple : [(#INCLURE{fond=mon-fond, id_article, env}|sommaire_d_article)]
Notez que si la balise #CS_SOMMAIRE est active, le sommaire n’est pas inséré automatiquement au texte examiné. Veuillez consulter le paragraphe suivant pour le paramétrage du filtre.

-  Paramétrage du filtre |sommaire_d_article (depuis la révision 61832 du Couteau Suisse) :
Un texte + son sommaire inséré si la balise #CS_SOMMAIRE est inactive :
   [(#UNTEXTE|sommaire_d_article)]
Un texte + son sommaire inséré quel que soit l’état de la balise #CS_SOMMAIRE :
   [(#UNTEXTE|sommaire_d_article{0})]
Le sommaire seul, calculé grâce au modèle fonds/sommaire.html :
   [(#UNTEXTE|sommaire_d_article{1})]
Le sommaire seul, sous forme de liste <li></li> :
   [(#UNTEXTE|sommaire_d_article{2})]

-  Comment faire pour éviter le sommaire automatique quelque part dans mon squelette ? Prenons par exemple la balise #TEXTE de la boucle (ARTICLES). Le code à utiliser est : [(#TEXTE*|concat{#EVAL{_CS_SANS_SOMMAIRE}}|cs_traitements{TEXTE,articles})]. Explication : l’étoile de la balise empêche tout traitement SPIP et renvoie le texte brut stocké en base de donnée, le filtre |concat ajoute au texte brut [!sommaire] pour empêcher la création future d’un sommaire, puis le filtre |cs_traitement du Couteau Suisse rétablit les traitements originaux de SPIP correspondant à la balise #TEXTE et aux objets articles. Si vous préférez restreindre le sommaire automatique à certaines rubriques, utilisez par exemple le test suivant : [(#ID_RUBRIQUE|match{'^(3|4|5)$'}|oui) placez votre balise #TEXTE étoilée et filtrée ici]

Correctif :  : Depuis la révision 43782 du Couteau Suisse, la notation précédente est caduque. Ceci :
[(#TEXTE*|concat{#EVAL{_CS_SANS_SOMMAIRE}}|cs_traitements{TEXTE,articles})]
doit être remplacé par cela :
[(#TEXTE*|cs_traitements{TEXTE,articles,sommaire_d_article})]

-  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;}.

-  Pour fixer la largeur et éviter les retours à la ligne : .cs_sommaire { width:10em; white-space:nowrap; }. Pour une hauteur fixe : div.cs_sommaire { height:16em; }. Etc, etc !

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

-  Si vous activez l’outil « Des blocs dépliables » et que vous définissez "h3" comme balise de titre, alors il est possible que le sommaire automatique prenne en compte les titres de vos blocs dépliables. Pour que ce ne soit pas le cas, configurez cet outil en spécifiant une valeur haute, exclue par le niveau de profondeur des intertitres. Exemple : h6.

Notes

[1Et s’il n’y a qu’un seul titre, pas besoin de sommaire, qui n’est donc pas affiché !

Dernière modification de cette page le 9 février 2019

Discussion

54 discussions

  • 3

    Salut Pat

    Est ce envisageable que la lame prenne en compte {{{-# }}} et {{{-## }}} ?

    • Salut. Tu veux dire en plus des intertitres ? Pourquoi tu voudrais qu’une liste apparaisse dans le sommaire ?

    • Slt

      L’idée c’est pou que dans un grand article comme http://www.economiedistributive.fr/article40 tu t’y retrouve facilement et que tu sache à quel chapitre tu en ai.

    • Là ton article me semble nickel avec les <h3> et <h4>, quoi demander de plus ? Des listes d’items n’ont pas tellement vocation à faire partie de la titraille à reprendre dans une table des matières selon moi...

    Répondre à ce message

  • 13

    Bonjour et super merci pour cette magnifique lame :-)))
    Grâce aux explications de cette page, j’ai réussi à bien personnaliser mon sommaire.

    J’aimerai maintenant aller plus loin en affichant les titres de niveau 1 en gras ou, encore mieux, en gras et en plus grand ; pour qu’ils se détachent mieux .

    J’ai testé divers trucs, sans succès.

    Quelqu’un pourrait-il m’aider ?

    • Pour avoir que le premier niveau en gras, ne serait-ce pas un truc du genre :

      .cs_sommaire_inner>ul>li>a {
      	font-weight: bold;
      }

      Tu peux manipuler tout ça avec le couple firefox/firebug...

    • Ça marche : merciiiii Pat !

      Donc, si ça peut servir à une autre personne qui souhaiterait que les titres de niv1 soient plus grands et en gras, j’ai indiqué :

      .cs_sommaire_inner>ul>li>a { 
              font-weight: bold;        
              font-size: 115%        
      }

      J’avais une autre question : même en lisant et relisant le paragraphe « Les liens de retour au sommaire », mon niveau en php est tellement nul que je ne sais pas ce qu’il faut écrire pour que les liens soient à la fin des intertitres plutôt qu’au début.

    • function sommaire_lien_retour_dist($self, $titre) {
        static $haut = NULL;
        if(!isset($haut)) 
          $haut = '<a title="'._T('couteau:sommaire_titre').'" href="'.$self.'#outil_sommaire" class="sommaire_ancre">&nbsp;</a>';
        return $titre. $haut;
      }
    • Bonjour ? et merci pour ta réponse.

      J’ai donc surchargé mon fichier /config/mes_options.php avec les lignes de code ci-dessus mais cela fait apparaître toutes les pages de mon site comme blanches.

      Par contre, quand j’essaie le code donné par Patrice pour ne pas avoir de liens de retour du tout, cela fonctionne.

    • Je me réponds à moi-même car j’ai trouvé la coquille (dist en trop dans la première ligne)

      function sommaire_lien_retour($self, $titre) {
        static $haut = NULL;
        if(!isset($haut)) 
          $haut = '<a title="'._T('couteau:sommaire_titre').'" href="'.$self.'#outil_sommaire" class="sommaire_ancre">&nbsp;</a>';
        return $titre . $haut;
      }

      Et maintenant, ça marche super, merci à tous :-)

    • Pour Stef plus spécialement :

      J’ai par coïncidence reconnu ton design du Sommaire sur ta page d’application pédagogique http://www.steph-en-bretagne.com/personnalisations-avancees/sommaire-du-couteau-suisse, page dont je me suis aussi inspiré.

      Puisque tu es arrivé à cela et que tu l’as détaillé, j’ai deux questions subsidiaires :

      — Comment faire en sorte que l’icone de “lien de retour au sommaire”, une fois placée à la fin des intertitres, soit séparée du dernier mot de l’intertitre par &nbsp; (et non pas collée au dernier mot de l’intertitre).

      — Comment faire précéder chaque item du Sommaire par &bull;&nbsp; (sans que ceci doive être saisi au début de chaque intertitre, bien sûr).

      Merci si tu as le temps.

    • Salut frdm,

      Malheureusement, mon niveau est trop bas pour que je sache te répondre (je ne sais même pas ce que signifie &bull et j’ai pas trouvé non plus sur Internet).

      Moi aussi je me suis demandé comment décoller l’icône de retour au sommaire mais j’ai pas osé revenir demander.

      Toutes ces lacunes m’ont amené à m’inscrire à une formation de dév informatique à l’AFPA, alors, j’aurai probablement la réponse d’ici mai :-D mais si d’autres pouvaient te répondre avant ce serait quand même plus rapide ... et je pourrai compléter mon article en plus :-)

      A+

    • Pour l’espace insécable, voici la fonction de surcharge. La modif est mineure :

      // Surchage de la lame "sommaire automatique" du couteau suisse 
      // Permet de placer les puces de retour au sommaire après les intertitres plutôt qu'avant
      function sommaire_lien_retour($self, $titre) {
        static $haut = NULL;
        if(!isset($haut)) 
          $haut = '<a title="'._T('couteau:sommaire_titre').'" href="'.$self.'#outil_sommaire" class="sommaire_ancre">&nbsp;</a>';
         return $titre . '&nbsp;' . $haut;
      }

      En ce qui concerne &bull; c’est à mon avis les li qu’il faut styler grâce aux CSS.

    • Peut-être essayer :

      div.cs_sommaire ul li {
      	list-style-type: disc;
      	margin-left: 1em;
      }

      Et si on veut les disques sur un seul niveau :

      div.cs_sommaire_inner>ul>li {
      	list-style-type: disc;
      	margin-left: 1em;
      }
    • Salut Pat,

      Ça marche :-) Je viens de tester ton code php pour décoller l’icône de retour au sommaire et c’est nickel. Un super merciiii !

      fdrm,

      Tu pourras essayer le code css et nous montrer ce que ça donne avant/après ? Une petite image explique souvent mieux que mille mots...

    • Merci Pat pour ces indications.

      Voici ci-après (image) ce que j’ai obtenu.

      Voici ci-dessous comment (je récapitule à partir des indications ci-dessus et consultées : des variantes et modifications plus poussées y figurent, mais ci-dessous je mentionne seulement ce qui m’a convenu comme résultat ; Stef a annoncé une récapitulation qui sera complétée ici).

      — Dans mes_options.php
      j’ai inséré :

      // Surchage de la lame "sommaire automatique" du couteau suisse 
      // Permet de placer les puces de retour au sommaire apres les intertitres plutot qu'avant (avec &nbsp;)
      function sommaire_lien_retour($self, $titre) {
        static $haut = NULL;
        if(!isset($haut)) 
          $haut = '<a title="'._T('couteau:sommaire_titre').'" href="'.$self.'#outil_sommaire" class="sommaire_ancre">&nbsp;</a>';
         return $titre . '&nbsp;' . $haut;
      }

      — Dans perso.css.html
      j’ai inséré :

      .cs_sommaire {
              margin-bottom:40px !important;
               width:100% !important;
       }
      div.cs_sommaire ul li {
      	list-style-type: disc !important;
      	margin-left: 1em !important;
      }
      .cs_sommaire_inner>ul>li>a {
              font-weight: bold; font-size: 105%;
              padding: 0 0 10px 0;
      }

      Il me reste à solliciter la bienveillance sur les trois points suivants :

      — Dans le Sommaire, je désire augmenter la taille des items de niveau 2 ; j’ai tâtonné mais je n"y arrive pas.

      — Je ne sais pas où placer l’image coin.gif modifiée pour surcharge (en l’occurrence, fond d’image #fafafc au lieu de blanc) : j’ai essayé dans squelettes/images/, dans squelettes/images/sommaire/, et encore d’autres essais, mais je n’ai pas trouvé l’emplacement efficace.

      — Je cherche à augmenter le nombre limite de caractères prévu dans le paramétrage de la lame, pour les items dans le Sommaire. S’agissant d’intertitres littéraires ou juridiques, il est normal qu’ils soient longs et explicites et se déploient sur deux lignes dans le sommaire (ce qui pose plus largement le problème de la gêne beaucoup plus considérable et là peu compréhensible s’agissant de présentation en “ligne unique” de la saisie des champs "Titre" [et “Surtitre” et “Soustitre”] des articles dans Spip, mais bon, vaste question…).

    • Pour Stef : &bull; c’est ceci :
      (“bull” pour “bullet” en anglais).

    • Ok, merci pour les explications et l’image frdm :-) J’ai mis à jour mes explications avec les nouveautés d’aujourd’hui, je repasserai sans doute la semaine prochaine si j’ai un peu de tps voir si ça a avancé.

    Répondre à ce message

  • Naldreys

    Bonjour,

    J’ai une petite question. J’utilise la lame Sommaire Automatique, quand et j’active a lame Ancre douce.
    Un phénomène bizarre s’exécute. En effet après avoir atteint l’ancre désiré, un retour systématique a la feuille sommaire.html du site s’effectue.

    Cette anomalie n’est t’elle pas liée à un conflit entre le nom de la feuille sommaire.html et la balise [sommaire] positionnée dans l’article dédie au sommaire automatique

    Comment réglé ce problème ?

    Merci d’avance.

    Répondre à ce message

  • Bonjour,

    Dès fois que cela puisse intéresser, j’ai modifié le comportement de la boite sommaire afin qu’elle devienne « draggable », ou déplaçable. J’ai surchargé le fichier fonds/sommaire.html et la css qui va avec. Il y a peut être plus propre à faire car le hack est un peu alambiqué.

    Le résultat est ici :
    Sans découpe : http://www.jp.guihard.net/spip.php?article133 ;
    Avec découpe : http://www.jp.guihard.net/spip.php?article130.

    Voici la modification faite en sommaire.html :

    //je court-circuite en surchargeant la fonction cs_sommaire_init()
    //de la lame sommaire automatique du couteau suisse
    //le but du jeu est de deplacer la boite, de recuperer 
    //l'event stop pour court-circuiter le changement de class 
    //de la barre de titre.
    //On initialise la variable $dragge &agrave; faux, puis on la met 
    //a vrai si draggage de la boite ce qui court-circuite 
    //le toggleClass via le .click( function)
    
    //j'initialise la variable $dragge a false. Cette variable 
    //recueille si la boite de sommaire a ete ou pas deplacee
    
    $dragge = false
    
    //surcharge de la fonction du CS
    function cs_sommaire_init() {
            //met la boite en draggable via son id outil_sommaire
            $("#outil_sommaire").draggable({ 
            // applique une opacite de 45 lors du draggage
               opacity: 0.45 ,
               scroll: false ,
               //met la variable dragge a vraie car vient d'etre deplace
               stop: function() {
            $dragge = true;
               }
       });
    
            jQuery(sommaire_sel, this)
            .cs_todo()
            .click( function(){
                    if (!$dragge){ 
                    jQuery(this).toggleClass('cs_sommaire_replie')
                    .next().toggleClass('cs_sommaire_invisible')
                    // annulation du clic
                    return false;
                    }else{
                    if($dragge){
                    $dragge = false;
                    }                
                    }
            });
    }

    Répondre à ce message

  • 2

    Bonjour.

    J’ai une petite qustion, peux être quelqun à déjà été confronté au problème ?
    J’utilise la baslie #CS_SOMMAIRE, dans un squelette inclu et la balise #TEXTE se trouve dans un autre squelette inclu.

    Le sommaire ne fonctionne plus alors qu’il fonctionnait très bien avant que je ne divise mon squelette article en 2.

    Y a t’il un moyen de le faire fonctionner malgré tout ?

    • Deux solutions (non testées) a priori, à condition de passer id_article dans ta noisette, non ?

      1. Une boucle ARTICLES : <BOUCLE01(ARTICLES){id_article=#ENV{id_article}}>#CS_SOMMAIRE</BOUCLE01>

      2. Hors boucle spécifique, un paramètre (version du CS >= 1.8.36.00) : #CS_SOMMAIRE{#ENV{id_article}}

      Je viens de modifier l’article pour expliquer mieux l’usage de cette balise.

    • Merci c’était effectivement cela. J’aurais du y penser.

    Répondre à ce message

  • 3

    Bonjour,

    J’utilise systématiquement la lame « Un sommaire pour vos articles » que je trouve excellente.

    Cependant je souhaite la rendre inopérante sur la page d’accueil du site où je fait apparaître un Edito et des articles, et là, malheureusement le sommaire apparait dans l’Edito et les articles !

    Comment faire en sorte que le sommaire apparaisse sur tous les articles du site mais pas sur la page « sommaire.html » ?

    Existe-t-il un balise à insérer pour neutraliser cette lame sur une page squelette donnée ?

    Cordialement

    FDG

    • Oui en rajoutant une * sur les balise #TEXTE de ton sommaire.

    • Oui Pierre, mais pour re-bénéficier des traitements de la balise #TEXTE :

      [(#TEXTE*|concat{#EVAL{_CS_SANS_SOMMAIRE}}|cs_traitements{TEXTE,articles})]

      Je viens de modifier l’article ci-dessus afin de parler de cette astuce. Le sommaire automatique est en effet ajouté à toutes les balises #TEXTE, sans aucune distinction de contexte...

    • Correctif :  : Depuis la révision 43782 du Couteau Suisse, la notation précédente est caduque. Ceci :
      [(#TEXTE*|concat{#EVAL{_CS_SANS_SOMMAIRE}}|cs_traitements{TEXTE,articles})]
      doit être remplacé par cela :
      [(#TEXTE*|cs_traitements{TEXTE,articles,sommaire_d_article})]

    Répondre à ce message

  • 3

    Bonjour et bravo à tous les programmeurs et les contributeurs.
    Je vous dois plus d’une fière chandelle et j’éprouve une certaine fierté à pouvoir réussir à comprendre un centième de ce que vous faites.
    Vous êtes vraiment impressionnants.

    J’ai une petite question et un petit exercice pour vous d’ailleurs :
    Voilà, pourrait-on faire en sorte que le sommaire une fois construit, suive le scrolling ? Comme ça, on n’aurait pas besoin de remonter à chaque fois ;.)
    un sommaire flottant en quelque sorte.

    Merci les gars (et les filles bien sur)

    • Bonsoir

      Effectivement ça pourrais être une bonne idée quand on a un article long.

      Je regarde si je trouve la solution et comment l’adapter dans la lame.

      Amicalement.

    • Oui, a priori c’est une question élémentaire de CSS... Google est ton ami !

      En ce qui concerne la boîte du sommaire, le sélecteur est : div.cs_sommaire. Tu peux donc configurer par exemple ta boîte avec la position fixed :

      div.cs_sommaire {
          position: fixed;
      }
    • Merci les gars (on attend les filles ;.)
      Pat, si tu peux me dire où placer le code, je vais essayer de mon coté. En bidouillant comme d’hab.
      Merci encore

    Répondre à ce message

  • 1

    Bonjour,

    Par défaut, le fait de mettre des intertitres dans un article génère un cadre sur la droite de l’article avec des liens pour une navigation rapide.
    Cette fonction est bien pratique.
    Mais est-ce possible de la désactiver dans certains cas ?
    Merci,
    Jean

    • Jean, je parie que si tu prends la peine de lire cet article, tu trouveras la réponse ;-)

    Répondre à ce message

  • 2

    Hello,

    ce sommaire automatique est SUPER !

    Mais :
    -  il n’est pas compatible avec le plugin inclure_ajaxload de Arno : les ancres du sommaire se mettent à pointer vers spip.php#nom-de-lancre (càd la page sommaire....)
    -  il n’est pas totalement compatible avec textwheel : j’avais testé il y a longtemps et constaté des problèmes d’apparence du sommaire, si je me souviens bien...

    Y aurait il moyen de pouvoir utiliser cette lame même sur un contenu chargé par inclure_ajaxload... http://plugins.spip.net/Inclure-Ajaxload ?

    • A noter un autre problème d’une lame du CS avec inclure_ajaxload : la lame ancres_douces provoque des trucs vraiment étranges : délais de réaction - parfois - de plusieurs secondes avant de scroller + impossibilité de scroller à nouveau pendant plusieurs secondes après avoir scrollé, etc, même pour des ancres « normales » codées html en dur (pas issues du sommaire auto donc). Ces problèmes disparaissent quand on désactive la lame ancre_douce : le javascript persiste induement longtemps à fixer la position !

    • par contre, les ancres_douces en plugin indépendant ne provoquent pas ce pb !

      Il semble qu’il y ait bien un truc du côté de leur intégration au couteaus suisse alors...

    Répondre à ce message

  • 2

    Bonjour,
    Grand bravo pour ce plugins, il fonctionne plutot bien mais lorsque je clique dans une rubrique du sommaire, celle-ci m’envoie bien sur la position mais qq secondes apres la page se recharger et m’envoie sur la page accueil.
    Pour voir :
    http://www.projet22.com/ovni-ufo/histoire/article/les-freres-horten-histoire-des

    Merci pour votre aide

    • Bonjour, c’est exact. Mais IE ne le fait pas... Est-ce dû aux ancres douces ?

    • Effectivement sous ie, ca marche correctement, c’est sous ff le probleme...

      Je viens de désactiver dans le couteau suisse : Ancres douces et cette fois-ci ca marche sous ff

      Merci....

    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