128 lines
6.4 KiB
HTML
128 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exemple d'article — toutes les fonctionnalités</title>
|
|
<script src="/static/theme.js"></script>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link id="hl-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
|
<link id="hl-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" media="not all">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" defer></script>
|
|
<script>document.addEventListener("DOMContentLoaded", () => hljs.highlightAll())</script>
|
|
</head>
|
|
<body>
|
|
<nav class="site-nav"><div class="container nav-container"><a href="/" class="site-logo">Sébastien QUEROL</a><div class="nav-links"><ul><li><a href="/" class="internal">Accueil</a></li><li><a href="/racine/a-propos/" class="internal">A propos</a></li></ul></div><button class="theme-toggle" id="theme-toggle" aria-label="Basculer le thème">☾</button></div></nav>
|
|
<div class="site-tagline"><div class="container"><p>Le blog d'un SysAdmin</p></div></div>
|
|
<div class="tagline-divider-wrap"><div class="container"><hr class="tagline-divider"></div></div>
|
|
<main class="site-content">
|
|
<div class="container">
|
|
<div class="article-meta"><h1 class="article-title">Exemple d'article — toutes les fonctionnalités</h1><div class="article-info"><span class="article-date">01/01/2026</span> <span class="article-sep">—</span> <span class="article-author">Votre Nom</span> <span class="article-sep">—</span> <span class="article-categories">Blog</span></div></div>
|
|
<p>Ceci est un <strong>article d'exemple</strong> montrant toutes les fonctionnalités disponibles dans PageMark. Supprimez ce fichier quand vous n'en avez plus besoin.</p>
|
|
<h2 id="metadonnees">Métadonnées<a class="heading-anchor" href="#metadonnees" title="Permanent link">#</a></h2>
|
|
<p>Les métadonnées se placent en tête de fichier avec la syntaxe <code>::Clé:Valeur</code>. Elles définissent le titre, la date, l'auteur et la catégorie de l'article.</p>
|
|
<h2 id="mise-en-forme-du-texte">Mise en forme du texte<a class="heading-anchor" href="#mise-en-forme-du-texte" title="Permanent link">#</a></h2>
|
|
<p>Le texte supporte toute la syntaxe Markdown :</p>
|
|
<ul>
|
|
<li><strong>Gras</strong> avec <code>**texte**</code></li>
|
|
<li><em>Italique</em> avec <code>*texte*</code></li>
|
|
<li>~~Barré~~ avec <code>~~texte~~</code></li>
|
|
<li><code>Code inline</code> avec des backticks</li>
|
|
<li><a href="https://example.com">Lien</a> avec <code>[texte](url)</code></li>
|
|
</ul>
|
|
<h2 id="titres-et-ancres">Titres et ancres<a class="heading-anchor" href="#titres-et-ancres" title="Permanent link">#</a></h2>
|
|
<p>Les titres <code>h1</code> à <code>h4</code> génèrent automatiquement une ancre cliquable <code>#</code> au survol, permettant de créer des liens directs vers une section :</p>
|
|
<pre><code>https://monsite.com/exemple-article#images
|
|
</code></pre>
|
|
<h3 id="niveau-3">Niveau 3<a class="heading-anchor" href="#niveau-3" title="Permanent link">#</a></h3>
|
|
<h4 id="niveau-4">Niveau 4<a class="heading-anchor" href="#niveau-4" title="Permanent link">#</a></h4>
|
|
<h2 id="images">Images<a class="heading-anchor" href="#images" title="Permanent link">#</a></h2>
|
|
<p>Placez vos images dans <code>md/images/</code> et insérez-les ainsi :</p>
|
|
<pre><code class="language-markdown">
|
|
</code></pre>
|
|
<p>L'image de couverture (affichée dans les cards de la page d'accueil) se définit avec <code>::Image:/images/cover.jpg</code>.</p>
|
|
<h2 id="blocs-de-code">Blocs de code<a class="heading-anchor" href="#blocs-de-code" title="Permanent link">#</a></h2>
|
|
<p>Les blocs de code supportent la coloration syntaxique pour la plupart des langages :</p>
|
|
<pre><code class="language-python">def saluer(nom: str) -> str:
|
|
return f"Bonjour, {nom} !"
|
|
|
|
print(saluer("PageMark"))
|
|
</code></pre>
|
|
<pre><code class="language-bash"># Générer le site
|
|
python3 build.py
|
|
|
|
# Test local
|
|
python3 -m http.server 3000
|
|
</code></pre>
|
|
<pre><code class="language-javascript">document.addEventListener("DOMContentLoaded", () => {
|
|
console.log("PageMark chargé !");
|
|
});
|
|
</code></pre>
|
|
<h2 id="tableaux">Tableaux<a class="heading-anchor" href="#tableaux" title="Permanent link">#</a></h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Fonctionnalité</th>
|
|
<th>Syntaxe</th>
|
|
<th>Résultat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Titre</td>
|
|
<td><code>::Titre:Mon titre</code></td>
|
|
<td>h1 avant l'article</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date</td>
|
|
<td><code>::Date:dd/mm/YYYY</code></td>
|
|
<td>Tri chronologique</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Catégorie</td>
|
|
<td><code>::Categories:A-B</code></td>
|
|
<td>Dossier <code>a/b/</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Image couverture</td>
|
|
<td><code>::Image:/img/x.jpg</code></td>
|
|
<td>Card sur l'accueil</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="citations">Citations<a class="heading-anchor" href="#citations" title="Permanent link">#</a></h2>
|
|
<blockquote>
|
|
<p>Les blockquotes s'écrivent avec <code>></code> en début de ligne.
|
|
Elles peuvent s'étendre sur plusieurs lignes.</p>
|
|
</blockquote>
|
|
<h2 id="html-personnalise">HTML personnalisé<a class="heading-anchor" href="#html-personnalise" title="Permanent link">#</a></h2>
|
|
<p>Vous pouvez insérer du HTML directement dans le Markdown — utile pour des mises en forme avancées, des iframes, des widgets, etc.</p>
|
|
<div style="background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 1rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;">
|
|
<strong>Astuce :</strong> utilisez les variables CSS <code>var(--accent)</code>, <code>var(--bg)</code>, <code>var(--text)</code>, etc. pour que votre HTML s'adapte automatiquement au dark mode.
|
|
</div>
|
|
|
|
<h2 id="listes">Listes<a class="heading-anchor" href="#listes" title="Permanent link">#</a></h2>
|
|
<p>Liste non ordonnée :</p>
|
|
<ul>
|
|
<li>Élément A</li>
|
|
<li>Élément B</li>
|
|
<li>Sous-élément</li>
|
|
<li>Sous-élément</li>
|
|
</ul>
|
|
<p>Liste ordonnée :</p>
|
|
<ol>
|
|
<li>Première étape</li>
|
|
<li>Deuxième étape</li>
|
|
<li>Troisième étape</li>
|
|
</ol>
|
|
<p>Liste de tâches :</p>
|
|
<ul>
|
|
<li>[x] Tâche terminée</li>
|
|
<li>[ ] Tâche en cours</li>
|
|
<li>[ ] Tâche à faire</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
<footer class="site-footer"><div class="container"><p>© 2026 Sebastien QUEROL — Propulsé par <a href="https://github.com/">PageMark</a></p></div></footer>
|
|
</body>
|
|
</html> |