Documentation · Guide Éditorial & Contenu
Guide Contenu V3
Comment ajouter une page, un article, une entrée changelog, une nouvelle release. Comment modifier les traductions, la navigation, le SEO. Tout ce que tu as besoin de savoir pour faire évoluer le site sans toucher à l'architecture.
Zéro framework
HTML pur
Copier-coller ready
01
Vue d'ensemble — Règles de base
Règle 1 — Toujours depuis la racine
Tous les chemins vers les assets CSS/JS/img dans le <head> doivent être relatifs à la profondeur de la page. Une page dans blog/ utilisera ../assets/. Une page dans products/ironlock/ utilisera ../../assets/.
Règle 2 — nav + footer-placeholder
Chaque page DOIT contenir <div id="nav-placeholder"></div> en début de body et <div id="footer-placeholder"></div> avant les scripts. Sans eux, pas de navbar ni de footer.
Règle 3 — Script anti-FOUC
Chaque page DOIT avoir le script inline dans le <head> qui applique le thème avant le rendu. Sans lui, un flash blanc apparaît en thème dark.
Règle 4 — Scripts en fin de body
Toujours charger components.js AVANT main.js. main.js dépend des éléments injectés par components.js (navbar, modal search).
Règle 5 — data-theme sur html
La balise <html> doit avoir data-theme="dark" comme attribut par défaut. Cela garantit que le CSS s'affiche correctement même sans JavaScript.
Règle 6 — skip-link accessibilité
Première ligne après <body> : <a class="skip-link" href="#main-content">Aller au contenu</a>. L'élément principal doit avoir id="main-content".
02
Anatomie d'une page type
<!DOCTYPE html>
<html lang="fr" data-theme="dark"> ← data-theme OBLIGATOIRE
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Titre de la page — TRUvector</title>
<meta name="description" content="Description 150 chars max"/>
<link rel="canonical" href="https://truvector.dev/ma-page.html"/>
<meta property="og:title" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://truvector.dev/assets/img/logo.png"/>
<link rel="icon" href="[ROOT]assets/img/favicon.ico"/> ← [ROOT] = ./ ou ../ ou ../../
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono..." rel="stylesheet"/>
<link rel="stylesheet" href="[ROOT]assets/css/truvector.css"/>
<!-- Script anti-FOUC OBLIGATOIRE -->
<script>(function(){var t=localStorage.getItem('trv-theme')||(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();</script>
</head>
<body>
<a class="skip-link" href="#main-content">Aller au contenu</a> ← OBLIGATOIRE
<div id="nav-placeholder"></div> ← OBLIGATOIRE — navbar injectée ici
<div class="page-wrap" id="main-content"> ← id="main-content" pour skip-link
<!-- Hero de la page -->
<div class="hero" style="padding-top:70px;padding-bottom:50px">
<div class="hero-tag">Catégorie · Sous-catégorie</div>
<h1>Titre <span class="c">Coloré</span></h1>
<p class="hero-sub">Sous-titre descriptif.</p>
</div>
<!-- Sections de contenu -->
<section>
<div class="sec-header">
<span class="sec-num">01</span>
<h2 class="sec-title">Titre de section</h2>
</div>
<!-- contenu -->
</section>
</div>
<div id="footer-placeholder"></div> ← OBLIGATOIRE
<script src="[ROOT]assets/js/components.js"></script> ← components.js EN PREMIER
<script src="[ROOT]assets/js/main.js"></script>
</body></html>
03
Créer une nouvelle page
1
Choisir l'emplacement et calculer le ROOT
| Emplacement | ROOT à utiliser |
|---|---|
| Racine : /ma-page.html | ./ |
| Section : /blog/mon-article.html | ../ |
| Sous-section : /products/ironlock/page.html | ../../ |
2
Copier le template de page
Copier
about.html (page la plus simple) et remplacer tous les ./ par votre ROOT si nécessaire.3
Mettre à jour le <head>
Modifier : title, meta description, canonical (URL absolue), og:title, og:description. Garder og:image avec l'URL absolue du logo.
4
Ajouter au sitemap.xml
<url>
<loc>https://truvector.dev/ma-page.html</loc>
<lastmod>2026-05-16</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
5
Ajouter à l'index de recherche
Dans
assets/js/components.js, section searchIndex, ajouter une entrée. Voir section Index de recherche.6
Tester localement
Vérifier : logo visible, navbar visible, thème dark et light, lien actif correct dans la navbar, footer visible.
04
Ajouter un article de blog
💡
Le template complet est
blog/proteger-python-reverse-engineering.html — copier-coller ce fichier et adapter le contenu.1 — Créer le fichier article
Nom du fichier : blog/mon-sujet-en-tirets.html
URL résultante : https://truvector.dev/blog/mon-sujet-en-tirets.html
ROOT à utiliser : ../
2 — Mettre à jour le head de l'article
<title>Titre de l'article — TRUvector</title>
<meta name="description" content="Description 150 chars"/>
<link rel="canonical" href="https://truvector.dev/blog/mon-sujet.html"/>
<meta property="og:type" content="article"/> ← "article" et non "website"
<script type="application/ld+json">
{
"@type": "Article",
"headline": "Titre de l'article",
"author": {"@type": "Person", "name": "Tristan Ruard"},
"datePublished": "2026-05-16"
}
</script>
3 — Ajouter la carte sur blog/index.html
<!-- Dans blog/index.html, dans la div#blog-grid -->
<article class="blog-card reveal" data-tags="security python">
<!-- data-tags : "security" | "crypto" | "python" | "licensing" -->
<div class="blog-card-thumb" style="background:linear-gradient(...)">
<span class="blog-card-thumb-icon">🛡️</span>
</div>
<div class="blog-card-body">
<div class="blog-card-meta">
<span class="blog-tag b-o">Sécurité</span>
<span class="blog-date">Mai 2026</span>
<span class="blog-read-time">8 min</span>
</div>
<h2 class="blog-card-title">Titre de l'article</h2>
<p class="blog-card-excerpt">Description courte...</p>
</div>
<div class="blog-card-footer">
<a href="mon-sujet.html">Lire l'article →</a>
</div>
</article>
4 — Ajouter à l'index de recherche et au sitemap
Dans assets/js/components.js ajouter une entrée dans searchIndex. Dans sitemap.xml ajouter l'URL avec priorité 0.75.
⚠
Ne jamais mettre de guillemets simples ou apostrophes directes dans les chaînes de
searchIndex. Utiliser \u2019 pour '.
05
Ajouter une entrée changelog
Dans products/ironlock/changelog.html, les versions sont listées de la plus récente à la plus ancienne. Ajouter une nouvelle version en haut de la div.changelog.
<div class="changelog-entry reveal">
<div>
<div class="changelog-ver">v2.1</div>
<div class="changelog-date">Juin 2026</div>
<div style="margin-top:8px"><span class="prod-status status-stable">● Stable</span></div>
</div>
<div class="changelog-items">
<h3>Titre de la release</h3>
<!-- Types disponibles : ci-add (vert) | ci-fix (orange) | ci-imp (bleu) | ci-brk (rouge) -->
<div class="changelog-item">
<span class="ci-type ci-add">+</span>
<span><span>
</div>
<div class="changelog-item">
<span class="ci-type ci-fix">⚡</span>
<span>Correctif — description.</span>
</div>
<div class="changelog-item">
<span class="ci-type ci-brk">⚠</span>
<span><strong>RUPTURE</strong> — Changement incompatible.</span>
</div>
</div>
</div>
06
Publier une nouvelle release
1
Uploader les fichiers
Uploader les binaires sur GitHub Releases ou Cloudflare R2. Récupérer les URLs directes de téléchargement.
2
Calculer les SHA-256
# Linux/macOS
sha256sum ironlock-v2.1-windows-x64.zip
# Windows PowerShell
Get-FileHash ironlock-v2.1-windows-x64.zip -Algorithm SHA256
3
Mettre à jour downloads/index.html
<!-- Remplacer les href="#" et les checksums -->
<div class="dl-item">
<div class="dl-icon">🪟</div>
<div>
<div class="dl-name">IronLock v2.1 — Windows</div>
<div class="dl-meta">ironlock-v2.1-windows-x64.zip · 4.5 MB</div>
</div>
<div class="dl-hash"><code>SHA-256 : a3f8c2...</code></div>
<a href="https://github.com/.../releases/.../ironlock-v2.1-windows-x64.zip"
class="btn btn-outline">Télécharger →</a>
</div>
4
Déplacer la version précédente en "Archives"
Dans
downloads/index.html, déplacer l'ancienne version dans la section "Versions précédentes" avec opacity réduite.5
Ajouter une entrée changelog
Voir section précédente. Mettre à jour
sitemap.xml avec lastmod mis à jour.
07
Modifier les traductions i18n
Ajouter une clé
// 1. Dans assets/i18n/fr.json
{
// ... clés existantes ...
"ma.nouvelle.cle": "Texte en français"
}
// 2. Dans assets/i18n/en.json
{
// ... clés existantes ...
"ma.nouvelle.cle": "Text in English"
}
// 3. Dans le HTML
<p data-i18n="ma.nouvelle.cle">Texte en français</p>
Clés existantes importantes
| Clé | Utilisation |
|---|---|
| nav.home/products/blog... | Liens navbar |
| hero.tag / hero.sub | Hero page accueil |
| footer.copy | Copyright footer (avec {year}) |
| section.newsletter.* | Bloc newsletter |
| search.placeholder | Placeholder modal recherche |
| contact.form.* | Labels formulaire contact |
| ironlock.* | Page produit IronLock |
⚠
Si une clé est présente dans
fr.json mais absente de en.json, la clé elle-même s'affichera en anglais (ex: "nav.home"). Toujours ajouter les 2 fichiers en même temps.
08
Mettre à jour l'index de recherche
⚠
CRITIQUE : Le fichier
assets/js/components.js ne tolère aucune apostrophe directe dans les chaînes de searchIndex. Toujours utiliser les encodages Unicode ci-dessous.Encodages Unicode à utiliser
| Caractère | Encode | Exemple |
|---|---|---|
| ' apostrophe | \u2019 | d\u2019installation |
| — tiret long | \u2014 | IronLock \u2014 V2 |
| – tiret court | \u2013 | v1.0 \u2013 v2.0 |
| é | \u00e9 | s\u00e9curit\u00e9 |
| è | \u00e8 | m\u00e8re |
| ê | \u00ea | t\u00eate |
| à | \u00e0 | \u00e0 une machine |
| î | \u00ee | cha\u00eene |
Ajouter une entrée
// Dans assets/js/components.js
// Section : const searchIndex = [
{
cat: "Blog",
title: "Mon article sur la s\u00e9curit\u00e9",
excerpt: "Description sans apostrophe directe"
+ " — utiliser \u2014 pour les tirets",
url: root + "blog/mon-article.html"
},
💡
Astuce : utiliser des guillemets doubles
"..." pour les strings et des Unicode escapes pour tout caractère spécial. Valider avec node --check assets/js/components.js après modification.
10
SEO & Sitemap
Meta tags obligatoires par page
| Tag | Valeur |
|---|---|
| <title> | Titre unique — TRUvector (max 60 chars) |
| meta description | Description unique (max 150 chars) |
| link canonical | URL absolue https://truvector.dev/... |
| og:title | Identique au title |
| og:description | Identique à meta description |
| og:image | https://truvector.dev/assets/img/logo.png (absolu) |
| og:type | "website" ou "article" pour les blogs |
Priorités sitemap recommandées
| Type de page | priority | changefreq |
|---|---|---|
| Page d'accueil | 1.0 | weekly |
| Page produit principale | 0.95 | monthly |
| Pricing / Download | 0.9 | monthly |
| Blog index | 0.8 | weekly |
| Article de blog | 0.75 | monthly |
| À propos / Contact | 0.6 | yearly |
| Legal | 0.3 | yearly |
11
Conventions de nommage
| Type | Convention | Exemple |
|---|---|---|
| Fichiers HTML | kebab-case, minuscules, pas d'accents | proteger-python-reverse-engineering.html |
| Dossiers | kebab-case, minuscules | products/ironlock/ |
| Images | kebab-case + format | logo.webp, hero-ironlock.png |
| Clés i18n | dot.notation, catégorie.sous-catégorie | nav.home, footer.products, contact.form.name |
| IDs HTML | kebab-case | id="main-content", id="nav-placeholder" |
| Classes CSS | kebab-case, préfixe catégorie | .blog-card, .nav-link, .btn-primary |
| IDs searchIndex | cat + url root suffisent | cat: "Blog", url: root + "blog/mon-article.html" |
| Tags blog (data-tags) | minuscules, espaces séparateurs | data-tags="security python" |
12
Checklist avant git push
Pour toute modification
□ node --check assets/js/components.js → 0 erreur
□ node --check assets/js/main.js → 0 erreur
□ Tester thème dark sur les pages modifiées
□ Tester thème light sur les pages modifiées
□ Tester Ctrl+K → recherche fonctionne
□ Tester sur mobile (< 768px)
Pour une nouvelle page
□ ROOT path correct (./ ../ ../../)
□ Script anti-FOUC présent dans <head>
□ nav-placeholder et footer-placeholder présents
□ skip-link + id="main-content" présents
□ meta canonical avec URL absolue
□ og:image avec URL absolue (pas relative)
□ Entrée ajoutée dans sitemap.xml
□ Entrée ajoutée dans searchIndex