table des matières (TOC)

2024-04-01 16:38:13 +02:00 · 2024-04-01 16:38:13 +02:00 · bc0e9ad644
parent 2b2ae2853c
commit bc0e9ad644
2 changed files with 158 additions and 40 deletions
--- a/README.md
+++ b/README.md
@ -148,7 +148,9 @@ Pour que le(s) auteur·ice·s puissent disposer d'une page personnel, en créant

 ## Table of content

-Info trouvées [sur ce site](https://cloudbytes.dev/snippets/add-a-table-of-contents-using-markdown-in-pelican). 
+- [Add a Table of Contents using Markdown in Pelican](https://cloudbytes.dev/snippets/add-a-table-of-contents-using-markdown-in-pelican). 
+- [Python Markdown - Table of Content](https://python-markdown.github.io/extensions/toc/)
+- [Pour en faire une variable utilisable dans les templates](https://github.com/getpelican-plugins/extract_toc) *à essayer un jour*.

 Ajouter au `pelicanconf.py`

@ -171,22 +173,45 @@ Ajouter dans les articles où il faut une TOC : `[TOC]`.
 Un début de custom css…

 ```css
+/* Expériences
+*/
+
+article {
+    display: grid;
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+article * {
+    grid-column: 1;
+}
+
 .toc {
-    /* Pour avoir une table des matières
-     * du contenu d'un article.
+    /* Pour la table des matières d'un article (ou d'une page).
    */
+    grid-column: 3;
    position: -webkit-sticky;
    position: sticky;
-    top: 10em;
+    top: 4em;
+    padding: 0em 1.5em;
    background-color: var(--primaire);
-    color: var(--fond);
-    max-width: 16em;
    float: right;
+    margin-left: 1em;
 }

 .toc ul {
-    padding-left: 1em;
+    padding-left: .5em;
 }
+
+.toc li::marker {
+    color: var(--deco);
+    content: unset;
+}
+
+.toc a {
+    color: var(--fond);
+}
+
 ```


@ -202,8 +227,8 @@ Un début de custom css…
 - [ ] Qu'il y ait une page `auteurs` même si il n'y en a qu'un seul, et donc prévoir qu'il y en ait plusieurs *(mais c'est pas pour moi)*.
 - [x] Que la structure du `output` reflète le plus possible la structure du `content`.
 - [ ] Une [404](https://docs.getpelican.com/en/latest/tips.html#custom-404-pages)
- [ ] Une table des matières pour les longs articles *(en tout cas, pas quand il n'y a qu'un ou deux « sous titres »)*
- [ ] Des ancres pour la TOC mais aussi pour avoir de quoi pointer vers un sous titre et pas toute la page pour partager un lien vers un sous titre de la page.
+- [x] Une table des matières pour les longs articles *(en tout cas, pas quand il n'y a qu'un ou deux « sous titres »)*
+- [x] Des ancres pour la TOC mais aussi pour avoir de quoi pointer vers un sous titre et pas toute la page pour partager un lien vers un sous titre de la page.
 - [x] Qu'il y ait un menu de pagination fonctionnel.

 ## Qu'est-ce que je devrais encore explorer ?
--- a/static/css/bidouille.css
+++ b/static/css/bidouille.css
@ -1,7 +1,9 @@
 /* Ceci est une feuille de style.
- * Elle est constituée de règles qui influenceront l'affichage de la page html.
+ *
+ * Elle est constituée de règles qui influencent l'affichage de la page html.
+ *
 * C'est la dernière que la page html charge (voir html > head).
- * Les règles qui la constitue seront dont les premières règles de la cascade.
+ * Les règles qui sont décrites dans le fichier actuel sont donc les premières règles de la cascade CSS.
 * CSS voulant dire en anglais Cascading Style Sheet(s), ou Feuilles de Style en Cascade.
 *
 * Ah oui ! Ceci est un commentaire.
@ -23,14 +25,14 @@
 */

 /* Jeu de couleur de base
- * Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
+* Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
 */
-:root {
-    --fond: #EEE;
-    --primaire: #222;
-    --liens: #fe1976;
-    --deco: #96D321;
-}
+ :root {
+     --fond: #EEE;
+     --primaire: #222;
+     --liens: #fe1976;
+     --deco: #96D321;
+    }
    
 /* Jeu de couleur de base mais inversé
 * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
@ -54,19 +56,19 @@

 /* Jeu de couleurs « Europe »
 * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
-:root {
-    --fond: white;
-    --primaire: #039;
+ :root {
+     --fond: white;
+     --primaire: #039;
    --liens: rgb(18, 116, 207);
    --deco: #FC0;
 }
 */

-
-
 /* Expériences
 */

+
+
 /* Pour « toute » la page.
 */
 html {
@ -201,14 +203,7 @@ header a.current::first-letter{
 /* Contenu principal
 */
 main {
-    margin-left: 2em;
-    margin-right: 2em;
-}
-
-main a:hover {
-    text-decoration: underline;
-    text-decoration-color: var(--deco);
-    color: unset;
+    margin-left: 2em ;
 }

 .pagination {
@ -254,12 +249,33 @@ hgroup a {

 /* un article ou une page
 */
+
+article h1 a {
+    visibility: hidden;
+}
+
+article h2 a, 
+article h3 a,
+article h4 a, 
+article h5 a,
+article h6 a  {
+    padding-left: .3em;
+}
+
+
 article p {
    padding-left: 1em;
    line-height: 1.5em;
-    
+    margin: .5em 0em;
 }

+article p a:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--deco);
+    color: unset;
+}
+
+
 article footer {
    text-align: center;
    font-size: smaller;
@ -271,37 +287,55 @@ article blockquote {
    margin: 1em;
 }

-/* tires coquets
+/* Perma-liens sur les titres et sous-tittres, sous forme de points médians colorés.
+ * Nécessite d'activer les fonctionnalités de Table des matières (TOC)
+ * au travers de la variable MARKDOWN dans le pelicanconf.py.
 */
 article h1 {
    font-size: xx-large;
 }

-article h2::after {
+article h2 a:after {
    content: " ··";
    color: var(--deco);
 }

-article h3::after {
+article h3 a:after {
    content: " ···";
    color: var(--deco);
 }

-article h4::after {
+article h4 a:after {
    content: " ··· ·";
    color: var(--deco);
 }

-article h5::after {
+article h5 a:after {
    content: " ··· ··";
    color: var(--deco);
 }

-article h6::after {
+article h6 a:after {
    content: " ··· ···";
    color: var(--deco);
 }

+article h2 a:hover:after,
+article h3 a:hover:after,
+article h4 a:hover:after,
+article h5 a:hover:after,
+article h6 a:hover:after {
+    color: var(--liens);
+}
+
+article h2 a:hover,
+article h3 a:hover,
+article h4 a:hover,
+article h5 a:hover,
+article h6 a:hover {
+    color: var(--deco);
+}
+

 /* listes à puces
 */
@ -409,6 +443,55 @@ article p code {
    line-height: 1em;
 }

+
+/* Pour la table des matières si [TOC] est utilisé dans un article ou une page.
+*/
+article {
+    /* 3fr = 3/4 de l'affichage pour le contenu de l'article ou de la page.
+     * 1fr = 1/4 de l'affichage pour la table des matière (ou une zone vide si elle n'est pas activée).
+    */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(75vw, 1fr));
+    padding-right: 2em;
+}
+
+article * {
+    /* Pour que tout les éléments SAUF la table des matières, se trouvent dans la première colone.
+    */
+    grid-column: 1;
+}
+
+.toc {
+    /* Pour la table des matières d'un article (ou d'une page).
+    */
+    grid-column: 2;
+    padding: 0em 1.5em;
+    background-color: var(--primaire);
+    margin-left: 2em;
+    margin-right: -2em; /* pour couvrir de couleur la marge du <main></main> */
+    grid-row: span 1000; /* un nombre arbitrairement grand */
+}
+
+.toc ul {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 4em;
+    padding-left: .5em;
+}
+
+.toc li::marker {
+    color: var(--deco);
+    content: unset;
+}
+
+.toc a {
+    color: var(--fond);
+}
+
+.toc a:hover {
+    color: var(--deco);
+}
+
 /* Pied de page
 */
 footer {
@ -430,8 +513,7 @@ footer a:hover {
 /* Pour ne pas imprimer le menu.
 */
@media print {   
-    header
-    {
+    header, .toc {
        display: none !important;
    }
 }
@ -491,4 +573,15 @@ footer a:hover {
        padding-right: 1.5em;
        font-size: 1em;
    }
+
+    .toc {
+        visibility: hidden;
+        height: 0em;
+    }
+
+    article {
+        display: block;
+        padding-right: unset;
+    }
+    
 }