Overview
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: 1df78679bef8f9a50021c6aa3e557c5fb53b278a5454c0bedc6fe9b5574f47e7
User & Date: bohwaz on 2023-03-11 19:01:33
Other Links: manifest | tags
Context
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
Changes

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&lt;br /&gt;ça va ?</code>. Sans indiquer le filtre <code>escape</code> le résultat serait <code>Coucou&amp;lt;br /&amp;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"}}
  &lt;h1&gt;{{$title}}&lt;/h1&gt;
    {{#images parent=$path limit=1}}
      &lt;img src="{{$thumb_url}}" alt="{{$title}}" /&gt;
    {{/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"}}
  &lt;h1&gt;{{$title}}&lt;/h1&gt;
    {{#images parent=$path limit=1}}
      &lt;a href="{{$url}}"&gt;&lt;img src="{{$thumb_url}}" alt="{{$title}}" /&gt;&lt;/a&gt;
    {{/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" &gt; 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}}
    &lt;h1&gt;{{$title}}&lt;/h1&gt;
{{/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}}
    &lt;h1&gt;{{$title}}&lt;/h1&gt;

    {{#articles parent=$path order="published DESC" limit="10"}}
        &lt;h2&gt;&lt;a href="{{$url}}"&gt;{{$title}}&lt;/a&gt;&lt;/h2&gt;
        &lt;p&gt;{{$content|truncate:600:"..."}}&lt;/p&gt;
    {{else}}
        &lt;p&gt;Aucun article trouvé.&lt;/p&gt;
    {{/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}}
&lt;script&gt;
// Ceci ne sera pas interprété
function test (a) {{
}}
&lt;/script&gt;
{{/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"] =&gt; 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"}}
=&gt; 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 *}}
&lt;h1&gt;{{$title}}&lt;/h1&gt;
{{:assign nav="Accueil &gt; %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}}
&lt;p class="alert"&gt;L'adresse e-mail indiquée est invalide.&lt;/p&gt;
{{elseif $_POST.antispam != 42}}
&lt;p class="alert"&gt;La réponse permettant de savoir si vous êtes un robot a échoué. Vous êtes donc un robot ?&lt;/p&gt;
{{elseif $_POST.message|trim == ''}}
&lt;p class="alert"&gt;Le message est vide&lt;/p&gt;
{{elseif $_POST.send}}
{{:mail to=$config.org_email subject="Formulaire de contact" body="%s a écrit : %s"|args:$_POST.email:$_POST.message}}
&lt;p class="ok"&gt;Votre message nous a bien été transmis !&lt;/p&gt;
{{/if}}

&lt;form method="post" action=""&gt;
&lt;dl&gt;
  &lt;dt&gt;&lt;label&gt;Votre e-mail : &lt;input type="email" required name="email" /&gt;&lt;/label&gt;&lt;/dt&gt;
  &lt;dt&gt;&lt;label&gt;Votre message : &lt;textarea required name="message" cols="50" rows="5"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/dt&gt;
  &lt;dt&gt;&lt;label&gt;Merci d'écrire "quarante-deux" en chiffres pour confirmer que vous n'êtes pas un robot : &lt;input type="text" name="antispam" required /&gt;&lt;/label&gt;&lt;/dt&gt;
&lt;/dl&gt;
&lt;p&gt;&lt;input type="submit" name="send" value="Envoyer !" /&gt;&lt;/p&gt;
&lt;/form&gt;</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>&lt;p&gt;...&lt;/p&gt;</code>.</p>
<p>Équivalent de :</p>
<pre><code>&lt;p&gt;{{$html|strip_tags|truncate:600|nl2br}}&lt;/p&gt;</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>{{"&lt;b&gt;Test"}} = &amp;lt;b&amp;gt;Test
{{"&lt;b&gt;Test"|raw}} = &lt;b&gt;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>&amp;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}}
&lt;p class="alert"&gt;L'adresse e-mail indiquée est invalide.&lt;/p&gt;
{{/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&#039;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}}
&amp;rarr; &lt;a href="{{ $url }}"&gt;{{ $title }}&lt;/a&gt;&lt;br /&gt;
{{/breadcrumbs}}</code></pre></div></body></html>

Deleted src/www/admin/static/doc/extensions.html version [2410759427].

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
<!DOCTYPE html>
	<html>
	<head>
		<title>Extensions Paheko</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;
		}
		</style>
		<link rel="stylesheet" type="text/css" href="../../../content.css" />
	</head>
	<body><div class="web-content"><p><a href="keyboard.html">Raccourcis claviers</a> | <a href="markdown.html">Syntaxe MarkDown</a> | <a href="skriv.html">Syntaxe Skriv</a></p><aside class="toc">
	<ol>
		<li><a href="#extensions-paheko">Extensions Paheko</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></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="extensions-paheko">Extensions Paheko</h1>
<p>Paheko propose des extensions qui s'appliquent aux textes rédigés en MarkDown et en SkrivML.</p>
<p>Toutes ces extensions se présentent sous la forme d'un code situé entre deux signes <strong>inférieur à</strong> (<code>&lt;&lt;</code>) et deux signes <strong>supérieur à</strong> (<code>&gt;&gt;</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>&lt;&lt;image|Nom_fichier.jpg|Alignement|Légende&gt;&gt;</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>&lt;&lt;image|mon_image.png|center|Ceci est une belle image&gt;&gt;</code></pre>
<p>Il est aussi possible d'utiliser la syntaxe avec des paramètres nommés :</p>
<pre><code>&lt;&lt;image file="Nom_fichier.jpg" align="center" caption="Légende"&gt;&gt;</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>&lt;&lt;file|Nom_fichier.ext|Libellé&gt;&gt;</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 texte <code>&lt;&lt;toc&gt;&gt;</code> au début d'un texte pour générer un sommaire automatiquement à partir des titres et sous-titres :</p>
<pre><code>&lt;&lt;toc&gt;&gt;</code></pre>
<p>Affichera un sommaire comme celui-ci :</p><div class="toc">
	<ol>
		<li><a href="#extensions-paheko">Extensions Paheko</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></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>&lt;&lt;toc level=1&gt;&gt;</code></pre>
<p>N'affichera que les titres de niveau 1, comme ceci :</p><div class="toc">
	<ol>
		<li><a href="#extensions-paheko">Extensions Paheko</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>&lt;&lt;toc level=1 aside&gt;&gt;</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>&lt;&lt;grid&gt;&gt;...Contenu...&lt;&lt;/grid&gt;&gt;</code>.</p>
<p>Attention, les blocs <code>&lt;&lt;grid&gt;&gt;</code> et <code>&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !!&gt;&gt;</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>&lt;&lt;grid&gt;&gt;</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>&lt;&lt;grid&gt;&gt;</code> vide (aucun paramètre) sur une ligne.</p>
<p>Enfin on termine en fermant la grille avec un block <code>&lt;&lt;/grid&gt;&gt;</code>. Voici un exemple complet :</p>
<pre><code>&lt;&lt;grid !!!&gt;&gt;
Col. 1
&lt;&lt;grid&gt;&gt;
Col. 2
&lt;&lt;grid&gt;&gt;
Col. 3
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !##!&gt;&gt;
Col. 1
&lt;&lt;grid&gt;&gt;
Colonne 2 large
&lt;&lt;grid&gt;&gt;
Col. 3
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !!&gt;&gt;
L1 C1
&lt;&lt;grid&gt;&gt;
L1 C2
&lt;&lt;grid&gt;&gt;
L2 C1
&lt;&lt;grid&gt;&gt;
L2 C2
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid short="#!!" column="span 2"&gt;&gt;
A
&lt;&lt;grid row="span 2"&gt;&gt;
B
&lt;&lt;grid&gt;&gt;
C
&lt;&lt;grid&gt;&gt;
D
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;center&gt;&gt;</code> pour centrer du texte :</p>
<pre><code>&lt;&lt;center&gt;&gt;
Texte centré
&lt;&lt;/center&gt;&gt;</code></pre>
<p>On peut procéder de même avec <code>&lt;&lt;left&gt;&gt;</code> et <code>&lt;&lt;right&gt;&gt;</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>&lt;&lt;color COULEUR&gt;&gt;...texte...&lt;&lt;/color&gt;&gt;</code> pour changer la couleur du texte, ou <code>&lt;&lt;bgcolor COULEUR&gt;&gt;...texte...&lt;&lt;/bgcolor&gt;&gt;</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>&lt;&lt;color red&gt;&gt;Rouge !&lt;&lt;/color&gt;&gt;
&lt;&lt;bgcolor yellow&gt;&gt;Fond jaune pétant !&lt;&lt;/bgcolor&gt;&gt;
&lt;&lt;color cyan green salmon&gt;&gt;Dégradé de texte !&lt;&lt;/color&gt;&gt;
&lt;&lt;bgcolor chocolate khaki orange&gt;&gt;Dégradé du fond&lt;&lt;/bgcolor&gt;&gt;

&lt;&lt;bgcolor darkolivegreen darkseagreen &gt;&gt;
&lt;&lt;color darkred&gt;&gt;

## Il est aussi possible de faire des blocs colorés

Avec des paragraphes

&gt; Et citations

&lt;&lt;/color&gt;&gt;
&lt;&lt;/bgcolor&gt;&gt;</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>
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<




















































































































































































































































































































































Modified src/www/admin/static/doc/keyboard.html from [96dc292307] to [b80e4ec015].

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
<!DOCTYPE html>
	<html>
	<head>
		<title>Raccourcis clavier</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;
		}































		</style>
		<link rel="stylesheet" type="text/css" href="../../../content.css" />
	</head>
	<body><div class="web-content"><p><a href="markdown.html">Syntaxe MarkDown</a> | <a href="skriv.html">Syntaxe Skriv</a></p>






<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>



|











>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



|
>
>
>
>
>
>

|







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
72
73
74
75
76
77
78
79
</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>







|







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
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
<!DOCTYPE html>
	<html>
	<head>
		<title>Syntaxe MarkDown</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;
		}































		</style>
		<link rel="stylesheet" type="text/css" href="../../../content.css" />
	</head>
	<body><div class="web-content"><p><a href="keyboard.html">Raccourcis claviers</a> | <a href="extensions.html">Extensions Paheko</a></p><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="#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>
</ol></li>
		<li><a href="#extensions-paheko">Extensions Paheko</a></li>
		<li><a href="#extensions-markdown">Extensions MarkDown</a>
		<ol>
			<li><a href="#surligner-un-texte">Surligner un texte</a></li>
			<li><a href="#notes-de-bas-de-page">Notes de bas de page</a></li>
			<li><a href="#sommaire-table-des-matieres-automatique">Sommaire / table des matières automatique</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>












</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="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 `&lt;html&gt;` c'est rigolo !</code></pre>
<blockquote>
<p>Le code <code>&lt;html&gt;</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>





















<h3 id="citations">Citations</h3>
<p>Les citations se font en ajoutant le signe <em>supérieur à</em> (<code>&gt;</code>) au début de la ligne :</p>
<pre><code>&gt; 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>```
&lt;html&gt;...&lt;/html&gt;
```</code></pre>
<p>Résultat :</p>
<pre><code>&lt;html&gt;...&lt;/html&gt;</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>



|











>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



|
>
>
>
>
>
>









>















<
<
<
<
<

<




>
>
>
>
>
>
>
>
>
>
>
>





|

|

|


|





|





|




>
>
>
>
>
>

|


|


|
|








|

|

|

|

|



|



|















|









|
















|








>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

|





|



|







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 `&lt;html&gt;` c'est rigolo !</code></pre>
<blockquote>
<p>Le code <code>&lt;html&gt;</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>&gt;</code>) au début de la ligne :</p>
<pre><code>&gt; 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>```
&lt;html&gt;...&lt;/html&gt;
```</code></pre>
<p>Résultat :</p>
<pre><code>&lt;html&gt;...&lt;/html&gt;</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
202
203
204
205
206
207
208
209
<tbody>
<tr>
<td>AB</td>
<td>CD</td>
</tr>
</tbody>
</table>
<p>Par défaut les colonnes sont centrées. On peut aussi choisir l'alignement des colonnes à 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>







|







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
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
<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>&lt;!-- Ceci est un commentaire --&gt;</code></pre>
<h1 id="extensions-paheko">Extensions Paheko</h1>
<p>Paheko propose des extensions permettant :</p>
<ul>
<li>d'insérer des images et fichiers joints ;</li>
<li>d'insérer une table des matières automatique ;</li>
<li>d'aligner le texte au centre, à gauche, à droite ;</li>
<li>de créer des mises en page complexes avec des colonnes et grilles ;</li>
<li>de changer la couleur du texte ou du fond.</li>
</ul>
<p><a href="extensions.html">Cliquer ici pour lire la documentation des extensions Paheko</a></p>
<h1 id="extensions-markdown">Extensions MarkDown</h1>
<h2 id="surligner-un-texte">Surligner un texte</h2>
<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>
<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="sommaire-table-des-matieres-automatique">Sommaire / table des matières automatique</h2>
<p>En plus de la syntaxe <code>&lt;&lt;toc&gt;&gt;</code> documentée dans les extensions communes, 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>
<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="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>&lt;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"&gt;&lt;/iframe&gt;</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>&lt;h2 id="titre2" class="text-center"&gt;Titre de niveau 2&lt;/h2&gt;</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

&gt; Citation
}}}</code></pre>
<p>Créera le code HTML suivant :</p>
<pre><code>&lt;div class="custom-quote custom-block"&gt;

    &lt;p&gt;Paragraphe&lt;/p&gt;

    &lt;blockquote&gt;&lt;p&gt;Citation&lt;/p&gt;&lt;/blockquote&gt;
&lt;/div&gt;</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>







|

|


|

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<






|




<
<
<
<


|

|


|

|


|






|







|







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>&lt;!-- Ceci est un commentaire --&gt;</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>&lt;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"&gt;&lt;/iframe&gt;</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>&lt;h2 id="titre2" class="text-center"&gt;Titre de niveau 2&lt;/h2&gt;</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

&gt; Citation
}}}</code></pre>
<p>Créera le code HTML suivant :</p>
<pre><code>&lt;div class="custom-quote custom-block"&gt;

    &lt;p&gt;Paragraphe&lt;/p&gt;

    &lt;blockquote&gt;&lt;p&gt;Citation&lt;/p&gt;&lt;/blockquote&gt;
