Ergonomie-Assistent — Fähigkeit zum Schreiben von Blogartikeln
Wandelt rohe, unstrukturierte Blog-Entwürfe (Markdown-Exporte, alte Blogger-Inline-Stile usw.) in sauberes HTML im V8-Designstil um.
Ausgabespezifikationen
- Verwendung der CSS-Variablen und des Farbschemas von V8
- Einbettung von JSON-LD Article Schema für KI-gestützte SEO
- Durchgängige Verwendung von Traditionellem Chinesisch, keine vereinfachten chinesischen Zeichen (z.B. „头“ → „頭“, „专“ → „專“, „发“ → „發“). Nach der Ausgabe muss der gesamte Text auf vereinfachte Zeichen überprüft werden.
- Gegebenenfalls Einfügen von Noah-Rollen-Interaktionskomponenten
- Entfernen aller überflüssigen Attribute von externen Editoren (z.B.
cid,mdtype,white-space) - Bilder beibehalten und mit
loading="lazy"und beschreibendemaltversehen - Bilder mit
border-radius: 8px, voller Breite, zentriert
V8-Farbschema-Referenz
--ergopt-text: #242826;
--ergopt-muted: #6b736f;
--ergopt-border: #dde5df;
--ergopt-accent: #147d75;
--ergopt-accent-soft: #e7f3ef;
--ergopt-warm: #f3eadb;
SEO-Struktur
Jeder Artikel muss ein JSON-LD Article Schema einbetten:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Artikelüberschrift (mit Ergonomie-Assistent/Noah-Markennamen)",
"description": "In der Suchergebnisliste angezeigte Beschreibung, 50-80 Zeichen, mit Keywords",
"author": { "@type": "Person", "name": "Ergonomie-Assistent Noah" },
"image": "URL des Titelbilds",
"keywords": ["Ergonomie", "Keyword1", "Keyword2", "Noah Ergonomie-Assistent"]
}
</script>
Artikel-Layout-Komponenten
Alle Komponenten teilen sich einen gemeinsamen Container:
<div class="article-wrap">
<!-- Inhalt hier -->
</div>
Komponenten-CSS (vollständig eingebunden)
.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; }
}
Verwendung der Komponenten
| Komponente | Verwendung | Anlass |
|---|---|---|
noah-callout | Noah-Erinnerung/Hinweis | Einleitung, Abschluss |
ng-box | Falsche Haltung/Irrtümer/No-Gos | Auflistung häufiger Fehler |
tip-card | Richtige Schritte/Anleitungen/Tipps | Nummerierte Schritte |
check-card | Selbstcheck-Punkte | Vom Leser selbst zu prüfende Punkte (z.B. Schlafhaltung, Körperhaltung) |
pillow-hint | Auswahlkriterien/Kurztipps | Schnellreferenz (z.B. Faustregel) |
article-divider | Abschnittstrenner | Zwischen jedem Hauptabschnitt |
Artikelstruktur-Vorlage
<!-- Artikelüberschrift (V8 + Noah) -->
<script type="application/ld+json">{/* Article Schema */}</script>
<style>{/* Obenstehendes CSS einbinden */}</style>
<div class="article-wrap">
<img class="featured-img" src="..." alt="..." loading="lazy">
<!-- Einleitung 1-2 Absätze -->
<p>...</p>
<!-- Noah-Hinweisbox (optional) -->
<div class="noah-callout">
<div class="label">Noah's herzliche Erinnerung</div>
<p>...</p>
</div>
<hr class="article-divider">
<h2>Thema 1: Ergonomie-Analyse</h2>
<p>...</p>
<hr class="article-divider">
<h2>Thema 2: Falsche Haltungen/No-Gos</h2>
<div class="ng-box">...</div>
<div class="ng-box">...</div>
<hr class="article-divider">
<h2>Thema 3: Richtige Vorgehensweise</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>Noah's herzliche Tipps</h2>
<p>...</p>
<div class="noah-callout">
<div class="label">Noah-Assistent</div>
<p>...</p>
</div>
</div>
Namenskonventionen
Artikeldateiname: Artikelbeispiel_<Thema>.html
Schema headline: Endet mit Markenerkennung „Ergonomie-Assistent/Noah“
Keywords-Array: Letzter Eintrag fest als "Noah Ergonomie-Assistent"
Bild-alt: Beschreibender Text auf Chinesisch, max. 15 Zeichen