DokuWiki

It's better when it's simple

Outils pour utilisateurs

Outils du site


Panneau latéral

Traductions de cette page?:

Découvrir DokuWiki

Options avancées

Pour les entreprises

Notre Communautée


Suivez-nous sur Facebook, Twitter et les autres résaux sociaux.

Notre politique de confidentialité

fr:tips:table_des_matieres_repliee_par_defaut

Table des matières repliée par défaut

Par défaut, lorsque l'on arrive sur une page de DokuWiki, la table des matières est dépliée. Nous allons voir comment inverser ce comportement : le contenu de la table des matières sera alors invisible au chargement de la page et c'est l'utilisateur qui devra cliquer sur l'entête de la table des matières pour afficher son contenu.

Méthode standard

Cette astuce est directement repiquée du thème Typo de Michael Klier.

1) Dans le répertoire de configuration de DokuWiki1), créez un fichier userscript.js contenant ceci :

addInitEvent(function() {
  var toc = $('toc__inside');
  if(toc) {
    toc.style.display   = 'none';
  }
});

Alternativement, vous pouvez aussi mettre ce code dans le fichier script.js du répertoire de votre thème.

2) Videz le cache manuellement ou attendez qu'il expire automatiquement pour voir le résultat.

Autre méthode (non-recommandée)

1. Modification CSS

  1. Dans le fichier CSS du template, chercher
    div.dokuwiki #toc__inside {
    	border: 1px solid __border__;
    	background-color: __background__;
    	text-align: left;
    	padding: 0.5em 0 0.7em 0;
    	}
  2. Ajouter display:none; à la fin pour obtenir
    div.dokuwiki #toc__inside {
    	border: 1px solid __border__;
    	background-color: __background__;
    	text-align: left;
    	padding: 0.5em 0 0.7em 0;
    	display:none;
    	}

2. Modification JavaScript

  1. Ouvrir le fichier lib/scripts/script.js
  2. Chercher
    /**
     * Adds the toggle switch to the TOC
     */
    function addTocToggle() {
        if(!document.getElementById) return;
        var header = $('toc__header');
        if(!header) return;
     
        var obj          = document.createElement('span');
        obj.id           = 'toc__toggle';
        obj.innerHTML    = '<span>&minus;</span>';
        obj.className    = 'toc_close';
        obj.style.cursor = 'pointer';
     
        prependChild(header,obj);
        obj.parentNode.onclick = toggleToc;
        try {
           obj.parentNode.style.cursor = 'pointer';
           obj.parentNode.style.cursor = 'hand';
        }catch(e){}
    }
     
     
    /**
     * This toggles the visibility of the Table of Contents
     */
    function toggleToc() {
      var toc = $('toc__inside');
      var obj = $('toc__toggle');
      if(toc.style.display == 'none') {
        toc.style.display   = '';
        obj.innerHTML       = '<span>&minus;</span>';
        obj.className       = 'toc_close';
      } else {
        toc.style.display   = 'none';
        obj.innerHTML       = '<span>+</span>';
        obj.className       = 'toc_open';
      }
    }
  3. Remplacer par ceci :
    /**
     * Adds the toggle switch to the TOC
     */
    function addTocToggle() {
        if(!document.getElementById) return;
        var header = $('toc__header');
        if(!header) return;
     
        var obj          = document.createElement('span');
        obj.id           = 'toc__toggle';
        obj.innerHTML    = '<span>&minus;</span>';
        obj.className    = 'toc_open';
        obj.style.cursor = 'pointer';
     
        prependChild(header,obj);
        obj.parentNode.onclick = toggleToc;
        try {
           obj.parentNode.style.cursor = 'pointer';
           obj.parentNode.style.cursor = 'hand';
        }catch(e){}
    }
     
    /**
     * This toggles the visibility of the Table of Contents
     */
    function toggleToc() {
      var toc = $('toc__inside');
      var obj = $('toc__toggle');
      if(toc.style.display == 'block') {
        toc.style.display   = '';
        obj.innerHTML       = '<span>&minus;</span>';
        obj.className       = 'toc_open';
      } else {
        toc.style.display   = 'block';
        obj.innerHTML       = '<span>+</span>';
        obj.className       = 'toc_close';
      }
    }

Laynee 2008/08/13 15:43

Replier la table des matières sur certaines pages seulement

:!: Cette méthode n'est pas compatible avec les greffons qui génèrent autre chose que du html (par exemple le greffon odt)

Créer ou éditer le fichier entities.local.conf dans le répertoire de configuration de dokuwiki2) et mettre le code suivant dedans. Attention, tout doit tenir sur une seule ligne

  • code pour les versions de DokuWiki plus anciennes que 2011-11-10 (Angua)
    ~~closetoc~~ <script language="javascript" type="text/javascript">addInitEvent(function(t){if(t=$('toc__inside'))t.style.display='none';});</script>
  • code pour les versions de DokuWiki à partir de 2011-11-10 (Angua)
    ~~closetoc~~ <script language="javascript" type="text/javascript">jQuery(function(){jQuery('div\x23toc__header').click();});</script> 

Ensuite, il suffit d'écrire ~~closetoc~~ dans une page pour que celle ci apparaisse avec une table des matières initialement repliée.

schplurtzschplurtz

2011/06/25 12:56


Ce sujet est-il toujours à jour ? La modification simple dans userscript.js ne fonctionne pas.

— karibou 2013/12/30 23:22

1) , 2)
celui qui contient local.php, acl.auth.php, dokuwiki.php, entities.conf etc…
fr/tips/table_des_matieres_repliee_par_defaut.txt · Dernière modification: 2015-05-09 23:18 par ach