&lt;/div&gt;</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
363




















































































































































































<tr>
<td style="text-align: left;"><code>&lt;video&gt;</code></td>
<td style="text-align: left;">Insérer une vidéo dans la page</td>
<td style="text-align: left;"><code>&lt;video src="mon_fichier.webm"&gt;</code></td>
</tr>
</tbody>
</table>
<p>Mais leurs possibilités sont limitées, notamment sur les attributs autorisés.</p></div></body></html>



























































































































































































|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
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>&lt;video&gt;</code></td>
<td style="text-align: left;">Insérer une vidéo dans la page</td>
<td style="text-align: left;"><code>&lt;video src="mon_fichier.webm"&gt;</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>&lt;&lt;</code>) et deux signes <strong>supérieur à</strong> (<code>&gt;&gt;</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>&lt;&lt;image|Nom_fichier.jpg|Alignement|Légende&gt;&gt;</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>&lt;&lt;image|mon_image.png|center|Ceci est une belle image&gt;&gt;</code></pre>
<p>Il est aussi possible d'utiliser la syntaxe avec des paramètres nommés :</p>
<pre><code>&lt;&lt;image file="Nom_fichier.jpg" align="center" caption="Légende"&gt;&gt;</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>&lt;&lt;file|Nom_fichier.ext|Libellé&gt;&gt;</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>&lt;&lt;toc&gt;&gt;</code> pour générer un sommaire automatiquement à partir des titres et sous-titres :</p>
<pre><code>&lt;&lt;toc&gt;&gt;</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>&lt;&lt;toc level=1&gt;&gt;</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>&lt;&lt;toc level=1 aside&gt;&gt;</code></pre>
<p>Note : en plus de la syntaxe <code>&lt;&lt;toc&gt;&gt;</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>&lt;&lt;grid&gt;&gt;...Contenu...&lt;&lt;/grid&gt;&gt;</code>.</p>
<p>Attention, les blocs <code>&lt;&lt;grid&gt;&gt;</code> et <code>&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !!&gt;&gt;</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>&lt;&lt;grid&gt;&gt;</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>&lt;&lt;grid&gt;&gt;</code> vide (aucun paramètre) sur une ligne.</p>
<p>Enfin on termine en fermant la grille avec un block <code>&lt;&lt;/grid&gt;&gt;</code>. Voici un exemple complet :</p>
<pre><code>&lt;&lt;grid !!!&gt;&gt;
Col. 1
&lt;&lt;grid&gt;&gt;
Col. 2
&lt;&lt;grid&gt;&gt;
Col. 3
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !##!&gt;&gt;
Col. 1
&lt;&lt;grid&gt;&gt;
Colonne 2 large
&lt;&lt;grid&gt;&gt;
Col. 3
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid !!&gt;&gt;
L1 C1
&lt;&lt;grid&gt;&gt;
L1 C2
&lt;&lt;grid&gt;&gt;
L2 C1
&lt;&lt;grid&gt;&gt;
L2 C2
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;grid short="#!!" column="span 2"&gt;&gt;
A
&lt;&lt;grid row="span 2"&gt;&gt;
B
&lt;&lt;grid&gt;&gt;
C
&lt;&lt;grid&gt;&gt;
D
&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;center&gt;&gt;</code> pour centrer du texte :</p>
<pre><code>&lt;&lt;center&gt;&gt;
Texte centré
&lt;&lt;/center&gt;&gt;</code></pre>
<p>On peut procéder de même avec <code>&lt;&lt;left&gt;&gt;</code> et <code>&lt;&lt;right&gt;&gt;</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>&lt;&lt;color COULEUR&gt;&gt;...texte...&lt;&lt;/color&gt;&gt;</code> pour changer la couleur du texte, ou <code>&lt;&lt;bgcolor COULEUR&gt;&gt;...texte...&lt;&lt;/bgcolor&gt;&gt;</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>&lt;&lt;color red&gt;&gt;Rouge !&lt;&lt;/color&gt;&gt;
&lt;&lt;bgcolor yellow&gt;&gt;Fond jaune pétant !&lt;&lt;/bgcolor&gt;&gt;
&lt;&lt;color cyan green salmon&gt;&gt;Dégradé de texte !&lt;&lt;/color&gt;&gt;
&lt;&lt;bgcolor chocolate khaki orange&gt;&gt;Dégradé du fond&lt;&lt;/bgcolor&gt;&gt;

&lt;&lt;bgcolor darkolivegreen darkseagreen &gt;&gt;
&lt;&lt;color darkred&gt;&gt;

## Il est aussi possible de faire des blocs colorés

Avec des paragraphes

&gt; Et citations

&lt;&lt;/color&gt;&gt;
&lt;&lt;/bgcolor&gt;&gt;</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>&gt; Citation<br>&gt; 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>&lt;&lt;toc&gt;&gt;</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>&lt;&lt;image|nom_image.jpg|center|Légende&gt;&gt;</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>&lt;&lt;file|nom_fichier.pdf|Libellé&gt;&gt;</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>&lt;&lt;grid !!&gt;&gt;<br>Colonne 1<br><br>&lt;&lt;grid&gt;&gt;<br>Colonne 2<br><br>&lt;&lt;/grid&gt;&gt;</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>&lt;&lt;center&gt;&gt;Centre&lt;&lt;/center&gt;&gt;</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>&lt;&lt;right&gt;&gt;Droite&lt;&lt;/right&gt;&gt;</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>&lt;&lt;color red&gt;&gt;Rouge&lt;&lt;/color&gt;&gt;</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>&lt;&lt;bgcolor green&gt;&gt;Vert&lt;&lt;/color&gt;&gt;</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>&lt;&lt;color orange cyan&gt;&gt;Orange à cyan&lt;&lt;/color&gt;&gt;</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>&lt;&lt;bgcolor orange cyan&gt;&gt;Orange à cyan&lt;&lt;/color&gt;&gt;</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>&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt;</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>&lt;samp&gt;Exemple&lt;/samp&gt;</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>&lt;var&gt;ab&lt;/var&gt; + &lt;var&gt;cd&lt;/var&gt; = 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>&lt;del&gt;supprimé&lt;/del&gt;</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>&lt;ins&gt;ajouté&lt;/ins&gt;</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&lt;sup&gt;exposant&lt;/sup&gt;</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&lt;sub&gt;indice&lt;/sub&gt;</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
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
<!DOCTYPE html>
	<html>
	<head>
		<title>Syntaxe SkrivML</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;
		}































		</style>
		<link rel="stylesheet" type="text/css" href="../../../content.css" />
	</head>
	<body><div class="web-content"><p><a href="keyboard.html">Raccourcis claviers</a> | <a href="extensions.html">Extensions Paheko</a></p><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-paheko">Extensions Paheko</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>
