Toc
Dernière modification : -
Utilisation
Modifications
index.php
suppression des CR
création des ancres
calcul de la toc
remplacement dans le template
template.html
Balise
style.css
Boite
En ligne
Demo
Todo
Permettre d'ajouter à la demande une Table des matières automatique.
Utilisation
La table des matière (toc pour Table Of Content) rassemble dans une boite et de manière hiérarchisée, l'ensemble des titres de votre page.
Pour inclure une toc dans une page, il vous suffit d'ajouter le terme TOC n'importe ou dans celle-ci. Je conseille quand même :
- en dernière ligne pour plus de clarté, cela n'influe pas sur son positionnement
- en 1ère ligne si vous voulez écrire TOC dans la page. Seule la 1ère occurrence sera effacée
Modifications
Voici les modifications à apporter à une version 2.21. Notez qu'a certains endroits il ne faut pas recopier directement le code mais enlever les espaces entre les accolades { et } et le terme TOC.
index.php
suppression des CR
Pour avoir un code HTML plus propre, je supprime les CR (\r) qui ajoutent des retours chariot dans les balises a. A priori cette modification n'est pas fondamentale. Ajouter au tout début des regex (juste avant le htmlentities) :
$CONTENT = str_replace("\r","",$CONTENT);
création des ancres
ligne 230 remplacer :
$CONTENT = preg_replace('/^!!!(.*)(\n)/Um', '<h1>$1</h1>$2', $CONTENT);
$CONTENT = preg_replace('/^!!(.*)(\n)/Um', '<h2>$1</h2>$2', $CONTENT);
$CONTENT = preg_replace('/^!(.*)(\n)/Um', '<h3>$1</h3>$2', $CONTENT);
par
$CONTENT = preg_replace('/^!!!(.*)$/Um', '<a name="$1"><h1>$1</h1></a>', $CONTENT);
$CONTENT = preg_replace('/^!!(.*)$/Um', '<a name="$1"><h2>$1</h2></a>', $CONTENT);
$CONTENT = preg_replace('/^!(.*)$/Um', '<a name="$1"><h3>$1</h3></a>', $CONTENT);
calcul de la toc
ligne 257 avant
$CONTENT = substr($CONTENT, 6, strlen($CONTENT) - 6);
ajouter :
// TOC
if (strpos($CONTENT,"TOC"))
{
$CONTENT = preg_replace("/TOC/Um","",$CONTENT,1);
$nbAncres = preg_match_all('/<a name="(.+)">(.+)<\/a>/Ums',$CONTENT,$matches_ancres);
//~ print "<pre>".htmlentities(var_dump($matches_ancres,TRUE))."</pre>"; //DBG
$toc = "<div id=toc>";
for ($i=0;$i<$nbAncres;$i++) $toc .= '<a href="#'.$matches_ancres[1][$i].'">'.$matches_ancres[2][$i].'</a> ';
$toc .= "</div>";
}
else
$toc = "";
remplacement dans le template
ligne 270 après
$html = preg_replace('/{ IP }/', $_SERVER['REMOTE_ADDR'], $html);
ajouter (sans les espaces)
$html = str_replace('{ TOC }', $toc, $html);
template.html
Balise
ligne 27 après :
<td id="mainContent" colspan="3">
ajouter (sans les espaces) :
{ TOC }
style.css
Boite
voici un exemple de boite flottante (comme sur ce site) :
/* Table Of Content */
#toc {
border: 1px dashed #11141A;
float:right;
padding-right: 2em;
}
#toc h1 {
font-size: 10px;
padding-left: .5em;
}
#toc h2 {
font-size: 9px;
padding-left: 1.5em;
}
#toc h3 {
font-size: 8px;
padding-left: 2em;
}
En ligne
- toc {
padding: .5em;
text-align: center;
word-spacing: .5em;
}
- toc h1 {
display:inline;
}
- toc h2 {
display:inline;
}
- toc h3 {
display:inline;
}
}}
Demo
Voir la page actuelle :) et TestToc
Todo
- ajouter une balise { { TOC } } dans le template → ok
- ajouter un marqueur dans le code de la page pour activer sur cette page → ok (TOC)
- modifier les titres pour inclure → ok
<a name="Titre"><h1>Titre</h1></a>
- détecter tous les a name → ok
- générer la toc
-
en ligne ? - en boite flottante ? → oui (en css)
- hiérarchisée ? → oui
-