Assistant Ergonomique — Compétence de rédaction d'articles de blog
Convertit les brouillons d'articles bruts et désorganisés (exportations Markdown, anciens styles intégrés de Blogger, etc.) en HTML propre au style du thème V8.
Spécifications de sortie
- Utiliser les variables CSS et la palette du langage de conception V8
- Intégrer le schéma JSON-LD Article pour le SEO IA
- Utiliser exclusivement le chinois traditionnel, interdiction d'utiliser des caractères chinois simplifiés (ex. « 头 » → « 頭 », « 专 » → « 專 », « 发 » → « 發 », etc.). Après la sortie, scanner l'intégralité du texte pour confirmer l'absence de caractères simplifiés.
- Insérer au moment opportun des composants d'interaction du personnage Noah
- Supprimer tous les attributs superflus provenant d'éditeurs externes (
cid,mdtype,white-space, etc.) - Conserver les images originales et s'assurer de l'attribut
loading="lazy"et d'unaltdescriptif - Appliquer aux images
border-radius: 8px, pleine largeur, centrées
Palette de couleurs V8 de référence
--ergopt-text: #242826;
--ergopt-muted: #6b736f;
--ergopt-border: #dde5df;
--ergopt-accent: #147d75;
--ergopt-accent-soft: #e7f3ef;
--ergopt-warm: #f3eadb;
Structure SEO
Chaque article doit intégrer le schéma JSON-LD Article :
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Titre de l'article (incluant la marque Assistant Ergonomique / Noah)",
"description": "Description affichée dans les résultats de recherche, 50-80 caractères, incluant les mots-clés",
"author": { "@type": "Person", "name": "Assistant Ergonomique Noah" },
"image": "URL de l'image principale",
"keywords": ["Ergonomie", "mot-clé1", "mot-clé2", "Noah Assistant Ergonomique"]
}
</script>
Composants de mise en page d'article
Tous les composants partagent un conteneur englobant :
<div class="article-wrap">
<!-- Contenu ici -->
</div>
CSS des composants (intégration complète)
.article-wrap {
max-width: 760px; margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
color: #242826; line-height: 1.85; font-size: 1.08rem; letter-spacing: .02em;
}
.article-wrap * { box-sizing: border-box; }
.article-wrap .featured-img { width: 100%; border-radius: 8px; margin: 0 0 24px; display: block; }
.article-wrap p { margin: 0 0 1.18em; color: #242826; }
.article-wrap h2 { font-size: 1.55rem; font-weight: 700; color: #242826; margin: 1.85em 0 .7em; line-height: 1.35; padding-bottom: 6px; border-bottom: 2px solid #e7f3ef; }
.article-wrap h3 { font-size: 1.28rem; font-weight: 700; color: #242826; margin: 1.5em 0 .6em; line-height: 1.35; }
.article-wrap strong { color: #147d75; }
.article-wrap ul, .article-wrap ol { margin: 0 0 1.35em 1.4em; padding: 0; }
.article-wrap li { margin: .35em 0; }
.noah-callout {
background: #e7f3ef; border-left: 4px solid #147d75;
border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 1.5em 0;
}
.noah-callout .label { font-size: .82rem; font-weight: 700; color: #147d75; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.noah-callout p { margin: 0; color: #242826; }
.ng-box {
background: #fbfaf7; border: 1px solid #dde5df; border-left: 4px solid #e8a838;
border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 1em 0;
}
.ng-box .label { font-size: .82rem; font-weight: 700; color: #b8860b; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.ng-box p { margin: 0; color: #4a524e; }
.tip-card {
background: #f7f8f6; border: 1px solid #dde5df;
border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.tip-card .num {
display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.tip-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.tip-card p { margin: 0; color: #4a524e; font-size: 1rem; }
.check-card {
background: #f7f8f6; border: 1px solid #dde5df;
border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.check-card .num {
display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.check-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.check-card p { margin: 0 0 6px; color: #4a524e; font-size: 1rem; }
.check-card .note { font-size: .88rem; color: #6b736f; margin: 0; padding-left: 12px; border-left: 2px solid #dde5df; }
.article-divider {
border: none; height: 1px;
background: linear-gradient(90deg, transparent, #dde5df, transparent);
margin: 2.2em 0;
}
@media (max-width: 700px) {
.article-wrap { font-size: 1.04rem; }
}
Moments d'utilisation des composants
| Composant | Utilité | Moment |
|---|---|---|
noah-callout | Rappel / Conseil de Noah | Introduction, conclusion |
ng-box | Posture NG / Idée fausse / Piège | Lors de l'énumération des erreurs courantes |
tip-card | Étapes correctes / Tutoriel / Astuce | Lors de la liste des étapes numérotées |
check-card | Éléments d'auto-vérification | Sujets que le lecteur peut vérifier par lui-même (ex. position de sommeil, posture) |
pillow-hint | Indicateurs de sélection / Indice concis | Informations de référence rapide (ex. indicateur de hauteur de coussin) |
article-divider | Séparateur de paragraphes | Entre chaque grande section |
Modèle de structure d'article
<!-- Titre de l'article (V8 + Noah) -->
<script type="application/ld+json">{/* Article Schema */}</script>
<style>{/* CSS ci-dessus */}</style>
<div class="article-wrap">
<img class="featured-img" src="..." alt="..." loading="lazy">
<!-- 1-2 paragraphes d'introduction -->
<p>...</p>
<!-- Boîte de rappel Noah (optionnelle) -->
<div class="noah-callout">
<div class="label">Rappel chaleureux de Noah</div>
<p>...</p>
</div>
<hr class="article-divider">
<h2>Thème 1 : Analyse ergonomique</h2>
<p>...</p>
<hr class="article-divider">
<h2>Thème 2 : Postures erronées / Pièges</h2>
<div class="ng-box">...</div>
<div class="ng-box">...</div>
<hr class="article-divider">
<h2>Thème 3 : Bonnes pratiques</h2>
<div class="tip-card"><div class="num">1</div><h3>...</h3><p>...</p></div>
<div class="tip-card"><div class="num">2</div><h3>...</h3><p>...</p></div>
<div class="tip-card"><div class="num">3</div><h3>...</h3><p>...</p></div>
<hr class="article-divider">
<h2>Conseil attentionné de Noah</h2>
<p>...</p>
<div class="noah-callout">
<div class="label">Assistant Noah</div>
<p>...</p>
</div>
</div>
Règles de nommage
Nom du fichier article : exemple_article_<thème>.html
En-tête du schéma (headline) : terminer par « 人因小管家／Noah » comme identifiant de marque
Tableau keywords : dernier élément fixe sur "Noah人因小管家"
alt des images : texte descriptif en chinois, 15 caractères maximum