Table des Matières

▼ Table des matières

Action TOC ou Table Of Contents

L'action toc permet de récupérer tous les titres d'une page formatée en syntaxe Yeswiki. Tout usage de titres codifiés en HTML annule totalement la possibilité offerte par l'action toc. Il est donc nécessaire de faire un choix entre l'une ou l'autre des approches.

Il est nécessaire de veiller à ce que le nombre de signes = qui entourent chaque catégorie de titres (h1, h2, h3, h4, h5, h6) soit bien le même de chaque côté. Dans le cas où ce nombre ne serait pas respecté, l'action toc ne réagit pas correctement: le texte qui suit les signes = se retrouve empilé dans le titre. Ne cherchez pas plus loin le bug; vous avez simplement oublié un signe = .

Positionnement de la table des matières

Dans ses réglages par défaut, la TOC passe sur le texte de la page lors des ses mouvements d'ascenseur.
La logique CSS permet de passer outre cet inconvénient visuel et de personnaliser le comportement de la tables des matières.

Les règles CSS de la table des matières (classe toc) sont ainsi rédigées dans la feuille de style de base de yeswiki:

/* table des matieres */
.toc {
position:absolute;
right:0px;
}

li.toc1 {padding-left:0;}
li.toc2 {padding-left:10px;}
li.toc3 {padding-left:20px;}
li.toc4 {padding-left:30px;}
li.toc5 {padding-left:40px;}

.toc-menu {
max-height: 400px;
overflow: auto;
}

La toc est placée en positionnement absolu. Cela signifie que, quoiqu'il arrive, la toc restera toujours en place car sa position est déterminée par référence aux limites du conteneur, c'est à dire aux limites de la page (classe page du style global de base de yeswiki) dans laquelle l'action toc a été demandée.
La page occupant, par défaut, toute la largeur disponible dans le flux (le conteneur global de classe container-fluid) dans lequel elle défile, le texte qu'elle contient occupera lui même toute cette largeur et sera donc recouvert en partie par la toc.
La solution consiste donc à contraindre le contenu de la page de manière à ce qu'il ne s'étale pas sur toute la largeur et s'arrête au bord gauche de la toc.
Pour mener à bien cette contrainte, il faut utiliser un padding qui signifie une bourre en français... et, comme toute bourre, ce padding obligera donc le texte à rester bloqué en deça d'un espace qui permettra la libre circulation de la toc.
Lorsque la toc est positionné en absolu sur la droite de la page, il faut donc installer une bourre entre le bord droit de la page et le le bord droit du texte qu'elle contient.
En toute logique, si l'on veut alors que la toc puisse passer librement, il faut donc que cette bourre soit au moins d'une largeur égale à celle de la toc.
Si la toc est d'une largeur égale à 30% de la largeur totale du flux, la bourre aménagée sur la page devra donc être, elle-aussi, égale à au moins 30% de la largeur du flux.

Ceci entraîne les règles CSS suivantes :

.toc {
width:30%
}
.page {
padding-right:30% /*padding partant de la droite de la page*/
}

Cependant, l'énoncé des règles ne peut en rester là car ce padding droit infligé à la page doit être répercuté en négatif sur la largeur de la page car les paddings sont, en fait, des espaces ajoutés. La page et son padding feront que la page dépassera à droite du conteneur. Il faut donc rectifier ce comportement en diminuant de 30% la largeur de la page:

.page {
width:70%
padding-right:30% /*padding partant de la droite de la page*/
}

Ce qui donne, pour résumer les règles suivantes:

.toc {
width:30%
}
.page {
width:70%;
padding-right:30% /*padding partant de la droite de la page*/
}

Tout en gardant en tête le comportement global des paddings, les réglages basiques de la page peuvent être améliorés.
Afin que le texte ne commence pas exactement au bord de la page, il est envisageable d'introduire un padding à gauche (padding-left) de la page qui éloignera le texte.
Si ce padding-left est de 1%, il augmentera d'autant l'espace occupé par la page et l'on se retrouve dans le cas précédemment évoqué. Il faut donc rediminuer la largeur de la page:

.toc {
width:30%
}
.page {
width:69%;
padding-left:1%;
padding-right:30% /*padding partant de la droite de la page*/
}

Il est préférable d'éviter une modification de la feuille de style originale qui pourra être écrasée lors d'une mise à niveau ou d'une mise à jour de Yeswiki.
Deux solutions, au choix, permettent d'agir:

1. dans votre feuille de style personnalisée du répertoire /themes/nom_de_votre_theme/styles/votre_theme.css
Dans ce cas, vous avez choisi d'avoir une toc en permanence dans toutes les pages de votre wiki
2. dans la balise HTML style que vous placez en haut de chacune des pages du wiki où vous désirez obtenir une table des matières ainsi configurée:

""
<style>
.toc {
width:30%
}

.page {
width:69%;
padding-left:1%;
padding-right:30% /*padding partant de la droite de la page*/
}
</style>
""