Comment: | Use KD2\Markdown to generate HTML files, so that we don't depend on Paheko internal code |
---|---|
Downloads: | Tarball | ZIP archive | SQL archive |
Timelines: | family | ancestors | descendants | both | trunk |
Files: | files | file ages | folders |
SHA3-256: |
1df78679bef8f9a50021c6aa3e557c5f |
User & Date: | bohwaz on 2023-03-11 19:01:33 |
Other Links: | manifest | tags |
2023-03-11
| ||
19:14 | Add title to Markdown doc pages check-in: a70b4e7738 user: bohwaz tags: trunk | |
19:01 | Use KD2\Markdown to generate HTML files, so that we don't depend on Paheko internal code check-in: 1df78679be user: bohwaz tags: trunk | |
19:00 | Add link to documentation in website config check-in: 190b3263d7 user: bohwaz tags: trunk | |
Added src/www/admin/static/doc/brindille.html version [0ebcda8464].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/brindille.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><strong><a href="brindille.html">Documentation Brindille</a></strong></li> <li><a href="brindille_functions.html">Fonctions</a></li> <li><a href="brindille_sections.html">Sections</a></li> <li><a href="brindille_modifiers.html">Filtres</a></li> </ul> </div><aside class="toc"> <ol> <li><a href="#syntaxe-de-base">Syntaxe de base</a> <ol> <li><a href="#affichage-de-variable">Affichage de variable</a> <ol> <li><a href="#ordre-de-recherche-des-variables">Ordre de recherche des variables</a></li> <li><a href="#conflit-de-noms-de-variables">Conflit de noms de variables</a> </ol></li> <li><a href="#conditions">Conditions</a></li> <li><a href="#fonctions">Fonctions</a></li> <li><a href="#sections">Sections</a></li> <li><a href="#sections-literales">Sections litérales</a> <ol> <li><a href="#commentaires">Commentaires</a> </ol></li> <li><a href="#reference-des-variables-definies-par-defaut">Référence des variables définies par défaut</a> </li></ol></li></ol></aside><p>La syntaxe utilisée dans Paheko pour les squelettes du site web s'appelle <strong>Brindille</strong>. Si vous avez déjà fait de la programmation, elle ressemble à un mélange de Mustache, Smarty, Twig et PHP.</p> <p>Son but est de permettre une grande flexibilité, sans avoir à utiliser un "vrai" langage de programmation, mais en s'en rapprochant suffisamment quand même.</p> <h1 id="syntaxe-de-base">Syntaxe de base</h1> <h2 id="affichage-de-variable">Affichage de variable</h2> <p>Une variable est affichée à l'aide de la syntaxe : <code>{{$date}}</code> affichera la valeur brute de la date par exemple : <code>2020-01-31 16:32:00</code>.</p> <p>La variable peut être modifiée à l'aide de filtres de modification, qui sont ajoutés avec le symbole de la barre verticale (pipe <code>|</code>) : <code>{{$date|date_long}}</code> affichera une date au format long : <code>jeudi 7 mars 2021</code>.</p> <p>Ces filtres peuvent accepter des paramètres, séparés par deux points <code>:</code>. Exemple : <code>{{$date|date:"%d/%m/%Y"}}</code> affichera <code>31/01/2020</code>.</p> <p>Par défaut la variable sera recherchée dans le contexte actuel de la section, si elle n'est pas trouvée elle sera recherchée dans le contexte parent (section parente), etc. jusqu'à trouver la variable.</p> <p>Il est possible de faire référence à une variable d'un contexte particulier avec la notation à points : <code>{{$article.date}}</code>.</p> <p>Il existe deux variables de contexte spécifiques : <code>$_POST</code> et <code>$_GET</code> qui permettent d'accéder aux données envoyées dans un formulaire et dans les paramètres de la page.</p> <p>Par défaut le filtre <code>escape</code> est appliqué à toutes les variables pour protéger les variables contre les injections de code HTML. Ce filtre est appliqué en dernier, après les autres filtres. Il est possible de contourner cet automatisme en rajoutant le filtre <code>escape</code> ou <code>raw</code> explicitement. <code>raw</code> désactive tout échappement, mais <code>escape</code> est utilisé pour changer l'ordre d'échappement. Exemple :</p> <pre><code>{{:assign text = "Coucou ça va ?" }} {{$text|escape|nl2br}}</code></pre> <p>Donnera bien <code>Coucou<br />ça va ?</code>. Sans indiquer le filtre <code>escape</code> le résultat serait <code>Coucou&lt;br /&gt;ça va ?</code>.</p> <h3 id="ordre-de-recherche-des-variables">Ordre de recherche des variables</h3> <p>Par défaut les variables sont recherchées dans l'ordre inverse, c'est à dire que sont d'abord recherchées les variables avec le nom demandé dans la section courante. Si la variable n'existe pas dans la section courante, alors elle est recherchée dans la section parente, et ainsi de suite jusqu'à ce que la variable soit trouvée, où qu'il n'y ait plus de section parente.</p> <p>Prenons cet exemple :</p> <pre><code>{{#articles uri="Actualite"}} <h1>{{$title}}</h1> {{#images parent=$path limit=1}} <img src="{{$thumb_url}}" alt="{{$title}}" /> {{/images}} {{/articles}}</code></pre> <p>Dans la section <code>articles</code>, <code>$title</code> est une variable de l'article, donc la variable est celle de l'article.</p> <p>Dans la section <code>images</code>, les images n'ayant pas de titre, la variable sera celle de l'article de la section parente, alors que <code>$thumb_url</code> sera lié à l'image.</p> <h3 id="conflit-de-noms-de-variables">Conflit de noms de variables</h3> <p>Imaginons que nous voulions mettre un lien vers l'article sur l'image de l'exemple précédent :</p> <pre><code>{{#articles uri="Actualite"}} <h1>{{$title}}</h1> {{#images parent=$path limit=1}} <a href="{{$url}}"><img src="{{$thumb_url}}" alt="{{$title}}" /></a> {{/images}} {{/articles}}</code></pre> <p>Problème, ici <code>$url</code> fera référence à l'URL de l'image elle-même, et non pas l'URL de l'article.</p> <p>La solution est d'ajouter un point au début du nom de variable : <code>{{$.url}}</code>.</p> <p>Un point au début d'un nom de variable signifie que la variable est recherchée à partir de la section précédente. Il est possible d'utiliser plusieurs points, chaque point correspond à un niveau à remonter. Ainsi <code>$.url</code> cherchera la variable dans la section parente (et ses sections parentes si elle n'existe pas, etc.). De même, <code>$..url</code> cherchera dans la section parente de la section parente.</p> <h2 id="conditions">Conditions</h2> <p>Il est possible d'utiliser des conditions de type "si" (<code>if</code>), "sinon si" (<code>elseif</code>) et "sinon" (<code>else</code>). Celles-ci sont terminées par un block "fin si" (<code>/if</code>).</p> <pre><code>{{if $date|date:"%Y" > 2020}} La date est en 2020 {{elseif $article.status == 'draft'}} La page est un brouillon {{else}} Autre chose. {{/if}}</code></pre> <h2 id="fonctions">Fonctions</h2> <p>Une fonction va répondre à certains paramètres et renvoyer un résultat ou réaliser une action. Un bloc de fonction commence par le signe deux points <code>:</code> :</p> <pre><code>{{:http code=404}}</code></pre> <p>Contrairement aux autres types de blocs, et comme pour les variables, il n'y a pas de bloc fermant (avec un slash <code>/</code>).</p> <h2 id="sections">Sections</h2> <p>Une section est une partie de la page qui sera répétée une fois, plusieurs fois, ou zéro fois, selon ses paramètres et le résultat (c'est une "boucle"). Une section commence par un bloc avec un signe hash (<code>#</code>) et se termine par un bloc avec un slash (<code>/</code>).</p> <p>Un exemple simple avec une section qui n'aura qu'une seule répétition :</p> <pre><code>{{#categories uri=$_GET.uri}} <h1>{{$title}}</h1> {{/categories}}</code></pre> <p>Il est possible d'utiliser une condition <code>{{else}}</code> avant la fin du bloc pour avoir du contenu alternatif si la section ne se répète pas (dans ce cas si aucune catégorie ne correspond au critère).</p> <p>Un exemple de sous-section</p> <pre><code>{{#categories uri=$_GET.uri}} <h1>{{$title}}</h1> {{#articles parent=$path order="published DESC" limit="10"}} <h2><a href="{{$url}}">{{$title}}</a></h2> <p>{{$content|truncate:600:"..."}}</p> {{else}} <p>Aucun article trouvé.</p> {{/articles}} {{/categories}}</code></pre> <p>Voir la référence des sections pour voir quelles sont les sections possibles et quel est leur comportement.</p> <h2 id="sections-literales">Sections litérales</h2> <p>Pour qu'une partie du code ne soit pas interprété, pour éviter les conflits avec certaines syntaxes, il est possible d'utiliser un bloc <code>literal</code> :</p> <pre><code>{{literal}} <script> // Ceci ne sera pas interprété function test (a) {{ }} </script> {{/literal}}</code></pre> <h3 id="commentaires">Commentaires</h3> <p>Les commentaires sont figurés dans des blocs qui commencent et se terminent par une étoile (<code>*</code>) :</p> <pre><code>{{* Ceci est un commentaire Il sera supprimé du résultat final Il peut contenir du code qui ne sera pas interprété : {{if $test}} OK {{/if}} *}}</code></pre> <h2 id="reference-des-variables-definies-par-defaut">Référence des variables définies par défaut</h2> <p>Ces variables sont définies tout le temps :</p> <table> <thead> <tr> <th>Nom</th> <th>Contenu</th> </tr> </thead> <tbody> <tr> <td><code>$_GET</code></td> <td>Alias de la super-globale _GET de PHP.</td> </tr> <tr> <td><code>$_POST</code></td> <td>Alias de la super-globale _POST de PHP.</td> </tr> <tr> <td><code>$root_url</code></td> <td>Adresse racine du site web Paheko.</td> </tr> <tr> <td><code>$request_url</code></td> <td>Adresse de la page courante.</td> </tr> <tr> <td><code>$admin_url</code></td> <td>Adresse de la racine de l'administration Paheko.</td> </tr> <tr> <td><code>$visitor_lang</code></td> <td>Langue préférée du visiteur, sur 2 lettres (exemple : <code>fr</code>, <code>en</code>, etc.).</td> </tr> <tr> <td><code>$logged_user</code></td> <td>Informations sur le membre actuellement connecté dans l'administration (vide si non connecté).</td> </tr> <tr> <td><code>$config.org_name</code></td> <td>Nom de l'association</td> </tr> <tr> <td><code>$config.org_email</code></td> <td>Adresse e-mail de l'association</td> </tr> <tr> <td><code>$config.org_phone</code></td> <td>Numéro de téléphone de l'association</td> </tr> <tr> <td><code>$config.org_address</code></td> <td>Adresse postale de l'association</td> </tr> <tr> <td><code>$config.org_web</code></td> <td>Adresse du site web de l'association</td> </tr> <tr> <td><code>$config.files.logo</code></td> <td>Adresse du logo de l'association, si définit dans la personnalisation</td> </tr> <tr> <td><code>$config.files.favicon</code></td> <td>Adresse de l'icône de favoris de l'association, si définit dans la personnalisation</td> </tr> </tbody> </table></div></body></html> |
Added src/www/admin/static/doc/brindille_functions.html version [f910bdda8a].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/brindille_functions.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="brindille.html">Documentation Brindille</a></li> <li><strong><a href="brindille_functions.html">Fonctions</a></strong></li> <li><a href="brindille_sections.html">Sections</a></li> <li><a href="brindille_modifiers.html">Filtres</a></li> </ul> </div><aside class="toc"> <ol> <li><a href="#assign">assign</a></li> <li><a href="#debug">debug</a></li> <li><a href="#http">http</a></li> <li><a href="#include">include</a></li> <li><a href="#mail">mail</a> </li></ol></aside><h1 id="assign">assign</h1> <p>Permet d'assigner une valeur dans une variable :</p> <pre><code>{{:assign blabla="Coucou"}} {{$blabla}}</code></pre> <p>Attention : certains noms de variables ne sont pas assignables : <code>value</code> et <code>var</code> (voir ci-dessous).</p> <p>Il est possible d'assigner toutes les variables d'une section dans une variable en utilisant la syntaxe <code>.</code> et en inversant (<code>.="nom_de_variable"</code>). Cela permet de capturer le contenu d'une section pour le réutiliser à un autre endroit.</p> <pre><code>{{#pages uri="Informations" limit=1}} {{:assign .="infos"}} {{/pages}} {{$infos.title}}</code></pre> <p>En utilisant le paramètre spécial <code>var</code>, tous les autres paramètres passés sont ajoutés à la variable donnée en valeur :</p> <pre><code>{{:assign var="tableau" label="Coucou" name="Pif le chien"}} {{$tableau.label}} {{$tableau.name}}</code></pre> <p>De la même manière on peut écraser une variable avec le paramètre spécial <code>value</code>:</p> <pre><code>{{:assign var="tableau" value=$infos}}</code></pre> <p>Il est également possible de créer des tableaux avec la syntaxe <code>[]</code> dans le nom de la variable :</p> <pre><code>{{:assign var="liste[comptes][530]" label="Caisse"}} {{:assign var="liste[comptes][512]" label="Banque"}} {{#foreach from=$liste.comptes}} {{$key}} = {{$value.label}} {{/foreach}}</code></pre> <h1 id="debug">debug</h1> <p>Cette fonction permet d'afficher le contenu d'une ou plusieurs variables :</p> <pre><code>{{:debug test=$title}}</code></pre> <p>Affichera :</p> <pre><code>array(1) { ["test"] => string(6) "coucou" }</code></pre> <p>Si aucun paramètre n'est spécifié, alors toutes les variables définies sont renvoyées. Utile pour découvrir quelles sont les variables accessibles dans une section par exemple.</p> <h1 id="http">http</h1> <p>Permet de modifier les entêtes HTTP renvoyés par la page. Cette fonction doit être appelée au tout début du squelette, avant tout autre code ou ligne vide.</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>code</code></td> <td>Modifie le code HTTP renvoyé. <a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank" rel="nofollow,noreferrer">Liste des codes HTTP</a></td> </tr> <tr> <td><code>redirect</code></td> <td>Rediriger vers l'adresse URI indiquée en valeur. Seules les adresses internes sont acceptées, il n'est pas possible de rediriger vers une adresse extérieure.</td> </tr> <tr> <td><code>type</code></td> <td>Modifie le type MIME renvoyé</td> </tr> <tr> <td><code>download</code></td> <td>Force la page à être téléchargée sous le nom indiqué.</td> </tr> </tbody> </table> <p>Note : si le type <code>application/pdf</code> est indiqué, la page sera convertie en PDF à la volée. Il est possible de forcer le téléchargement du fichier en utilisant le paramètre <code>download</code>.</p> <p>Exemples :</p> <pre><code>{{:http code=404}} {{:http redirect="/Nos-Activites/"}} {{:http type="application/svg+xml"}} {{:http type="application/pdf" download="liste_membres_ca.pdf"}}</code></pre> <h1 id="include">include</h1> <p>Permet d'inclure un autre squelette.</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>file</code></td> <td>obligatoire</td> </tr> <tr> <td><code>keep</code></td> <td>optionnel</td> </tr> </tbody> </table> <pre><code>{{:include file="./navigation.html"}} => Affiche le contenu du squelette "navigation.html" dans le même répertoire que le squelette d'origine</code></pre> <p>Par défaut, les variables du squelette parent sont transmis au squelette inclus, mais les variables définies dans le squelette inclus ne sont pas transmises au squelette parent. Exemple :</p> <pre><code>{{* Squelette page.html *}} {{:assign title="Super titre !"}} {{:include file="./_head.html"}} {{$nav}}</code></pre> <pre><code>{{* Squelette _head.html *}} <h1>{{$title}}</h1> {{:assign nav="Accueil > %s"|args:$title}}</code></pre> <p>Dans ce cas, la dernière ligne du premier squelette (<code>{{$nav}}</code>) n'affichera rien, car la variable définie dans le second squelette n'en sortira pas. Pour indiquer qu'une variable doit être incluse dans le squelette parent, il faut utiliser le paramètre <code>keep</code>:</p> <pre><code>{{:include file="./_head.html" keep="nav"}}</code></pre> <p>On peut spécifier plusieurs noms de variables, séparés par des virgules, et utiliser la notation à points :</p> <pre><code>{{:include file="./_head.html" keep="nav,article.title,name"}} {{$nav}} {{$article.title}} {{$name}}</code></pre> <h1 id="mail">mail</h1> <p>Permet d'envoyer un e-mail à une adresse indiquée. Le message est toujours envoyé en format texte et l'expéditeur est l'adresse de l'association.</p> <p>Attention à l'utilisation de cette fonction il n'existe pas de limite d'envoi.</p> <p>Paramètres requis :</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>to</code></td> <td>Adresse email destinataire (seule l'adresse e-mail elle-même est acceptée, pas de nom)</td> </tr> <tr> <td><code>subject</code></td> <td>Sujet du message</td> </tr> <tr> <td><code>body</code></td> <td>Corps du message</td> </tr> </tbody> </table> <p>Exemple de formulaire de contact :</p> <pre><code>{{if !$_POST.email|check_email}} <p class="alert">L'adresse e-mail indiquée est invalide.</p> {{elseif $_POST.antispam != 42}} <p class="alert">La réponse permettant de savoir si vous êtes un robot a échoué. Vous êtes donc un robot ?</p> {{elseif $_POST.message|trim == ''}} <p class="alert">Le message est vide</p> {{elseif $_POST.send}} {{:mail to=$config.org_email subject="Formulaire de contact" body="%s a écrit : %s"|args:$_POST.email:$_POST.message}} <p class="ok">Votre message nous a bien été transmis !</p> {{/if}} <form method="post" action=""> <dl> <dt><label>Votre e-mail : <input type="email" required name="email" /></label></dt> <dt><label>Votre message : <textarea required name="message" cols="50" rows="5"></textarea></label></dt> <dt><label>Merci d'écrire "quarante-deux" en chiffres pour confirmer que vous n'êtes pas un robot : <input type="text" name="antispam" required /></label></dt> </dl> <p><input type="submit" name="send" value="Envoyer !" /></p> </form></code></pre></div></body></html> |
Added src/www/admin/static/doc/brindille_modifiers.html version [aa37faa69c].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/brindille_modifiers.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="brindille.html">Documentation Brindille</a></li> <li><a href="brindille_functions.html">Fonctions</a></li> <li><a href="brindille_sections.html">Sections</a></li> <li><strong><a href="brindille_modifiers.html">Filtres</a></strong></li> </ul> </div><aside class="toc"> <ol> <li><a href="#filtres-php">Filtres PHP</a></li> <li><a href="#filtres-de-texte">Filtres de texte</a> <ol> <li><a href="#truncate">truncate</a></li> <li><a href="#excerpt">excerpt</a></li> <li><a href="#protect_contact">protect_contact</a></li> <li><a href="#escape">escape</a></li> <li><a href="#xml_escape">xml_escape</a></li> <li><a href="#raw">raw</a></li> <li><a href="#args">args</a></li> <li><a href="#count">count</a></li> <li><a href="#cat">cat</a></li> <li><a href="#math">math</a></li> <li><a href="#replace">replace</a></li> <li><a href="#regexp_replace">regexp_replace</a></li> <li><a href="#size_in_bytes">size_in_bytes</a></li> <li><a href="#typo">typo</a></li> <li><a href="#money">money</a></li> <li><a href="#money_currency">money_currency</a></li> <li><a href="#remove_leading_number">remove_leading_number</a></li> <li><a href="#extract_leading_number">extract_leading_number</a></li> <li><a href="#check_email">check_email</a></li> <li><a href="#filtres-de-date">Filtres de date</a></li> <li><a href="#filtres-de-condition">Filtres de condition</a> </li></ol></li></ol></aside><h1 id="filtres-php">Filtres PHP</h1> <p>Ces filtres viennent directement de PHP et utilisent donc les mêmes paramètres :</p> <ul> <li>strtolower</li> <li>strtoupper</li> <li>ucfirst</li> <li>ucwords</li> <li>htmlentities</li> <li>htmlspecialchars</li> <li>trim, ltrim, rtrim</li> <li>lcfirst</li> <li>md5</li> <li>sha1</li> <li>metaphone</li> <li>soundex</li> <li>str_split</li> <li>str_word_count</li> <li>strrev</li> <li>strlen</li> <li>strip_tags</li> <li>nl2br</li> <li>wordwrap</li> <li>strlen</li> <li>abs</li> </ul> <h1 id="filtres-de-texte">Filtres de texte</h1> <h2 id="truncate">truncate</h2> <p>Arguments :</p> <ul> <li>nombre : longueur en nombre de caractères (défaut = 80)</li> <li>texte : texte à placer à la fin (si tronqué) (défaut = …)</li> <li>booléen : coupure stricte, si <code>true</code> alors un mot pourra être coupé en deux, sinon le texte sera coupé au dernier mot complet</li> </ul> <p>Tronque un texte à une longueur définie.</p> <h2 id="excerpt">excerpt</h2> <p>Produit un extrait d'un texte.</p> <p>Supprime les tags HTML, tronque au nombre de caractères indiqué en second argument (si rien n'est indiqué, alors 600 est utilisé), et englobe dans un paragraphe <code><p>...</p></code>.</p> <p>Équivalent de :</p> <pre><code><p>{{$html|strip_tags|truncate:600|nl2br}}</p></code></pre> <h2 id="protect_contact">protect_contact</h2> <p>Crée un lien protégé pour une adresse email, pour éviter que l'adresse ne soit recueillie par les robots spammeurs (empêche également le copier-coller et le lien ne fonctionnera pas avec javascript désactivé).</p> <h2 id="escape">escape</h2> <p>Échappe le contenu pour un usage dans un document HTML. Ce filtre est appliqué par défaut à tout ce qui est affiché (variables, etc.) sauf à utiliser le filtre <code>raw</code> (voir plus bas).</p> <h2 id="xml_escape">xml_escape</h2> <p>Échappe le contenu pour un usage dans un document XML.</p> <h2 id="raw">raw</h2> <p>Passer ce filtre désactive la protection automatique contre le HTML (échappement) dans le texte. À utiliser en connaissance de cause avec les contenus qui contiennent du HTML et sont déjà filtrés !</p> <pre><code>{{"<b>Test"}} = &lt;b&gt;Test {{"<b>Test"|raw}} = <b>Test</code></pre> <h2 id="args">args</h2> <p>Remplace des arguments dans le texte selon le schéma utilisé par <a href="https://www.php.net/sprintf" target="_blank" rel="nofollow,noreferrer">sprintf</a>.</p> <pre><code>{{"Il y a %d résultats dans la recherche sur le terme '%s'."|args:$results_count:$query}} = Il y a 5 résultat dans la recherche sur le terme 'test'.</code></pre> <h2 id="count">count</h2> <p>Compte le nombre d'entrées dans un tableau.</p> <pre><code>{{$products|count}} = 5</code></pre> <h2 id="cat">cat</h2> <p>Concaténer un texte avec un autre.</p> <pre><code>{{"Tangerine"|cat:" Dream"}} = Tangerine Dream</code></pre> <h2 id="math">math</h2> <p>Réalise un calcul mathématique. Cette fonction accepte :</p> <ul> <li>les nombres: <code>42</code>, <code>13,37</code>, <code>14.05</code></li> <li>les signes : <code>+ - / *</code> pour additionner, diminuer, diviser ou multiplier</li> <li>les parenthèses : <code>( )</code></li> <li>les fonctions : <code>round(0.5452, 2)</code> <code>ceil(29,09)</code> <code>floor(0.99)</code> mais aussi : min, max, cos, sin, tan, asin, acos, atan, sinh, cosh, tanh, exp, sqrt, abs, log, log10, et pi.</li> </ul> <p>Le résultat est renvoyé sous la forme d'un entier, ou d'un nombre flottant dont les décimales sont séparées par un point.</p> <pre><code>{{"1+1"|math}} = 2</code></pre> <p>Il est possible de donner d'autres arguments, de la même manière qu'avec <code>args</code> pour y inclure des données provenant de variables :</p> <pre><code>{{:assign age=42}} {{"1+%d"|math:$age}} = 43 {{:assign prix=39.99 tva=19.1}} {{"round(%f*%f, 2)"|math:$prix:$tva}} = 47.63</code></pre> <p>Il est aussi possible d'utiliser </p> <h2 id="replace">replace</h2> <p>Remplace des parties du texte par une autre partie.</p> <pre><code>{{"Tata yoyo"|replace:"yoyo":"yaya"}} = Tata yaya</code></pre> <h2 id="regexp_replace">regexp_replace</h2> <p>Remplace des valeurs en utilisant une expression rationnelles (regexp) (<a href="https://www.php.net/manual/fr/regexp.introduction.php" target="_blank" rel="nofollow,noreferrer">documentation PHP</a>).</p> <pre><code>{{"Tartagueule"|regexp_replace:"/ta/i":"tou"}} = tourtougueule</code></pre> <h2 id="size_in_bytes">size_in_bytes</h2> <p>Renvoie une taille en octets, Ko, Mo, ou Go à partir d'une taille en octets.</p> <pre><code>{{100|size_in_bytes}} = 100 o {{1500|size_in_bytes}} = 1,50 Ko {{1048576|size_in_bytes}} = 1 Mo</code></pre> <h2 id="typo">typo</h2> <p>Pour le français.</p> <p>Ajoute des espaces insécables (<code>&nbsp;</code>) devant ou derrière les ponctuations françaises (<code>« » ? ! :</code>).</p> <h2 id="money">money</h2> <p>Formatte une valeur de monnaie (exprimée avec les cents inclus : <code>1502</code> = 15,02) pour l'affichage :</p> <pre><code>{{$amount|money}} 15,02</code></pre> <h2 id="money_currency">money_currency</h2> <p>Formatte une valeur de monnaie en ajoutant la devise :</p> <pre><code>{{$amount|money_currency}} 15,02 €</code></pre> <h2 id="remove_leading_number">remove_leading_number</h2> <p>Supprime le numéro au début d'un titre.</p> <p>Cela permet de définir un ordre spécifique aux pages et catégories dans les listes.</p> <pre><code>{{"03. Beau titre"|remove_leading_number}} Beau titre</code></pre> <h2 id="extract_leading_number">extract_leading_number</h2> <p>Extrait le numéro du titre.</p> <h2 id="check_email">check_email</h2> <p>Permet de vérifier la validité d'une adresse email. Cette fonction vérifie la syntaxe de l'adresse mais aussi que le nom de domaine indiqué possède bien un enregistrement de type MX.</p> <p>Renvoie <code>true</code> si l'adresse est valide.</p> <pre><code>{{if !$_POST.email|check_email}} <p class="alert">L'adresse e-mail indiquée est invalide.</p> {{/if}}</code></pre> <h2 id="filtres-de-date">Filtres de date</h2> <ul> <li><code>date</code> : formatte une date selon un format spécifié (identique au <a href="https://www.php.net/manual/fr/datetime.format.php" target="_blank" rel="nofollow,noreferrer">format utilisé par PHP</a>). Si aucun format n'est utilisé, le défaut sera <code>d/m/Y à H:i</code>. (en français)</li> <li><code>strftime</code> : formatte une date selon un format spécifié, identique <a href="https://www.php.net/strftime" target="_blank" rel="nofollow,noreferrer">au format utilisé par la fonction strftime de PHP</a>. Un format doit obligatoirement être spécifié. En passant un code de langue en second paramètre, cette langue sera utilisée. Sont supportés le français (<code>fr</code>) et l'anglais (<code>en</code>). Le défaut est le français si aucune valeur n'est passée en second paramètre .</li> <li><code>relative_date</code> : renvoie une date relative à la date du jour : <code>aujourd'hui</code>, <code>hier</code>, <code>demain</code>, ou sinon <code>mardi 2 janvier</code> (si la date est de l'année en cours) ou <code>2 janvier 2021</code> (si la date est d'une autre année). En spécifiant <code>true</code> en second paramètre, l'heure sera ajoutée au format <code>14h34</code>.</li> <li><code>date_short</code> : date au format court : <code>d/m/Y</code>, en spécifiant <code>true</code> en second paramètre l'heure sera ajoutée : <code>à H\hi</code>.</li> <li><code>date_long</code> : date au format long : <code>lundi 2 janvier 2021</code>. En spécifiant <code>true</code> en second paramètre l'heure sera ajoutée : <code>à 20h42</code>.</li> <li><code>date_hour</code> : renvoie l'heure uniquement à partir d'une date : <code>20h00</code>. En passant <code>true</code> en second paramètre, les minutes seront omises si elles sont égales à zéro : <code>20h</code>.</li> <li><code>atom_date</code> : formatte une date au format ATOM : <code>Y-m-d\TH:i:sP</code></li> </ul> <h2 id="filtres-de-condition">Filtres de condition</h2> <p>Ces filtres renvoient <code>1</code> si la condition est remplie, ou <code>0</code> sinon. Ils peuvent être utilisés dans les conditions :</p> <pre><code>{{if $page.path|match:"/aide"}}Bienvenue dans l'aide !{{/if}}</code></pre> <ul> <li><code>match</code> renvoie <code>1</code> si le texte indiqué est trouvé (insensible à la casse)</li> <li><code>regexp_match</code>, idem mais avec une expression régulière (de type <code>/Bonjour|revoir/i</code>)</li> </ul></div></body></html> |
Added src/www/admin/static/doc/brindille_sections.html version [b19e9f930f].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/brindille_sections.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="brindille.html">Documentation Brindille</a></li> <li><a href="brindille_functions.html">Fonctions</a></li> <li><strong><a href="brindille_sections.html">Sections</a></strong></li> <li><a href="brindille_modifiers.html">Filtres</a></li> </ul> </div><aside class="toc"> <ol> <li><a href="#sections-generalistes">Sections généralistes</a> <ol> <li><a href="#foreach">foreach</a></li> <li><a href="#restrict">restrict</a> </ol></li> <li><a href="#sections-sql">Sections SQL</a> <ol> <li><a href="#sql">sql</a></li> <li><a href="#pages-articles-categories-heritent-de-sql">pages, articles, categories (héritent de sql)</a></li> <li><a href="#files-documents-images-heritent-de-sql">files, documents, images (héritent de sql)</a></li> <li><a href="#breadcrumbs">breadcrumbs</a> </li></ol></li></ol></aside><h1 id="sections-generalistes">Sections généralistes</h1> <h2 id="foreach">foreach</h2> <p>Permet d'itérer sur un tableau par exemple :</p> <pre><code>{{#foreach from=$variable key="key" item="value"}} {{$key}} = {{$value}} {{/foreach}}</code></pre> <h2 id="restrict">restrict</h2> <p>Permet de limiter (restreindre) une partie de la page aux membres qui sont connectés et/ou qui ont certains droits.</p> <p>Deux paramètres optionnels peuvent être utilisés ensemble (il n'est pas possible d'utiliser seulement un des deux) :</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>level</code></td> <td>Niveau d'accès : read, write, admin</td> </tr> <tr> <td><code>section</code></td> <td>Section où le niveau d'accès doit s'appliquer : users, accounting, web, documents, config</td> </tr> </tbody> </table> <pre><code>{{#restrict}} Un membre est connecté, mais on ne sait pas avec quels droits. {{else}} Aucun membre n'est connecté. {{/restrict}}</code></pre> <pre><code>{{#restrict section="users" level="admin"}} Un membre est connecté, et il a le droit d'administrer les membres. {{else}} Aucun membre n'est connecté, ou un membre est connecté mais n'est pas administrateur des membres. {{/if}}</code></pre> <pre><code>{{#restrict block=true section="accounting" level="write"}} {{/restrict}} Si le membre n'est pas connecté ou n'a pas le droit de modifier la compta, il aura une page d'erreur.</code></pre> <h1 id="sections-sql">Sections SQL</h1> <p>Dans toutes les sections héritées de <code>sql</code> suivantes il est possible d'utiliser les paramètres suivants :</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>where</code></td> <td>Condition de sélection des résultats</td> </tr> <tr> <td><code>begin</code></td> <td>Début des résultats, si vide une valeur de <code>0</code> sera utilisée.</td> </tr> <tr> <td><code>limit</code></td> <td>Limitation des résultats. Si vide, une valeur de <code>1000</code> sera utilisée.</td> </tr> <tr> <td><code>order</code></td> <td>Ordre de tri des résultats. Si vide le tri sera fait par ordre d'ajout dans la base de données.</td> </tr> <tr> <td><code>debug</code></td> <td>Si ce paramètre existe, la requête SQL exécutée sera affichée avant le début de la boucle.</td> </tr> </tbody> </table> <p>Il est également possible de passer des arguments dans les paramètres à l'aides des arguments nommés qui commencent par deux points <code>:</code> : <code>{{#articles where="title = :montitre" :montitre="Actualité"}}</code></p> <h2 id="sql">sql</h2> <p>Effectue une requête SQL de type <code>SELECT</code> dans la base de données.</p> <pre><code>{{#sql select="*, julianday(date) AS day" tables="membres" where="id_categorie = :id_categorie" :id_categorie=$_GET.id_categorie order="numero DESC" begin=":page*100" limit=100 :page=$_GET.page}} … {{/sql}}</code></pre> <h3 id="parametres-possibles">Paramètres possibles</h3> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>tables</code></td> <td>Liste des tables à utiliser dans la requête. Ce paramètre est obligatoire.</td> </tr> <tr> <td><code>select</code></td> <td>Liste des colonnes à sélectionner, si non spécifié, toutes les colonnes (<code>*</code>) seront sélectionnées</td> </tr> <tr> <td><code>group</code></td> <td>Contenu de la clause <code>GROUP BY</code></td> </tr> </tbody> </table> <h2 id="pages-articles-categories-heritent-de-sql">pages, articles, categories (héritent de sql)</h2> <ul> <li><code>pages</code> renvoie une liste de pages, qu'elles soient des articles ou des catégories</li> <li><code>categories</code> ne renvoie que des catégories</li> <li><code>articles</code> ne renvoie que des articles</li> </ul> <p>À part cela les trois types de section se comportent de manière identique</p> <h3 id="parametres-possibles">Paramètres possibles</h3> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>search</code></td> <td>Renseigner ce paramètre avec un terme à rechercher dans le texte ou le titre. Dans ce cas par défaut le tri des résultats se fait sur la pertinence, sauf si le paramètre <code>order</code> est spécifié. Dans ce cas une variable <code>$snippet</code> sera disponible à l'intérieur de la boucle, contenant les termes trouvés.</td> </tr> <tr> <td><code>future</code></td> <td>Renseigner ce paramètre à <code>false</code> pour que les articles dont la date est dans le futur n'apparaissent pas, <code>true</code> pour ne renvoyer QUE les articles dans le futur, et <code>null</code> (ou ne pas utiliser ce paramètre) pour que tous les articles, passés et futur, apparaissent.</td> </tr> <tr> <td><code>parent</code></td> <td>Indiquer ici le chemin d'article ou de catégorie parente. Utile pour renvoyer par exemple la liste des articles d'une catégorie.</td> </tr> </tbody> </table> <h2 id="files-documents-images-heritent-de-sql">files, documents, images (héritent de sql)</h2> <ul> <li><code>files</code> renvoie une liste de fichiers</li> <li><code>documents</code> renvoie une liste de fichiers qui ne sont pas des images</li> <li><code>images</code> renvoie une liste de fichiers qui sont des images</li> </ul> <p>À part cela les trois types de section se comportent de manière identique</p> <p>Note : seul les fichiers de la section site web sont accessibles, les fichiers de membres, de comptabilité, etc. ne sont pas disponibles.</p> <h3 id="parametres-possibles">Paramètres possibles</h3> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>parent</code> (obligatoire)</td> <td>Chemin (adresse unique) de l'article ou catégorie parente dont ont veut lister les fichiers</td> </tr> <tr> <td><code>except_in_text</code></td> <td>passer <code>true</code> à ce paramètre , et seuls les fichiers qui ne sont pas liés dans le texte de la page seront renvoyés</td> </tr> </tbody> </table> <h2 id="breadcrumbs">breadcrumbs</h2> <p>Permet de récupérer la liste des pages parentes d'une page afin de constituer un <a href="https://fr.wikipedia.org/wiki/Fil_d'Ariane_(ergonomie)" target="_blank" rel="nofollow,noreferrer">fil d'ariane</a> permettant de remonter dans l'arborescence du site</p> <p>Un seul paramètre est possible :</p> <table> <thead> <tr> <th>Paramètre</th> <th>Fonction</th> </tr> </thead> <tbody> <tr> <td><code>path</code> (obligatoire)</td> <td>Chemin (adresse unique) de la page parente</td> </tr> </tbody> </table> <p>Chaque itération renverra trois variables :</p> <table> <thead> <tr> <th>Variable</th> <th>Contenu</th> </tr> </thead> <tbody> <tr> <td><code>$title</code></td> <td>Titre de la page ou catégorie</td> </tr> <tr> <td><code>$url</code></td> <td>Adresse HTTP de la page ou catégorie</td> </tr> <tr> <td><code>$path</code></td> <td>Chemin (adresse unique) de la page ou catégorie</td> </tr> </tbody> </table> <h3 id="exemple">Exemple</h3> <pre><code>{{#breadcrumbs path=$page.path}} &rarr; <a href="{{ $url }}">{{ $title }}</a><br /> {{/breadcrumbs}}</code></pre></div></body></html> |
Deleted src/www/admin/static/doc/extensions.html version [2410759427].
|
| < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < |
Modified src/www/admin/static/doc/keyboard.html from [96dc292307] to [b80e4ec015].
1 2 3 | <!DOCTYPE html> <html> <head> | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | > > > > > > | | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/keyboard.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><strong><a href="keyboard.html">Raccourcis claviers</a></strong></li> <li><a href="markdown.html">Syntaxe MarkDown complète</a></li> <li><a href="markdown_quickref.html">Référence rapide MarkDown</a></li> </ul> </div> <h1 id="raccourcis-clavier">Raccourcis clavier</h1> <p>Depuis l'édition du texte :</p> <table> <thead> <tr> <th style="text-align: left;">Raccourci</th> <th style="text-align: left;">Action</th> </tr> </thead> |
︙ | ︙ | |||
65 66 67 68 69 70 71 | </tr> <tr> <td style="text-align: left;"><kbd>Echap</kbd></td> <td style="text-align: left;">Prévisualiser (rappuyer pour revenir à l'édition)</td> </tr> </tbody> </table> | | | 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | </tr> <tr> <td style="text-align: left;"><kbd>Echap</kbd></td> <td style="text-align: left;">Prévisualiser (rappuyer pour revenir à l'édition)</td> </tr> </tbody> </table> <p>Depuis l'aide, la prévisualisation ou l'insertion de fichier :</p> <table> <thead> <tr> <th style="text-align: left;">Raccourci</th> <th style="text-align: left;">Action</th> </tr> </thead> |
︙ | ︙ |
Modified src/www/admin/static/doc/markdown.html from [feb78f3d43] to [b5fccbb97a].
1 2 3 | <!DOCTYPE html> <html> <head> | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | > > > > > > > < < < < < < > > > > > > > > > > > > | | | | | | > > > > > > | | | | | | | | | | | | | | > > > > > > > > > > > > > > > > > > > > > | | | | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/markdown.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="keyboard.html">Raccourcis claviers</a></li> <li><strong><a href="markdown.html">Syntaxe MarkDown complète</a></strong></li> <li><a href="markdown_quickref.html">Référence rapide MarkDown</a></li> </ul> </div><aside class="toc"> <ol> <li><a href="#syntaxe-markdown">Syntaxe MarkDown</a> <ol> <li><a href="#styles-de-texte">Styles de texte</a> <ol> <li><a href="#italique">Italique</a></li> <li><a href="#gras">Gras</a></li> <li><a href="#gras-et-italique">Gras et italique</a></li> <li><a href="#barre">Barré</a></li> <li><a href="#surligne">Surligné</a></li> <li><a href="#code">Code</a></li> <li><a href="#avertissement-sur-les-styles-de-texte">Avertissement sur les styles de texte</a> </ol></li> <li><a href="#liens">Liens</a></li> <li><a href="#blocs">Blocs</a> <ol> <li><a href="#paragraphes-et-retours-a-la-ligne">Paragraphes et retours à la ligne</a></li> <li><a href="#titres-et-sous-titres">Titres et sous-titres</a></li> <li><a href="#listes">Listes</a></li> <li><a href="#citations">Citations</a></li> <li><a href="#code">Code</a></li> <li><a href="#tableaux">Tableaux</a></li> <li><a href="#ligne-de-separation">Ligne de séparation</a></li> <li><a href="#commentaires">Commentaires</a> </ol></li> <li><a href="#notes-de-bas-de-page">Notes de bas de page</a></li> <li><a href="#insertion-de-videos-depuis-un-service-de-video">Insertion de vidéos depuis un service de vidéo</a></li> <li><a href="#identifiant-et-classe-css-sur-les-titres">Identifiant et classe CSS sur les titres</a></li> <li><a href="#classes-css">Classes CSS</a></li> <li><a href="#tags-html">Tags HTML</a> </ol></li> <li><a href="#extensions">Extensions</a> <ol> <li><a href="#images-jointes">Images jointes</a></li> <li><a href="#fichiers-joints">Fichiers joints</a></li> <li><a href="#sommaire-table-des-matieres-automatique">Sommaire / table des matières automatique</a> <ol> <li><a href="#exclure-un-sous-titre-du-sommaire">Exclure un sous-titre du sommaire</a> </ol></li> <li><a href="#grilles-et-colonnes">Grilles et colonnes</a></li> <li><a href="#alignement-du-texte">Alignement du texte</a></li> <li><a href="#couleurs">Couleurs</a> </li></ol></li></ol></aside><h1 id="syntaxe-markdown">Syntaxe MarkDown</h1> <p>Paheko permet d'utiliser la syntaxe <a href="https://fr.wikipedia.org/wiki/Markdown" target="_blank" rel="nofollow,noreferrer">MarkDown</a> dans les pages du site web.</p> <p>Cette syntaxe est la plus répandue dans les outils d'édition de texte, si vous ne la connaissez pas encore, voici les règles qu'on peut utiliser pour formatter du texte avec MarkDown dans la plupart des outils (dont Paheko), ainsi que <a href="#extensions">les règles spécifiques supportées par Paheko</a>.</p> <h2 id="styles-de-texte">Styles de texte</h2> <h3 id="italique">Italique</h3> <p>Pour mettre un texte en italique il faut l'entourer de tirets bas ou d'astérisques :</p> <pre><code>Ce texte est en *italique, dingue !*</code></pre> <p>Donnera :</p> <blockquote> <p>Ce texte est en <em>italique, dingue !</em></p> </blockquote> <h3 id="gras">Gras</h3> <p>Pour le gras, procéder de la même manière, mais avec deux tirets bas ou deux astérisques :</p> <pre><code>Ce texte est **très gras**.</code></pre> <blockquote> <p>Ce texte est <strong>très gras</strong>.</p> </blockquote> <h3 id="gras-et-italique">Gras et italique</h3> <p>Pour combiner, utiliser trois tirets ou trois astérisques :</p> <pre><code>Ce texte est ***gras et italique***.</code></pre> <blockquote> <p>Ce texte est <strong><em>gras et italique</em></strong>.</p> </blockquote> <h3 id="barre">Barré</h3> <p>Utiliser un symbole tilde pour barrer un texte :</p> <pre><code>Texte ~~complètement barré~~.</code></pre> <blockquote> <p>Texte <span style="text-decoration: line-through">complètement barré</span>.</p> </blockquote> <h3 id="surligne">Surligné</h3> <p>Il est possible de marquer une phrase ou un mot comme surligné en l'entourant de deux signes égal :</p> <pre><code>Ce texte est ==surligné==.</code></pre> <blockquote> <p>Ce texte est <mark>surligné</mark>.</p> </blockquote> <h3 id="code">Code</h3> <p>Il est possible d'indiquer du code dans une ligne de texte avec un caractère <em>backtick</em> (accent grave en français, obtenu avec les touches <a href="https://superuser.com/questions/254076/how-do-i-type-the-tick-and-backtick-characters-on-windows" target="_blank" rel="nofollow,noreferrer">Alt Gr + 7</a>) :</p> <pre><code>Le code `<html>` c'est rigolo !</code></pre> <blockquote> <p>Le code <code><html></code> c'est rigolo !</p> </blockquote> <h3 id="avertissement-sur-les-styles-de-texte">Avertissement sur les styles de texte</h3> <p>Un style de texte ne s'applique que dans un même paragraphe, il n'est pas possible d'appliquer un style sur plusieurs paragraphes :</p> <p>Dans l'exemple suivant, les astérisques ne seront pas remplacées par du gras, elles resteront telles quelles :</p> <pre><code>Ce texte n'est pas très **gras. Et celui-ci encore moins**.</code></pre> <blockquote> <p>Ce texte n'est pas très **gras.</p> <p>Et celui-ci encore moins**.</p> </blockquote> <h2 id="liens">Liens</h2> <p>Créez un lien en mettant le texte désiré entre crochets et le lien associé entre parenthèses :</p> <pre><code>Je connais un super gestionnaire [d'association](https://paheko.cloud/) !</code></pre> <p>Donne :</p> <blockquote> <p>Je connais un super gestionnaire <a href="https://paheko.cloud/" target="_blank" rel="nofollow,noreferrer">d'association</a> !</p> </blockquote> <p>Il est possible de faire un lien vers une autre page du site web en utilisant son adresse unique : </p> <pre><code>N'oubliez pas de [vous inscrire à notre atelier](atelier-soudure).</code></pre> <p>Il est aussi possible de simplement inclure une adresse URL et elle sera automatiquement transformée en lien :</p> <pre><code>https://paheko.cloud/</code></pre> <h2 id="blocs">Blocs</h2> <h3 id="paragraphes-et-retours-a-la-ligne">Paragraphes et retours à la ligne</h3> <p>Une ligne vide indique un changement de paragraphe :</p> <pre><code>Ceci est un paragraphe. Ceci est est un autre.</code></pre> <p>Un retour à la ligne simple est traité comme tel :</p> <pre><code>Ceci est un paragraphe.</code></pre> <blockquote> <p>Ceci est un<br /> paragraphe.</p> </blockquote> <h3 id="titres-et-sous-titres">Titres et sous-titres</h3> <p>Pour faire un titre, vous devez mettre un ou plusieurs caractères <em>hash</em> (<code>#</code>) au début de la ligne.</p> <p>Un titre avec un seul caractère est un titre principal (niveau 1), avec deux caractères c'est un sous-titre (niveau 2), etc. jusqu'au niveau 6.</p> <pre><code># Titre principal (niveau 1) ## Sous-titre (niveau 2) ### Sous-sous-titre (niveau 3) #### Niveau 4 ##### Niveau 5 ###### Dernier niveau de sous-titre (6)</code></pre> <p>Donnera :</p> <blockquote> <h1 class="no_toc">Titre principal (niveau 1)</h1> <h2 class="no_toc">Sous-titre (niveau 2)</h2> <h3 class="no_toc">Sous-sous-titre (niveau 3)</h3> <h4 class="no_toc">Niveau 4</h4> <h5 class="no_toc">Niveau 5</h5> <h6 class="no_toc">Dernier niveau de sous-titre (6)</h6> </blockquote> <h3 id="listes">Listes</h3> <p>Vous pouvez créer des listes avec les caractères astérisque (<code>*</code>) et tiret <code>-</code> en début de ligne pour des listes non ordonnées :</p> <pre><code>* une élément * un autre - un sous élément - un autre sous élément * un dernier élément</code></pre> <blockquote> <ul> <li>une élément</li> <li>un autre<ul> <li>un sous élément</li> <li>un autre sous élément</li> </ul> </li> <li>un dernier élément</li> </ul> </blockquote> <p>Ou avec des nombres pour des listes ordonnées :</p> <pre><code>1. élément un 2. élément deux</code></pre> <blockquote> <ol> <li>élément un</li> <li>élément deux</li> </ol> </blockquote> <p>L'ordre des nombres n'est pas important, seul le premier nombre est utilisé pour déterminer à quel numéro commencer la liste.</p> <p>Exemple :</p> <pre><code>3. A 5. B 4. C</code></pre> <blockquote> <ol start="3"> <li>A</li> <li>B </li> <li>C</li> </ol> </blockquote> <p>Il est ainsi possible d'utiliser uniquement le même numéro pour ne pas avoir à numéroter sa liste :</p> <pre><code>1. Un 1. Deux</code></pre> <blockquote> <ol> <li>Un</li> <li>Deux</li> </ol> </blockquote> <h3 id="citations">Citations</h3> <p>Les citations se font en ajoutant le signe <em>supérieur à</em> (<code>></code>) au début de la ligne :</p> <pre><code>> Programming is not a science. Programming is a craft.</code></pre> <blockquote> <p>Programming is not a science. Programming is a craft.</p> </blockquote> <h3 id="code">Code</h3> <p>Créez un bloc de code en indentant chaque ligne avec quatre espaces, ou en mettant trois accents graves <code>`</code> (<em>backtick</em>, obtenu avec <a href="https://superuser.com/questions/254076/how-do-i-type-the-tick-and-backtick-characters-on-windows" target="_blank" rel="nofollow,noreferrer">Alt Gr + 7</a>) sur la ligne au dessus et en dessous de votre code:</p> <pre><code>``` <html>...</html> ```</code></pre> <p>Résultat :</p> <pre><code><html>...</html></code></pre> <h3 id="tableaux">Tableaux</h3> <p>Pour créer un tableau vous devez séparer les colonnes avec des barres verticales (<code>|</code>, obtenu avec les touches <a href="https://fr.wikipedia.org/wiki/Barre_verticale#Saisie" target="_blank" rel="nofollow,noreferrer">AltGr + 6</a>).</p> <p>La première ligne contient les noms des colonnes, la seconde ligne contient la ligne de séparation (chaque cellule doit contenir un ou plusieurs tirets), et les lignes suivantes représentent le contenu du tableau.</p> <pre><code>| Colonne 1 | Colonne 2 | | - | - | - | | AB | CD |</code></pre> |
︙ | ︙ | |||
195 196 197 198 199 200 201 | <tbody> <tr> <td>AB</td> <td>CD</td> </tr> </tbody> </table> | | | 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 | <tbody> <tr> <td>AB</td> <td>CD</td> </tr> </tbody> </table> <p>Par défaut les colonnes sont centrées. On peut aussi aligner le texte à gauche ou à droite en mettant deux points après le ou les tirets de la ligne suivant l'entête :</p> <pre><code>| Aligné à gauche | Centré | Aligné à droite | | :--------------- |:---------------:| :--------------:| | Aligné à gauche | ce texte | Aligné à droite | | Aligné à gauche | est | Aligné à droite | | Aligné à gauche | centré | Aligné à droite |</code></pre> <table> <thead> |
︙ | ︙ | |||
228 229 230 231 232 233 234 | <td style="text-align: left;">Aligné à gauche</td> <td style="text-align: center;">centré</td> <td style="text-align: center;">Aligné à droite</td> </tr> </tbody> </table> <h3 id="ligne-de-separation">Ligne de séparation</h3> | | | | < < < < < < < < < < < < < < < < < | < < < < | | | | | | | | 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 | <td style="text-align: left;">Aligné à gauche</td> <td style="text-align: center;">centré</td> <td style="text-align: center;">Aligné à droite</td> </tr> </tbody> </table> <h3 id="ligne-de-separation">Ligne de séparation</h3> <p>Il suffit de mettre au moins 3 tirets à la suite sur une ligne séparée pour ajouter une ligne de séparation :</p> <pre><code>---</code></pre> <p>Résultat :</p> <hr /> <h3 id="commentaires">Commentaires</h3> <p>Pour ajouter un commentaire qui ne sera pas affiché dans le texte, utiliser la syntaxe suivante :</p> <pre><code><!-- Ceci est un commentaire --></code></pre> <h2 id="notes-de-bas-de-page">Notes de bas de page</h2> <p>Pour créer une note de base de page, il faut mettre entre crochets un signe circonflexe (obtenu en appuyant sur la touche circonflexe, puis sur espace) suivi du numéro ou du nom de la note. Enfin, à la fin du texte il faudra répéter les crochets, le signe circonflexe, suivi de deux points et de la définition.</p> <pre><code>Texte très intéressant[^1]. Approuvé par 100% des utilisateurs[^Source]. [^1]: Ceci est une note de bas de page [^Source]: Enquête Paheko sur la base de 1 personne interrogée.</code></pre> <p>Donnera ceci :</p> <blockquote> <p>Texte très intéressant<a id="fn-ref-1" href="#fn-1" class="footnote-ref">1</a>. Approuvé par 100% des utilisateurs<a id="fn-ref-Source" href="#fn-Source" class="footnote-ref">Source</a>.</p> <dl class="footnotes"><dt id="fn-1"><a href="#fn-ref-1">1</a></dt><dd>Ceci est une note de bas de page</dd><dt id="fn-Source"><a href="#fn-ref-Source">Source</a></dt><dd>Enquête Paheko sur la base de 1 personne interrogée.</dd></dl> </blockquote> <h2 id="insertion-de-videos-depuis-un-service-de-video">Insertion de vidéos depuis un service de vidéo</h2> <p>Certains services vidéo comme les instances Peertube permettent l'intégration des vidéos.</p> <p>Pour cela il faut recopier le code d'intégration donné par le service vidéo. Voici un exemple :</p> <pre><code><iframe title="ENQUÊTE : Brûler la Forêt pour Sauver le Climat ? | EP 3 - Le bois énergie" width="560" height="315" src="https://peertube.stream/videos/embed/12c52265-e3b3-4bad-93f3-f2c1df5bbe4f" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe></code></pre> <p>Résultat :</p> <iframe title="ENQUÊTE : Brûler la Forêt pour Sauver le Climat ? | EP 3 - Le bois énergie" width="560" height="315" src="https://peertube.stream/videos/embed/12c52265-e3b3-4bad-93f3-f2c1df5bbe4f" frameborder="" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts"></iframe> <h2 id="identifiant-et-classe-css-sur-les-titres">Identifiant et classe CSS sur les titres</h2> <p>Il est possible de spécifier l'ID et la classe CSS d'un titre en les rajoutant à la fin du titre, entre accolades, comme ceci :</p> <pre><code>## Titre de niveau 2 {#titre2} {.text-center}</code></pre> <p>Le code HTML résultant sera comme ceci :</p> <pre><code><h2 id="titre2" class="text-center">Titre de niveau 2</h2></code></pre> <h2 id="classes-css">Classes CSS</h2> <p>Il est possible de donner une classe CSS parente à un ensemble d'éléments en les mettant au centre d'un bloc définissant cette classe :</p> <pre><code>{{{.custom-quote .custom-block Paragraphe > Citation }}}</code></pre> <p>Créera le code HTML suivant :</p> <pre><code><div class="custom-quote custom-block"> <p>Paragraphe</p> <blockquote><p>Citation</p></blockquote> </div></code></pre> <h2 id="tags-html">Tags HTML</h2> <p>Certains tags HTML sont autorisés :</p> <table> <thead> <tr> <th style="text-align: left;">Tag</th> <th style="text-align: left;">Utilisation</th> <th style="text-align: left;">Exemple</th> </tr> |
︙ | ︙ | |||
356 357 358 359 360 361 362 | <tr> <td style="text-align: left;"><code><video></code></td> <td style="text-align: left;">Insérer une vidéo dans la page</td> <td style="text-align: left;"><code><video src="mon_fichier.webm"></code></td> </tr> </tbody> </table> | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 | <tr> <td style="text-align: left;"><code><video></code></td> <td style="text-align: left;">Insérer une vidéo dans la page</td> <td style="text-align: left;"><code><video src="mon_fichier.webm"></code></td> </tr> </tbody> </table> <p>Mais leurs possibilités sont limitées, notamment sur les attributs autorisés.</p> <h1 id="extensions">Extensions</h1> <p>Paheko propose des extensions au langage MarkDown, qui n'existent pas dans les autres logiciels utilisant aussi MarkDown.</p> <p>Toutes ces extensions se présentent sous la forme d'un code situé entre deux signes <strong>inférieur à</strong> (<code><<</code>) et deux signes <strong>supérieur à</strong> (<code>>></code>), à ne pas confondre avec les guillements français (<code>«</code> et <code>»</code>).</p> <h2 id="images-jointes">Images jointes</h2> <p>Il est possible d'intégrer une image jointe à la page web en plaçant le code suivant sur une ligne (sans autre texte) :</p> <pre><code><<image|Nom_fichier.jpg|Alignement|Légende>></code></pre> <ul> <li><code>Nom_fichier.jpg</code> : remplacer par le nom du fichier de l'image (parmi les images jointes à la page)</li> <li><code>Alignement</code> : remplacer par l'alignement :<ul> <li><code>gauche</code> ou <code>left</code> : l'image sera placée à gauche en petit (200 pixels), le texte remplira l'espace laissé sur la droite de l'image ;</li> <li><code>droite</code> ou <code>right</code> : l'image sera placée à droite en petit, le texte remplira l'espace laissé sur la gauche de l'image ;</li> <li><code>centre</code> ou <code>center</code> : l'image sera placée au centre en taille moyenne (500 pixels), le texte sera placé au dessus et en dessous.</li> </ul> </li> <li>Légende : indiquer ici une courte description de l'image.</li> </ul> <p>Exemple :</p> <pre><code><<image|mon_image.png|center|Ceci est une belle image>></code></pre> <p>Il est aussi possible d'utiliser la syntaxe avec des paramètres nommés :</p> <pre><code><<image file="Nom_fichier.jpg" align="center" caption="Légende">></code></pre> <p>Les images qui ne sont pas mentionnées dans le texte seront affichées après le texte sous forme de galerie.</p> <h2 id="fichiers-joints">Fichiers joints</h2> <p>Pour créer un bouton permettant de voir ou télécharger un fichier joint à la page web, il suffit d'utiliser la syntaxe suivante :</p> <pre><code><<file|Nom_fichier.ext|Libellé>></code></pre> <ul> <li><code>Nom_fichier.ext</code> : remplacer par le nom du fichier (parmi les fichiers joints à la page)</li> <li><code>Libellé</code> : indique le libellé du qui sera affiché sur le bouton, si aucun libellé n'est indiqué alors c'est le nom du fichier qui sera affiché</li> </ul> <h2 id="sommaire-table-des-matieres-automatique">Sommaire / table des matières automatique</h2> <p>Il est possible de placer le code <code><<toc>></code> pour générer un sommaire automatiquement à partir des titres et sous-titres :</p> <pre><code><<toc>></code></pre> <p>Affichera un sommaire comme celui-ci :</p><div class="toc"> <ol> <li><a href="#syntaxe-markdown">Syntaxe MarkDown</a> <ol> <li><a href="#styles-de-texte">Styles de texte</a> <ol> <li><a href="#italique">Italique</a></li> <li><a href="#gras">Gras</a></li> <li><a href="#gras-et-italique">Gras et italique</a></li> <li><a href="#barre">Barré</a></li> <li><a href="#surligne">Surligné</a></li> <li><a href="#code">Code</a></li> <li><a href="#avertissement-sur-les-styles-de-texte">Avertissement sur les styles de texte</a> </ol></li> <li><a href="#liens">Liens</a></li> <li><a href="#blocs">Blocs</a> <ol> <li><a href="#paragraphes-et-retours-a-la-ligne">Paragraphes et retours à la ligne</a></li> <li><a href="#titres-et-sous-titres">Titres et sous-titres</a></li> <li><a href="#listes">Listes</a></li> <li><a href="#citations">Citations</a></li> <li><a href="#code">Code</a></li> <li><a href="#tableaux">Tableaux</a></li> <li><a href="#ligne-de-separation">Ligne de séparation</a></li> <li><a href="#commentaires">Commentaires</a> </ol></li> <li><a href="#notes-de-bas-de-page">Notes de bas de page</a></li> <li><a href="#insertion-de-videos-depuis-un-service-de-video">Insertion de vidéos depuis un service de vidéo</a></li> <li><a href="#identifiant-et-classe-css-sur-les-titres">Identifiant et classe CSS sur les titres</a></li> <li><a href="#classes-css">Classes CSS</a></li> <li><a href="#tags-html">Tags HTML</a> </ol></li> <li><a href="#extensions">Extensions</a> <ol> <li><a href="#images-jointes">Images jointes</a></li> <li><a href="#fichiers-joints">Fichiers joints</a></li> <li><a href="#sommaire-table-des-matieres-automatique">Sommaire / table des matières automatique</a> <ol> <li><a href="#exclure-un-sous-titre-du-sommaire">Exclure un sous-titre du sommaire</a> </ol></li> <li><a href="#grilles-et-colonnes">Grilles et colonnes</a></li> <li><a href="#alignement-du-texte">Alignement du texte</a></li> <li><a href="#couleurs">Couleurs</a> </li></ol></li></ol></div><p>Il est possible de limiter les niveaux en utilisant le paramètre <code>level</code> comme ceci :</p> <pre><code><<toc level=1>></code></pre> <p>N'affichera que les titres de niveau 1 (précédés d'un seul signe hash <code>#</code>), comme ceci :</p><div class="toc"> <ol> <li><a href="#syntaxe-markdown">Syntaxe MarkDown</a></li> <li><a href="#extensions">Extensions</a> </li></ol></div><p>Enfin il est possible de placer la table des matières sur le côté du texte, en utilisant le paramètre <code>aside</code> :</p> <pre><code><<toc level=1 aside>></code></pre> <p>Note : en plus de la syntaxe <code><<toc>></code>, Paheko supporte aussi les syntaxes suivantes par compatibilité avec <a href="https://alexharv074.github.io/2018/08/28/auto-generating-markdown-tables-of-contents.html" target="_blank" rel="nofollow,noreferrer">les autres moteurs de rendu MarkDown</a> : <code>{:toc}</code> <code>[[_TOC_]]</code> <code>[toc]</code>.</p> <h3 id="exclure-un-sous-titre-du-sommaire">Exclure un sous-titre du sommaire</h3> <p>Il est aussi possible d'indiquer qu'un titre ne doit pas être inclus dans le sommaire en utilisant la classe <code>no_toc</code> comme ceci :</p> <pre><code>## Sous-titre non-inclus {.no_toc}</code></pre> <h2 id="grilles-et-colonnes">Grilles et colonnes</h2> <p>Pour une mise en page plus avancée, il est possible d'utiliser les <em>grilles</em>, adaptation des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout" target="_blank" rel="nofollow,noreferrer">grids en CSS</a>. Il faut utiliser la syntaxe <code><<grid>>...Contenu...<</grid>></code>.</p> <p>Attention, les blocs <code><<grid>></code> et <code><</grid>></code> doivent obligatoirement être placés sur des lignes qui ne contiennent rien d'autre.</p> <p><strong>Note :</strong> sur petit écran (mobile ou tablette) les grilles et colonnes sont désactivées, tout sera affiché dans une seule colonne, comme si les grilles n'étaient pas utilisées.</p> <p>Pour spécifier le nombre de colonnes on peut utiliser un raccourci qui <em>mime</em> les colonnes, comme ceci :</p> <pre><code><<grid !!>></code></pre> <p>Ce code indique qu'on veut créer une grille de 2 colonnes de largeur identique.</p> <p>Dans les raccourcis, le point d'exclamation <code>!</code> indique une colonne simple, et le hash <code>#</code> indique une colonne qui prend le reste de la place selon le nombre de colonnes total.</p> <p>D'autres exemples de raccourcis :</p> <ul> <li><code>!!</code> : deux colonnes de largeur égale</li> <li><code>!!!</code> : trois colonnes de largeur égale</li> <li><code>!##</code> : deux colonnes, la première occupant un tiers de la largeur, la seconde occupant les deux tiers</li> <li><code>!##!</code> : 4 colonnes, la première occupant un quart de la largeur, la seconde occupant la moitié, la dernière occupant le quart</li> </ul> <p>Alternativement, pour plus de contrôle, ce bloc accepte les paramètres suivants :</p> <ul> <li><code>short</code> : notation courte décrite ci-dessus</li> <li><code>gap</code> : espacement entre les blocs de la grille</li> <li><code>template</code> : description CSS complète de la grille (propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/grid-template" target="_blank" rel="nofollow,noreferrer"><code>grid-template</code></a>)</li> </ul> <p>Après ce premier bloc <code><<grid>></code> qui définit la forme de la grille, on peut entrer le contenu de la première colonne.</p> <p>Pour créer la seconde colonne il faut simplement placer un nouveau bloc <code><<grid>></code> vide (aucun paramètre) sur une ligne.</p> <p>Enfin on termine en fermant la grille avec un block <code><</grid>></code>. Voici un exemple complet :</p> <pre><code><<grid !!!>> Col. 1 <<grid>> Col. 2 <<grid>> Col. 3 <</grid>></code></pre><section class="web-grid web-grid-debug" style="--grid-template: none / minmax(0, 0.34fr) minmax(0, 0.34fr) minmax(0, 0.34fr)"><article class="web-block" style=""><p>Col. 1</p></article><article class="web-block" style=""><p>Col. 2</p></article><article class="web-block" style=""><p>Col. 3</p></article></section><p>Exemple avec 3 colonnes, dont 2 petites et une large :</p> <pre><code><<grid !##!>> Col. 1 <<grid>> Colonne 2 large <<grid>> Col. 3 <</grid>></code></pre><section class="web-grid web-grid-debug" style="--grid-template: none / minmax(0, 0.25fr) minmax(0, 0.5fr) minmax(0, 0.25fr)"><article class="web-block" style=""><p>Col. 1</p></article><article class="web-block" style=""><p>Colonne 2 large</p></article><article class="web-block" style=""><p>Col. 3</p></article></section><p>Il est possible de créer plus de blocs qu'il n'y a de colonnes, cela créera une nouvelle ligne avec le même motif :</p> <pre><code><<grid !!>> L1 C1 <<grid>> L1 C2 <<grid>> L2 C1 <<grid>> L2 C2 <</grid>></code></pre><section class="web-grid web-grid-debug" style="--grid-template: none / minmax(0, 0.5fr) minmax(0, 0.5fr)"><article class="web-block" style=""><p>L1 C1</p></article><article class="web-block" style=""><p>L1 C2</p></article><article class="web-block" style=""><p>L2 C1</p></article><article class="web-block" style=""><p>L2 C2</p></article></section><p>Enfin, il est possible d'utiliser la notation CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" target="_blank" rel="nofollow,noreferrer"><code>grid-row</code></a> et <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" target="_blank" rel="nofollow,noreferrer"><code>grid-column</code></a> pour chaque bloc, permettant de déplacer les blocs, ou de faire en sorte qu'un bloc s'étende sur plusieurs colonnes ou plusieurs lignes. Pour cela il faut utiliser le paramètre <code>row</code> ou <code>column</code> qui précède le bloc :</p> <pre><code><<grid short="#!!" column="span 2">> A <<grid row="span 2">> B <<grid>> C <<grid>> D <</grid>></code></pre><section class="web-grid web-grid-debug" style="--grid-template: none / minmax(0, 0.34fr) minmax(0, 0.34fr) minmax(0, 0.34fr)"><article class="web-block" style="grid-column: span 2"><p>A</p></article><article class="web-block" style="grid-row: span 2"><p>B</p></article><article class="web-block" style=""><p>C</p></article><article class="web-block" style=""><p>D</p></article></section><p>Noter que dans ce cas on doit utiliser la notation <code>short="…"</code> pour pouvoir utiliser les autres paramètres.</p> <p>Enfin, il est possible d'aligner un bloc verticalement par rapport aux autres en utilisant le paramètre <code>align</code> (équivalent de la propriété CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" target="_blank" rel="nofollow,noreferrer"><code>align-self</code></a>).</p> <h2 id="alignement-du-texte">Alignement du texte</h2> <p>Il suffit de placer sur une ligne seule le code <code><<center>></code> pour centrer du texte :</p> <pre><code><<center>> Texte centré <</center>></code></pre> <p>On peut procéder de même avec <code><<left>></code> et <code><<right>></code> pour aligner à gauche ou à droite.</p> <h2 id="couleurs">Couleurs</h2> <p>Comme sur les <a href="https://decoblog.skyrock.com/" target="_blank" rel="nofollow,noreferrer">Skyblogs</a>, il est possible de mettre en couleur le texte et le fond, et même de créer des dégradés !</p> <p>Utiliser la syntaxe <code><<color COULEUR>>...texte...<</color>></code> pour changer la couleur du texte, ou <code><<bgcolor COULEUR>>...texte...<</bgcolor>></code> pour la couleur du fond.</p> <p>Il est possible d'indiquer plusieurs couleurs, séparées par des espaces, pour créer des dégradés.</p> <pre><code><<color red>>Rouge !<</color>> <<bgcolor yellow>>Fond jaune pétant !<</bgcolor>> <<color cyan green salmon>>Dégradé de texte !<</color>> <<bgcolor chocolate khaki orange>>Dégradé du fond<</bgcolor>> <<bgcolor darkolivegreen darkseagreen >> <<color darkred>> ## Il est aussi possible de faire des blocs colorés Avec des paragraphes > Et citations <</color>> <</bgcolor>></code></pre> <blockquote> <p><span style="display: inline; color: red">Rouge !</span><br /> <span style="display: inline; background-color: yellow">Fond jaune pétant !</span><br /> <span style="display: inline; background-size: 100%; background: linear-gradient(to right, cyan, green, salmon); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -moz-background-clip: text;">Dégradé de texte !</span><br /> <span style="display: inline; background-size: 100%; background: linear-gradient(to right, chocolate, khaki, orange); -webkit-background-clip: initial; -webkit-text-fill-color: initial; -moz-text-fill-color: initial; -moz-background-clip: initial;">Dégradé du fond</span></p><div style="background-size: 100%; background: linear-gradient(to right, greenyellow, indianred); -webkit-background-clip: initial; -webkit-text-fill-color: initial; -moz-text-fill-color: initial; -moz-background-clip: initial;"><div style="background-size: 100%; background: linear-gradient(to right, darkred, darkgreen); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -moz-background-clip: text;"><h2 class="no_toc">Il est aussi possible de faire des blocs colorés</h2> <p>Avec des paragraphes</p> <blockquote> <p>Et citations</p> </blockquote></div></div></blockquote> <p>Il est possible d'utiliser les couleurs avec <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color" target="_blank" rel="nofollow,noreferrer">leur nom</a> ou leur code hexadécimal (exemple : <code>#ff0000</code> pour rouge).</p> <p><strong>Attention : cette fonctionnalité est rigolote mais doit être utilisé avec parcimonie, en effet cela risque de rendre le texte illisible, notamment pour les personnes daltoniennes.</strong></p></div></body></html> |
Added src/www/admin/static/doc/markdown_quickref.html version [cf69fd290a].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/markdown_quickref.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="keyboard.html">Raccourcis claviers</a></li> <li><a href="markdown.html">Syntaxe MarkDown complète</a></li> <li><strong><a href="markdown_quickref.html">Référence rapide MarkDown</a></strong></li> </ul> </div> <h1 id="reference-rapide-markdown">Référence rapide MarkDown</h1> <table> <thead> <tr> <th style="text-align: left;">Nom</th> <th style="text-align: left;">Syntaxe</th> <th style="text-align: left;">Rendu</th> <th style="text-align: left;">Notes</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">Italique</td> <td style="text-align: left;"><code>*italique*</code></td> <td style="text-align: left;"><em>italique</em></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Gras</td> <td style="text-align: left;"><code>**gras**</code></td> <td style="text-align: left;"><strong>gras</strong></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Gras et italique</td> <td style="text-align: left;"><code>***gras et italique***</code></td> <td style="text-align: left;"><strong><em>gras et italique</em></strong></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Barré</td> <td style="text-align: left;"><code>~~barré~~</code></td> <td style="text-align: left;"><span style="text-decoration: line-through">barré</span></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Surligné</td> <td style="text-align: left;"><code>==surligné==</code></td> <td style="text-align: left;"><mark>surligné</mark></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Lien</td> <td style="text-align: left;"><code>[Libellé du lien](adresse)</code></td> <td style="text-align: left;"><a href="https://paheko.cloud/" target="_blank" rel="nofollow,noreferrer">Libellé du lien</a></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 1</td> <td style="text-align: left;"><code># Titre 1</code></td> <td style="text-align: left;"><h1>Titre 1</h1></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 2</td> <td style="text-align: left;"><code>## Titre 2</code></td> <td style="text-align: left;"><h2>Titre 2</h2></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 3</td> <td style="text-align: left;"><code>### Titre 3</code></td> <td style="text-align: left;"><h3>Titre 3</h3></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 4</td> <td style="text-align: left;"><code>#### Titre 4</code></td> <td style="text-align: left;"><h4>Titre 4</h4></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 5</td> <td style="text-align: left;"><code>##### Titre 5</code></td> <td style="text-align: left;"><h5>Titre 5</h5></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Titre niveau 6</td> <td style="text-align: left;"><code>###### Titre 6</code></td> <td style="text-align: left;"><h6>Titre 6</h6></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Liste</td> <td style="text-align: left;"><pre><code>* Liste 1<br>* Liste 2</code></pre></td> <td style="text-align: left;"><ul><li>Liste 1</li><li>Liste 2</li></ul></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Liste imbriquée</td> <td style="text-align: left;"><pre><code>* Liste 1<br> * Sous-liste 1</code></pre></td> <td style="text-align: left;"><ul><li>Liste 1<ul><li>Sous-liste 1</li></ul></li></ul></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Liste numérotée</td> <td style="text-align: left;"><pre><code>1. Liste 1<br>2. Liste 2</code></pre></td> <td style="text-align: left;"><ol><li>Liste 1</li><li>Liste 2</li></ol></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Code dans du texte</td> <td style="text-align: left;">Voir ce <code>`code`</code></td> <td style="text-align: left;">Voir ce <code>code</code></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Bloc de code</td> <td style="text-align: left;"><pre><code>```<br>Bloc de code<br>```</code></pre></td> <td style="text-align: left;"><pre><code>Bloc de code</code></pre></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Citation</td> <td style="text-align: left;"><pre><code>> Citation<br>> Citation</code></pre></td> <td style="text-align: left;"><blockquote>Citation<br>Citation</blockquote></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Tableau</td> <td style="text-align: left;"><pre><code>| Colonne 1 | Colonne 2 |<br>| - | - |<br>| A | B |</code></pre></td> <td style="text-align: left;"><table><thead><tr><th>Colonne 1</th><th>Colonne 2</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Ligne horizontale</td> <td style="text-align: left;"><code>----</code></td> <td style="text-align: left;"><hr></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Référence à une note de bas de page</td> <td style="text-align: left;"><code>[^1]</code></td> <td style="text-align: left;"><a id="fn-ref-1" href="#fn-1" class="footnote-ref">1</a></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Définition d'une note de bas de page</td> <td style="text-align: left;"><pre><code>[^1]: Définition</code></pre></td> <td style="text-align: left;"><a id="fn-ref-1" href="#fn-1" class="footnote-ref">1</a></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Bloc avec classe CSS</td> <td style="text-align: left;"><pre><code>{{{.boutons<br>* <a href="https://paheko.cloud/" target="_blank" rel="nofollow,noreferrer">Paheko</a><br>}}}</code></pre></td> <td style="text-align: left;"><div class="boutons"><ul><li><a href="https://paheko.cloud/">Paheko</a></li></ul></div></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Sommaire / table des matières</td> <td style="text-align: left;"><code><<toc>></code></td> <td style="text-align: left;"><em>(ne peut être montré sur cette page)</em></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Image jointe</td> <td style="text-align: left;"><code><<image|nom_image.jpg|center|Légende>></code></td> <td style="text-align: left;"><em>(ne peut être montré sur cette page)</em></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Fichier joint</td> <td style="text-align: left;"><code><<file|nom_fichier.pdf|Libellé>></code></td> <td style="text-align: left;"><em>(ne peut être montré sur cette page)</em></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Grille à 2 colonnes</td> <td style="text-align: left;"><pre><code><<grid !!>><br>Colonne 1<br><br><<grid>><br>Colonne 2<br><br><</grid>></code></pre></td> <td style="text-align: left;"><em>(ne peut être montré sur cette page)</em></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Texte centré</td> <td style="text-align: left;"><code><<center>>Centre<</center>></code></td> <td style="text-align: left;"><div style="text-align: center;">Centre</div></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Texte aligné à droite</td> <td style="text-align: left;"><code><<right>>Droite<</right>></code></td> <td style="text-align: left;"><div style="text-align: right;">Droite</div></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Texte coloré</td> <td style="text-align: left;"><code><<color red>>Rouge<</color>></code></td> <td style="text-align: left;"><span style="display: inline; color: red">Rouge</span></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Fond coloré</td> <td style="text-align: left;"><code><<bgcolor green>>Vert<</color>></code></td> <td style="text-align: left;"><span style="display: inline; background-color: green">Vert</span></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Dégradé de texte</td> <td style="text-align: left;"><code><<color orange cyan>>Orange à cyan<</color>></code></td> <td style="text-align: left;"><span style="display: inline; background-size: 100%; background: linear-gradient(to right, orange, cyan); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -moz-background-clip: text;">Orange à cyan</span></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Dégradé de fond</td> <td style="text-align: left;"><code><<bgcolor orange cyan>>Orange à cyan<</color>></code></td> <td style="text-align: left;"><span style="display: inline; background-size: 100%; background: linear-gradient(to right, orange, cyan); -webkit-background-clip: initial; -webkit-text-fill-color: initial; -moz-text-fill-color: initial; -moz-background-clip: initial;">Orange à cyan</span></td> <td style="text-align: left;"><a id="fn-ref-P" href="#fn-P" class="footnote-ref">P</a></td> </tr> <tr> <td style="text-align: left;">Clavier</td> <td style="text-align: left;"><code><kbd>Ctrl</kbd> + <kbd>C</kbd></code></td> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>C</kbd></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Exemple console</td> <td style="text-align: left;"><code><samp>Exemple</samp></code></td> <td style="text-align: left;"><samp>Exemple</samp></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Variable maths</td> <td style="text-align: left;"><code><var>ab</var> + <var>cd</var> = 42</code></td> <td style="text-align: left;"><var>ab</var> + <var>cd</var> = 42</td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Texte supprimé</td> <td style="text-align: left;"><code><del>supprimé</del></code></td> <td style="text-align: left;"><del>supprimé</del></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Texte ajouté</td> <td style="text-align: left;"><code><ins>ajouté</ins></code></td> <td style="text-align: left;"><ins>ajouté</ins></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Exposant</td> <td style="text-align: left;"><code>Texte<sup>exposant</sup></code></td> <td style="text-align: left;">Texte<sup>exposant</sup></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: left;">Indice</td> <td style="text-align: left;"><code>Texte<sub>indice</sub></code></td> <td style="text-align: left;">Texte<sub>indice</sub></td> <td style="text-align: left;"></td> </tr> </tbody> </table> <dl class="footnotes"><dt id="fn-1"><a href="#fn-ref-1">1</a></dt><dd>Exemple de note de bas de page</dd><dt id="fn-P"><a href="#fn-ref-P">P</a></dt><dd>Indique une syntaxe qui ne fait pas partie du standard Markdown, mais est spécifique à Paheko.</dd></dl></div></body></html> |
Modified src/www/admin/static/doc/skriv.html from [031f0f89b5] to [70fd7b0d9d].
1 2 3 | <!DOCTYPE html> <html> <head> | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | | > > > > > < | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/skriv.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><aside class="toc"> <ol> <li><a href="#syntaxe-skrivml">Syntaxe SkrivML</a> <ol> <li><a href="#styles-de-texte">Styles de texte</a></li> <li><a href="#titres">Titres</a></li> <li><a href="#listes">Listes</a></li> <li><a href="#liens">Liens</a></li> <li><a href="#tableaux">Tableaux</a></li> <li><a href="#autres">Autres</a> </ol></li> <li><a href="#extensions">Extensions</a> <ol> <li><a href="#images-jointes">Images jointes</a></li> <li><a href="#fichiers-joints">Fichiers joints</a> </ol></li> <li><a href="#raccourcis-clavier">Raccourcis clavier</a> </li></ol></aside><h1 id="syntaxe-skrivml">Syntaxe SkrivML</h1> <p>Paheko propose la syntaxe <a href="https://fossil.kd2.org/garradin/doc/trunk/doc/skrivml.html" target="_blank" rel="nofollow,noreferrer">SkrivML</a> pour le formatage du texte des pages du site web.</p> <h2 id="styles-de-texte">Styles de texte</h2> <table> <thead> <tr> <th style="text-align: left;">Style</th> <th style="text-align: left;">Syntaxe</th> </tr> |
︙ | ︙ | |||
62 63 64 65 66 67 68 | </tr> <tr> <td style="text-align: left;">Texte <sub>Indice</sub></td> <td style="text-align: left;"><code>CO,,2,,</code></td> </tr> </tbody> </table> | | | | | | | | | > > > | < | > > > > | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | | 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 | </tr> <tr> <td style="text-align: left;">Texte <sub>Indice</sub></td> <td style="text-align: left;"><code>CO,,2,,</code></td> </tr> </tbody> </table> <p><strong>Attention :</strong> ces styles ne fonctionnent que si le code entoure des mots complets, ça ne fonctionne pas au milieu de mots.</p> <pre><code>Un **mot** en gras. Mais on ne peut pas cou**per** un mot avec du gras.</code></pre> <blockquote> <p>Un <strong>mot</strong> en gras. Mais on ne peut pas cou**per** un mot avec du gras.</p> </blockquote> <h2 id="titres">Titres</h2> <p>Doivent être précédé d'un ou plusieurs signe égal. Peuvent aussi être suivi du même nombre de signe égal.</p> <pre><code>= Titre niveau 1 == Titre niveau 2 === Titre niveau 3 === ==== Titre de niveau 4 ====</code></pre> <h2 id="listes">Listes</h2> <p>Listes non ordonnées :</p> <pre><code>* Item 1 * Item 2 ** Sous-item 2.1 ** Sous-item 2.2 *** Sous-item 2.2.1</code></pre> <p>Listes ordonnées :</p> <pre><code># Item 1 # Item 2 ## Sub-item 2.1 ## Sub-item 2.2 ### Sub-item 2.2.1</code></pre> <h2 id="liens">Liens</h2> <p>Lien interne :</p> <pre><code>Voir [[cette page|adresse-unique-autre-page]].</code></pre> <p>Lien externe :</p> <pre><code>[[https://paheko.cloud/]]</code></pre> <h2 id="tableaux">Tableaux</h2> <pre><code>!! Colonne 1 !! Colonne 2 || Cellule 1 || Cellule 2 || Cellule 3 || Cellule 4</code></pre> <h2 id="autres">Autres</h2> <p>Consulter la documentation complète de <a href="https://fossil.kd2.org/garradin/doc/trunk/doc/skrivml.html" target="_blank" rel="nofollow,noreferrer">SkrivML</a>.</p> <h1 id="extensions">Extensions</h1> <p>Toutes les extensions se présentent sous la forme d'un code situé entre deux signes <strong>inférieur à</strong> (<code><<</code>) et deux signes <strong>supérieur à</strong> (<code>>></code>), à ne pas confondre avec les guillements français (<code>«</code> et <code>»</code>).</p> <h2 id="images-jointes">Images jointes</h2> <p>Il est possible d'intégrer une image jointe à la page web en plaçant le code suivant sur une ligne (sans autre texte) :</p> <pre><code><<image|Nom_fichier.jpg|Alignement|Légende>></code></pre> <ul> <li><code>Nom_fichier.jpg</code> : remplacer par le nom du fichier de l'image (parmi les images jointes à la page)</li> <li><code>Alignement</code> : remplacer par l'alignement :<ul> <li><code>gauche</code> ou <code>left</code> : l'image sera placée à gauche en petit (200 pixels), le texte remplira l'espace laissé sur la droite de l'image ;</li> <li><code>droite</code> ou <code>right</code> : l'image sera placée à droite en petit, le texte remplira l'espace laissé sur la gauche de l'image ;</li> <li><code>centre</code> ou <code>center</code> : l'image sera placée au centre en taille moyenne (500 pixels), le texte sera placé au dessus et en dessous.</li> </ul> </li> <li>Légende : indiquer ici une courte description de l'image.</li> </ul> <p>Exemple :</p> <pre><code><<image|mon_image.png|center|Ceci est une belle image>></code></pre> <p>Il est aussi possible d'utiliser la syntaxe avec des paramètres nommés :</p> <pre><code><<image file="Nom_fichier.jpg" align="center" caption="Légende">></code></pre> <p>Les images qui ne sont pas mentionnées dans le texte seront affichées après le texte sous forme de galerie.</p> <h2 id="fichiers-joints">Fichiers joints</h2> <p>Pour créer un bouton permettant de voir ou télécharger un fichier joint à la page web, il suffit d'utiliser la syntaxe suivante :</p> <pre><code><<file|Nom_fichier.ext|Libellé>></code></pre> <ul> <li><code>Nom_fichier.ext</code> : remplacer par le nom du fichier (parmi les fichiers joints à la page)</li> <li><code>Libellé</code> : indique le libellé du qui sera affiché sur le bouton, si aucun libellé n'est indiqué alors c'est le nom du fichier qui sera affiché</li> </ul> <h1 id="raccourcis-clavier">Raccourcis clavier</h1> <p>Depuis l'édition du texte :</p> <table> <thead> <tr> <th style="text-align: left;">Raccourci</th> <th style="text-align: left;">Action</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>G</kbd></td> <td style="text-align: left;">Mettre en gras</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>I</kbd></td> <td style="text-align: left;">Mettre en italique</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>T</kbd></td> <td style="text-align: left;">Mettre en titre</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>L</kbd></td> <td style="text-align: left;">Transformer en lien</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> <td style="text-align: left;">Insérer un fichier ou une image</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>P</kbd></td> <td style="text-align: left;">Prévisualiser</td> </tr> <tr> <td style="text-align: left;"><kbd>Ctrl</kbd> + <kbd>S</kbd></td> <td style="text-align: left;">Enregistrer</td> </tr> <tr> <td style="text-align: left;"><kbd>F11</kbd></td> <td style="text-align: left;">Activer ou désactiver l'édition plein écran</td> </tr> <tr> <td style="text-align: left;"><kbd>F1</kbd></td> <td style="text-align: left;">Afficher l'aide</td> </tr> <tr> <td style="text-align: left;"><kbd>Echap</kbd></td> <td style="text-align: left;">Prévisualiser (rappuyer pour revenir à l'édition)</td> </tr> </tbody> </table> <p>Depuis l'aide, la prévisualisation ou l'insertion de fichier :</p> <table> <thead> <tr> <th style="text-align: left;">Raccourci</th> <th style="text-align: left;">Action</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;"><kbd>Echap</kbd></td> <td style="text-align: left;">Fermer et revenir à l'édition</td> </tr> </tbody> </table></div></body></html> |
Added src/www/admin/static/doc/web.html version [a9724ebf0e].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <!DOCTYPE html> <html> <head> <title>/home/bohwaz/fossil/garradin.stable/tools/../doc/admin/web.md</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content"><div class="nav"> <ul> <li><a href="brindille.html">Documentation Brindille</a></li> <li><a href="brindille_functions.html">Fonctions</a></li> <li><a href="brindille_sections.html">Sections</a></li> <li><a href="brindille_modifiers.html">Filtres</a></li> </ul> </div> <h1 id="les-squelettes-du-site-web">Les squelettes du site web</h1> <p>Les squelettes sont un ensemble de fichiers (code <em>Brindille</em>, CSS, etc.) qui permettent de modéliser l'apparence du site web selon ses préférences et besoins.</p> <p>La syntaxe utilisée dans les squelettes s'appelle <strong>Brindille</strong>.</p> <h2 id="exemples-de-sites-realises-avec-paheko">Exemples de sites réalisés avec Paheko</h2> <ul> <li><a href="https://asbm-mortagne.fr/" target="_blank" rel="nofollow,noreferrer">ASBM Mortagne</a></li> <li><a href="https://www.velocite63.fr/" target="_blank" rel="nofollow,noreferrer">Vélocité 63</a></li> <li><a href="https://larustine.org/" target="_blank" rel="nofollow,noreferrer">La rustine, Dijon</a></li> <li><a href="https://tauto-ecole.net/" target="_blank" rel="nofollow,noreferrer">Tauto école</a> <a href="https://gitlab.com/noizette/squelettes-garradin-tauto-ecole/" target="_blank" rel="nofollow,noreferrer">(les squelettes sont disponibles ici)</a></li> <li><a href="https://boiteavelos.chenove.net/" target="_blank" rel="nofollow,noreferrer">La boîte à vélos</a></li> <li><a href="https://jardindubonpasteur.fr" target="_blank" rel="nofollow,noreferrer">Jardin du bon pasteur</a></li> </ul> <h2 id="fonctionnement-des-squelettes">Fonctionnement des squelettes</h2> <p>Par défaut sont fournis plusieurs squelettes qui permettent d'avoir un site web basique mais fonctionnel : page d'accueil, menu avec les catégories de premier niveau, et pour afficher les pages, les catégories, les fichiers joints et images. Il y a également un squelette <code>atom.xml</code> permettant aux visiteurs d'accéder aux dernières pages publiées.</p> <p>Les squelettes peuvent être modifiés via l'onglet <strong>Configuration</strong> de la section <strong>Site web</strong> du menu principal.</p> <p>Une fois un squelette modifié, il apparaît dans la liste comme étant modifié, sinon il apparaît comme <em>défaut</em>. Si vous avez commis une erreur, il est possible de restaurer le squelette d'origine.</p> <p>Dans la gestion des squelettes, seuls les fichiers ayant une des extensions <code>tpl, btpl, html, htm, b, skel, xml</code> seront traités par Brindille. De même, les fichiers qui n'ont pas d'extension seront également traités par Brindille.</p> <p>Les autres types de fichiers seront renvoyés sans traitement, comme des fichiers "bruts". En d'autres termes, il n'est pas possible de mettre du code <em>Brindille</em> dans des fichiers non-texte.</p> <p>Ainsi, nous appelons ici <em>squelette</em> tout fichier situé dans l'onglet <strong>Configuration</strong>, mais seuls les fichiers traités par Brindille sont de "vrais" squelettes au sens code exécutable par <em>Brindille</em>. Les autres ne sont pas traités ni exécutés : ils ne peuvent pas contenir de code Brindille.</p> <h3 id="adresses-des-pages-du-site">Adresses des pages du site</h3> <p>Les squelettes sont appelés en fonction des règles suivantes (dans l'ordre) :</p> <table> <thead> <tr> <th>Adresse</th> <th>Squelette appelé</th> </tr> </thead> <tbody> <tr> <td><code>/</code> (racine du site)</td> <td><code>index.html</code></td> </tr> <tr> <td>Toute autre adresse se terminant par un slash <code>/</code></td> <td><code>category.html</code></td> </tr> <tr> <td>Toute autre adresse, si un article existe avec cette URI</td> <td><code>article.html</code></td> </tr> <tr> <td>Toute autre adresse, si un squelette du même nom existe</td> <td>Squelettes du même nom</td> </tr> </tbody> </table> <p>Ainsi l'adresse <code>https://monsite.paheko.cloud/Actualite/</code> appellera le squelette <code>category.html</code>, mais l'adresse <code>https://monsite.paheko.cloud/Actualite</code> (sans slash à la fin) appellera le squelette <code>article.html</code> si un article avec l'URI <code>Actualite</code> existe. Sinon si un squelette <code>Actualite</code> (sans extension) existe, c'est lui qui sera appelé.</p> <p>Autre exemple : <code>https://monsite.paheko.cloud/atom.xml</code> appellera le squelette <code>atom.xml</code> vu qu'il existe.</p> <p>Ceci vous permet de créer de nouvelles pages dynamiques sur le site, par exemple pour notre atelier vélo nous avons une page <code>https://larustine.org/velos</code> qui appelle le squelette <code>velos</code> (sans extension), qui va afficher la liste des vélos actuellement en stock dans notre hangar.</p> <p>Le type de fichier étant déterminé selon l'extension (<code>.html, .css, etc.</code>) pour les fichiers traités par Brindille, un fichier sans extension sera considéré comme un fichier texte par le navigateur. Si on veut que le squelette <code>velos</code> (sans extension) s'affiche comme du HTML il faut forcer le type en mettant le code <code>{{:http type="text/html"}}</code> au début du squelette (première ligne).</p> <h3 id="squelette-content-css">Squelette content.css</h3> <p>Ce fichier est particulier, car il définit le style du contenu des pages et des catégories. Ainsi il est également utilisé quand vous éditez un contenu dans l'administration. Donc si vous souhaitez modifier le style d'un élément du texte, il vaux mieux modifier ce fichier, sinon le rendu sera différent entre l'administration et le site public.</p></div></body></html> |
Modified tools/doc_md_to_html.php from [10ce75c29a] to [2ee0a11c27].
1 2 | <?php | > > | > > | > | > > > > > > > > > > > > > > > > > > > > > < > > > > > > > | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <?php use KD2\HTML\Markdown; use KD2\HTML\Markdown_Extensions; require_once __DIR__ . '/../src/include/lib/KD2/HTML/Markdown.php'; require_once __DIR__ . '/../src/include/lib/KD2/HTML/Markdown_Extensions.php'; $md = new Markdown; // Allow extra tags for Markdown quickref $extra_tags = [ 'blockquote' => null, 'pre' => null, 'br' => null, 'h1' => null, 'h2' => null, 'h3' => null, 'h4' => null, 'h5' => null, 'h6' => null, 'ul' => null, 'ol' => null, 'li' => null, 'table' => null, 'thead' => null, 'tbody' => null, 'tr' => null, 'th' => null, 'td' => null, 'hr' => null, 'div' => ['style'], ]; Markdown_Extensions::register($md); foreach (glob(__DIR__ . '/../doc/admin/*.md') as $file) { if (basename($file) == 'markdown_quickref.md') { $md->allowed_inline_tags = array_merge($md->allowed_inline_tags, $extra_tags); } else { $md->allowed_inline_tags = $md::DEFAULT_INLINE_TAGS; } $t = $md->text(file_get_contents($file)); $title = $r->toc[0]['label'] ?? $file; $out = '<!DOCTYPE html> <html> <head> <title>' . htmlspecialchars($title) . '</title> <meta charset="utf-8" /> <style type="text/css"> body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif; padding: .8em; background: #eee; } .web-content .nav ul { list-style-type: none; margin: -.8em; margin-bottom: 1em; padding: 1em; background: #ddd; border-bottom: 1px solid #999; text-align: center; } .web-content .boutons ul { list-style-type: none; background: #ccc; padding: .5em; margin: 0; } .web-content .nav li, .web-content .boutons li { display: inline-block; margin: 0 1em; } .web-content .nav a, .web-content .boutons a { display: inline-block; background: #fff; color: darkblue; border-radius: .2em; padding: .3em .5em; font-size: 1.2em; } .web-content .nav strong a { color: darkred; box-shadow: 0px 0px 5px orange; } </style> <link rel="stylesheet" type="text/css" href="../../../content.css" /> </head> <body><div class="web-content">' . $t . '</div></body></html>'; $dest = __DIR__ . '/../src/www/admin/static/doc/' . str_replace('.md', '.html', basename($file)); file_put_contents($dest, $out); } |