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

  • 1

    Bonjour,

    Tous nos remerciements, tout d’abord, pour ce plugin !

    J’ai paramétré le plugin dans le couteau suisse pour avoir le sommaire automatique.

    Problème : je rencontre un petit « effet de bord » avec le plugin « Envoyer l’article aux amis » :
    http://www.spip-contrib.net/Envoyer-l-article-aux-amiEs
    Le formulaire de ce plugin est fermé par défaut, ce n’est qu’en cliquant sur un lien « Envoyer par mail » qu’il va s’ouvrir.

    <div id="envoiamiMessage">#ENV{message}</div>
    <a href="javascript:void(0);" class="envoiamiBouton">Envoyer par mail</a>

    Or, bizarrement, dans le cas d’articles avec sommaire, ce formulaire apparait déjà ouvert...
    ex. http://tinyurl.com/28dlvgu
    Le problème se pose uniquement dans le cas des articles avec sommaire, et non pas dans le cas des articles sans sommaire, c’est donc bien un effet de bord du « sommaire automatique ».

    Auriez-vous une idée de l’origine du problème SVP ?

    UN GRAND MERCI D’AVANCE !

    • Je rencontre un autre petit « effet de bord » !

      Cette fois-ci avec le plugin : Freepaper (visionneuse PDF)
      http://www.spip-contrib.net/Le-plugin-FreepapeR-2-v0-9-0

      Dans mon squelette ARTICLE, entre le chapo et le texte, j’ai ceci :
      [(#FPP2STD{largeur=700}{hauteur=600}{trace=false})], c’est l’appel à cette visionneuse PDF

      Or, bizarrement, quand je place [!sommaire] dans le texte de mon article pour éviter l’affichage du sommaire automatique, eh bien la visionneuse PDF apparait ... bien qu’il n’y ait aucun PDF à l’intérieur ! (le sommaire n’apparait plus par contre, c’est déjà çà...)

      Bien entendu, cette visionneuse PDF n’apparait en principe que dans les cas où il y a des PDF, autrement elle n’a aucune raison d’apparaitre...

      MERCI POUR VOTRE AIDE :-)

    Répondre à ce message

  • MasterJuh

    Bonjour à tous,

    J’installe un site en SPIP 2.1.1 et ce plugin marche très bien excepté lorsqu’un article commence par un texte encadré

    [( mon paragraphe )]

    (code du plugin Enluminures typographiques pour SPIP 2 & Porte plume). Dans ce cas, la place pour le sommaire est bien créé dans le texte mais le sommaire n’apparaît pas.

    ça fonctionne par ailleurs avec une citation

    1. <quote></quote>

    en début d’article

    ça ne m’empêche pas de l’utiliser mais je remonte l’observation.

    Répondre à ce message

  • Hello Patrice,

    Comme tu le vois, toujours fidèle au poste d’utilisateur convaincu, beta testeur et feedbacker pénible à souhait, et là ca tombe bien, j’avais justement 2 ou 3 feedbacks à te soumettre :-D

    J’ai testé ces derniers temps, la version Standalone de cette fonctionnalité, le plugin Table des Matières qui, s’il ne va pas aussi loin que la lame dans l’affinage des réglages proposés — notament la profondeur ou le fait que la lame s’adapte parfaitement à une nomenclature de titre différente du h3.spip standard, ce qui n’est pas le cas du plugin — apporte cependant une base simplifiée et une certaine souplesse pour son intégration, qui n’est pas pour me déplaire et ferait gagner la lame en efficacité je pense.

    (Enfin... disons surtout que ça m’éviterait d’avoir à hacker le CS à chaque fois que je m’en sers, ce que je n’aime pas faire car c’est rarement évolutif un hack, surtout quand il est commis par quelqu’un qui comme moi, maitrise PHP avec 2 pieds gauche et la cervelle d’une moule de Mer du Nord :-D )

    On attaque :

    surcharges dans /fonds ???

    D’un point de vue « usages Spipiens » (si je puis dire...), le passage par le dossier /fonds me déroute un peu. Pas que je sois bêtement puriste (quoique, si un peu en fait :-D) mais j’ai du mal avec cette conception, car dans spip, historiquement, ce dossier sert avant tout à contenir le HTML que nos plugins injectent dans la partie privée. Du coup, le réflexe de créer un dossier /fonds dans son dossier squelettes n’est pas naturel, comparé à un dossier /inclure ou même, beaucoup mieux pour ce cas précis : un dossier /modeles qui aurait l’avantage de permettre je pense, plus de flexibilité sur l’utilisation finale de l’outil par l’ajout par exemple, de paramètres.

    On peut par exemple immaginer une composition d’article_a.html qui embarquerait un #MODELE{sommaire}{profondeur=2}{jolies_ancres=oui} et une composition article_b.html qui pour le coup embarquerait #MODELE{sommaire}{profondeur=1}{jolies_ancres=non}

    C’est une simple idée ;)

    Forcer le CSS+JS par défaut ???

    Une autre réflexion sur l’outil, lorsque intégré « out of the box » :

    Est-il vraiment nécessaire de livrer cet outil avec tout son CSS et Javascript ? Par expérience, le sommaire ne s’est jamais adapté du premier coup à la charte en vigueur sur le site, ce qui me semblerait pourtant un comportement par défaut plus logique, laissant malgré tout une class CSS disponible pour que l’intégrateur puisse y apporter les améliorations qu’il souhaite, en adaptant au besoin le modèle HTML d’origine.

    Idem pour le javascript de dépliage/repliage, que pour ma part je n’utilise jamais et supprime systématiquement de mon modèle HTML de sommaire et qui, en dehors d’ajouter dans nos head une dose de JS pas forcément souhaitable d’un point de vue performance, fait surtout un peu doublon avec l’outil déplier/replier, également dispo dans le CS et qu’on pourrait tout ç=à fait intégrer au besoin dans un modèle si vraiment on en avait envie non ?

    Disons que là, pour le coup, plus qu’un soucis technique, c’est une réflexion sur les usages les plus courants de l’outil que je cherche à initier. La majorité des utilisateurs souhaite t’elle un sommaire ne reprenant pas sa charte graphique par défaut et équipé d’un gadget pour le déplier replier ? Ou bien sont-ce là des besoins ponctuels, qui auraient été généralisés peut être un peu vite ?

    Ou sinon, si le concept du #MODELE paramétrable de tout à l’heure te parait intéressant, pourquoi ne pas conditionner également ces aspects là ? Ex : #MODELEsommairecss=oui|nonjs=oui|non

    chaque choix permettant, si ’non’ est choisis, de ne pas passer dans le tunnel d’ #INSERT_HEAD ce qui n’est pas réellement nécessaire à la page ?

    Liens retours vers sommaire

    Bon là j’avoue je pinaille :-D Mais je voulais savoir s’il était possible de faire en sorte que les liens de retour vers le sommaire soient éventuellement positionables ailleurs que dans le constituant le titre ? L’idéal étant même de pouvoir les positionner après le bloc de texte précédant le suivant :

    <hN>mon super titre</hN>
    
    mon super texte de la mort qui tue la vie qu'il est trop bien que je sais vachement bien écrire pour ne rien dire et remplir l'espace...
    
    et hop => lien retour ici
    
    <hN> mon super titre d'après</hN>

    Alors on me dirait, et ce serait vrai, qu’un coup de CSS devrait pouvoir gérer l’affaire mais d’un point de vue sémantique, c’est dans le HTML qu’il faudrait le repositionner, laissant ainsi au leur rôle de titre et non de conteneur à lien d’access.

    Peut être encore un super paramètre pour mon super #MODEL de tout à l’heure ?

    #MODELE{sommaire}{css=non}{js=non}{lien_retour=oui}{position_lien_retour=apres_titre|apres_texte}

    Mes 2 centimes et demi, et merci de m’avoir lu jusque là :-D

    Répondre à ce message

  • 8

    Merci pour l’introduction des ancres nommées !

    La ligne 8 de la fonction redéfinie est dans le texte ainsi :
     $a = preg_replace(',[^a-z0-9_]+,', '_', $a);
    mais ne devrait-ce pas plutôt être :
     $a = preg_replace(',[^a-zA-Z0-9_]+,', '_', $a);
    _ ?

    Par ailleurs, on complètera utilement par un
     $a = trim ($a, '_');

    • Avec strtolower() juste avant, à mon avis ce n’est pas nécessaire d’avoir A-Z

      Sinon, le trim() sur ’_’ est une bonne idée, je l’ajoute de suite !

    • Oui c’est vrai !
      Ok.

    • Finalement, je viens d’ajouter un paramêtre de configuration dans l’outil pour ces ancres. La fonction était un peu complexe, autant l’intégrer directement... Par défaut, on reste comme précédemment : outil_sommaire_NN.

    • Bon ben je vois que mon idée des fragments nommés a fait son chemin Coool :-)

      Par contre chez moi, depuis la mise à jour du plugin, j’ai un petit problème, très probablement en lien avec les enluminures typos du porteplume.

      Car dans mon site j’ai définis mes 6 niveau de titre, soit
      <hN class="hN">

      Et depuis la maj du plugin, tous mes se retrouvent désormais affublés d’une class h2 en plus, soit <hN class="hN h2"> d’où bugs à l’affichage et inter-titres qui se ressemblent tous.

      Je ne sais pas encore si c’est lié mais je continue mes recherches...

      En tout cas je me joins à Jean Luc pour les remerciements, cette modif apporte vraiment un GROS plus en terme de SEO, surtout depuis que Google savait lire et afficher dans ses résultats le contenus des liens internes d’où ma suggestion initiale pour textualiser un peu les fragments :-)

    • Merci pour ces retours. As-tu avancé sur cette histoire de classes ? As-tu un lien public du problème ?

      Tu as défini les classes avec CFG j’imagine... En fait, l’outil de découpe calle les classes des <hN> sur celles de SPIP et SPIP ne permet nativement de définir uniquement h3. Du coup, si la classe principale de <h3> est « h3 », tous les titres hN seront également « h3 ».. J’imagine qu’avec les CSS, ya pas vraiment besoin d’avoir des classes différentes « hN » sur chaque balise <hN>... Enfin, si j’ai bien compris ce que tu disais...

    • Bon, j’ai déposé une correction qui prend en compte les définitions de la btv3. En résumé, pour un titre h4 par exemple :

      • si la globale $debut_intertitre_2 (définie par CFG) existe, on la prend
      • sinon :
        • si la globale $debut_intertitre contient un h3, on la prend en remplaçant h3 par h4
        • sinon, on la prend telle quelle, annulant alors la hiérarchisation des sous-titres

      La dernière révision règle-t-elle ton problème ?

    • Tu as défini les classes avec CFG j’imagine... En fait, l’outil de découpe calle les classes des sur celles de SPIP et SPIP ne permet nativement de définir uniquement h3. Du coup, si la classe principale de <h3> est « h3 », tous les titres hN seront également « h3 »..

      Je suis passé par CFG oui. Sachant que de base, chez moi je modifie le {{{titre}}} pour qu’il me renvoit un h2 et non un h3.spip d’où le fait que les class h3 qui auraient du selon ta théorie se rajouter, aient été remplacée par des class h2 probablement...

      J’imagine qu’avec les CSS, ya pas vraiment besoin d’avoir des classes différentes « hN » sur chaque balise ... Enfin, si j’ai bien compris ce que tu disais...

      Ben disons que dans une démarche globale d’intégration web, c’est extrèmement puissant. C’est une méthode basée sur le travail de Nicole Sullivan et dite du « CSS Orienté Objet ». Depuis que j’applique je dois dire que d’une :

      • mes feuilles de styles sont beaucoup moins bordéliques
      • je gagne en temps sur chaque intégration, c’est un bonheur.
    • Ouep ! Tout est revenu à la normale. Merci beaucoup :)

    Répondre à ce message

  • 1

    Bonjour,
    Est possible que le sommaire affiche plusieurs niveaux de titre

    comme dans wikipédia ?

    Répondre à ce message

  • 4

    Bonjour

    est-il possible de n’afficher que X entrées dans le sommaire ? Le but serait d’avoir une hauteur fixe pour ce sommaire et disposer d’un ascenseur si les entrées sont plus nombreuses...
    Merci pour ton retour.

    • C’est possible de le faire en CSS, non ?

      div.cs_sommaire {
        height:16em;
      }
    • Ca marche comme prévu !

      Par contre, en relisant le sujet (dont j’ai vu que tu avais ajouté les exemples, bravo), j’avais compris que le fichier mon_squelette/outils/sommaire.css.html viendrait « en plus » de celui présent dans le plugin.
      J’avais donc ajouté seuklement le « height » dans le fichier présent dans mon dossier mon_squelette.
      Mais a priori, non, il faut que tous les styles soient dans le fichier dans mon_squelette, dès lors celui du plugin est ignoré.

    • Exact. Il s’agit d’une surcharge. l’exemple que je donne peut être placé dans n’importe quel autre fichier CSS de ton squelette...

    • En fait, j’utilise le squelette AHUNSTIC et je n’avais pas vu que celui-ci surchargeais déjà la largeur du sommaire.

      Tout marche. Merci.

    Répondre à ce message

  • 1

    J’ai vu qu’on pouvait changer le nombre de caratères pris en compte pour chaque titre par contre j’aimerais beaucoup savoir comment changer la largeur du sommaire pour éviter les retours à la ligne.

    Merci d’avance.
    ==
    Laurent

    • C’est possible de le faire en CSS, non ?

      div.cs_sommaire {
        width:10em;
        white-space:nowrap;
      }

    Répondre à ce message

  • 1

    bonjour,

    petite question : Où peut on modifier la position du lien qui est ajouté dans les intertitres vers le sommaire ?
    En effet, je voudrais qu’il soit à la fin de mon intertitre plutôt qu’au début.

    • Salut, je viens d’ajouter au plugin la possibilité de modifier ce comportement. Je te laisse le soin de le découvrir dans l’article ci-dessus !

    Répondre à ce message

  • @ Patrice Vanneufville

    La cerise sur le gâteau.
    J’ai installé la MàJ.
    Les points d’interrogation sont bien apparus comme prévu, après avoir fait un petit tour par la page … ?exec=admin_couteau_suisse, pour recompiler.

    J’ai longtemps hésité à installer ce plugin qui me semblait un peu usine à gaz, mais à l’usage je ne regrette pas. La désactivation du cache me fait gagner beaucoup de temps en développement. Je vais maintenant explorer le reste des fonctions…

    Merci.

    Répondre à ce message

  • 1

    SAV ouvert le dimanche !

    On se sent de suite moins seul.

    Non, je n’utilise pas la découpe en page.
    Je veux juste faire la liste des questions qui renvoie vers les réponses plus bas.
    J’aurai pu le faire avec des blocs dépliables, mais pour ça il faut faire un squelette en plus, tandis que là une simple balise dans la rédaction quand le besoin s’en fait sentir, et le tour est joué ! (il faut quand même un peu jouer avec les css… mais on n’a rien sans rien !)
    Merci, je vais télécharger la nouvelle version et je fidebaque.

    Il faut peut-être attendre la prochaine mise à jour de Spip-zone ?
    Je crois que c’est toute les heures ?

    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