<p>Celle-ci est plus intuitive que la syntaxe MarkDown.</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>



|











>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



|










|
>
>
>
>
>


<







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
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
</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 de <a href="https://fossil.kd2.org/garradin/doc/trunk/doc/skrivml.html" target="_blank" rel="nofollow,noreferrer">SkrivML</a>.</p>
<h1 id="extensions-paheko">Extensions Paheko</h1>
<p>Paheko propose des extensions permettant :</p>



<ul>
<li>d'insérer des images et fichiers joints ;</li>
<li>d'insérer une table des matières automatique ;</li>
<li>d'aligner le texte au centre, à gauche, à droite ;</li>




<li>de créer des mises en page complexes avec des colonnes et grilles ;</li>
<li>de changer la couleur du texte ou du fond.</li>
</ul>














































































<p><a href="extensions.html">Cliquer ici pour lire la documentation des extensions Paheko</a></p></div></body></html>







|











|





|






|

|






|
|
|
>
>
>

|
<
|
>
>
>
>
|
|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
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>&lt;&lt;</code>) et deux signes <strong>supérieur à</strong> (<code>&gt;&gt;</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>&lt;&lt;image|Nom_fichier.jpg|Alignement|Légende&gt;&gt;</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>&lt;&lt;image|mon_image.png|center|Ceci est une belle image&gt;&gt;</code></pre>
<p>Il est aussi possible d'utiliser la syntaxe avec des paramètres nommés :</p>
<pre><code>&lt;&lt;image file="Nom_fichier.jpg" align="center" caption="Légende"&gt;&gt;</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>&lt;&lt;file|Nom_fichier.ext|Libellé&gt;&gt;</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


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
<?php



namespace Garradin;



use Garradin\Web\Render\Markdown;


const INSTALL_PROCESS = true;






















require __DIR__ . '/../src/include/init.php';


foreach (glob(__DIR__ . '/../doc/admin/*.md') as $file) {






	$r = new Markdown;
	$t = $r->render(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;
		}































		</style>
		<link rel="stylesheet" type="text/css" href="../../../content.css" />
	</head>
	<body>' . $t . '</body></html>';

	$dest = __DIR__ . '/../src/www/admin/static/doc/' . str_replace('.md', '.html', basename($file));
	file_put_contents($dest, $out);
}


>
>
|
>
>

|

>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

<
>


>
>
>
>
>
>
|
|


















>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



|




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);
}